storybook: update chat component

Author: AdamJ

.gitignore

@@ -5,3 +5,4 @@
 storybook-static
 
 .env
+build-storybook.log

.storybook/preview.js

@@ -17,7 +17,7 @@ const preview = {
     layout: 'centered',
     options: {
       storySort: {
-        order: ['Intro', 'Pages', ['Login', 'Dashboard', 'Tables'], 'Components', '*', 'WIP'],
+        order: ['Introduction', 'Pages', ['Login', 'Dashboard', 'Tables'], 'Components', '*', 'WIP'],
       },
     },
     actions: { argTypesRegex: '^on[A-Z].*' },

docs/css/site.css

@@ -17,11 +17,10 @@
   transition: .2s ease-in-out transform;
 }
 
-/* Chatbot styles -- TEMP -- */
-
 .chat-article {
   height: 90dvh;
 }
+/* Chatbot styles -- TEMP -- */
 .chat-wrapper {
   display: flex;
   flex-direction: column;
@@ -30,6 +29,7 @@
   align-self: stretch;
   height: 100%;
   background: var(--cas-body-bg, #fff);
+  position: relative; /* so that the history panel sits inside of the container and not over the navigation */
 }
 .chat-header {
   display: flex;
@@ -118,6 +118,7 @@
   gap: var(--cas-spacer-xl);
   align-self: stretch;
   border-radius: var(--cas-border-radius-md);
+  position: relative;
 }
 .chatbot-message-group.message-bot {
   background: var(--cas-body-bg-rgba, rgba(226, 231, 235, 0.20));
@@ -152,3 +153,13 @@
   border-radius: var(--cas-border-radius-sm);
   background: rgba(255, 255, 255, 0.00);
 }
+.chatbot-response-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--cas-spacer-xs, 0.25rem);
+  position: absolute;
+  right: 0;
+  bottom: -16px;
+}
+

docs/css/site.css.map

@@ -55,9 +55,3 @@
   /* Set the Unicode value for the "fa-trash" icon */
   content: '\f56e';
 }
-
-.card:hover {
-  border: 1px solid var(--cas-primary-border-subtle, #b9e4fe);
-  background: var(--cas-primary-border-subtle);
-  cursor: pointer;
-}

docs/css/variables.css

@@ -17,11 +17,10 @@
   transition: .2s ease-in-out transform;
 }
 
-/* Chatbot styles -- TEMP -- */
-
 .chat-article {
   height: 90dvh;
 }
+/* Chatbot styles -- TEMP -- */
 .chat-wrapper {
   display: flex;
   flex-direction: column;
@@ -30,6 +29,7 @@
   align-self: stretch;
   height: 100%;
   background: var(--cas-body-bg, #fff);
+  position: relative; /* so that the history panel sits inside of the container and not over the navigation */
 }
 .chat-header {
   display: flex;
@@ -118,6 +118,7 @@
   gap: var(--cas-spacer-xl);
   align-self: stretch;
   border-radius: var(--cas-border-radius-md);
+  position: relative;
 }
 .chatbot-message-group.message-bot {
   background: var(--cas-body-bg-rgba, rgba(226, 231, 235, 0.20));
@@ -152,3 +153,13 @@
   border-radius: var(--cas-border-radius-sm);
   background: rgba(255, 255, 255, 0.00);
 }
+.chatbot-response-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--cas-spacer-xs, 0.25rem);
+  position: absolute;
+  right: 0;
+  bottom: -16px;
+}
+

docs/css/variables.css.map

@@ -55,9 +55,3 @@
   /* Set the Unicode value for the "fa-trash" icon */
   content: '\f56e';
 }
-
-.card:hover {
-  border: 1px solid var(--cas-primary-border-subtle, #b9e4fe);
-  background: var(--cas-primary-border-subtle);
-  cursor: pointer;
-}

src/css/site.css

@@ -27,6 +27,12 @@ export const createChat = () => {
   const chatThreads = createChatbot({ state: 'chatThreads' });
   section.appendChild(chatThreads);
 
+  const chatConfiguration = createChatbot({ state: 'chatConfiguration' });
+  section.appendChild(chatConfiguration);
+
+  const chatHistory = createChatbot({ state: 'chatHistory' });
+  section.appendChild(chatHistory);
+
   const chatInput = createChatbot({ state: 'chatInput' });
   section.appendChild(chatInput);