Merge pull request #690 from StampyAI/Ticket-#653-&-#598-Updates

formatting chat messages, typo fix

app/components/Button/button.css

@@ -27,6 +27,7 @@
   border-width: 0;
   line-height: 0;
   background: inherit;
+  cursor: pointer;
 }
 
 /* style */
@@ -172,7 +173,7 @@
 }
 
 .active {
-  background-color: var(----colors-teal-50);
+  background-color: var(--colors-teal-50);
 }
 
 .inactive:hover {
@@ -181,7 +182,6 @@
 
 /* #### Composite button #### */
 .composite-button {
-  box-shadow: 0px var(--spacing-16) var(--spacing-40) 0px rgba(175, 183, 194, 0.2);
   cursor: pointer;
 }
 
@@ -255,13 +255,11 @@
   left: 50%;
   transform: translateX(-50%);
   background-color: #1b2b3e;
-  font-size: 14px;
   color: #f2f2f2;
-  padding: 5px 15px;
-  border-radius: var(--spacing-8);
+  padding: var(--spacing-8) var(--spacing-16);
+  border-radius: var(--border-radius);
   white-space: nowrap;
   pointer-events: none;
-  line-height: var(--spacing-32);
 }
 
 .button.full-width {

app/components/Button/index.tsx

@@ -43,7 +43,7 @@ const Button = ({
         {...props}
       >
         {children}
-        {secondary && tooltip && !disabled && <p className="tool-tip-secondary">{tooltip}</p>}
+        {secondary && tooltip && !disabled && <p className="tool-tip-secondary xs">{tooltip}</p>}
       </Link>
     )
   }
@@ -56,7 +56,7 @@ const Button = ({
       {...props}
     >
       {children}
-      {secondary && tooltip && !disabled && <p className="tool-tip-secondary">{tooltip}</p>}
+      {secondary && tooltip && !disabled && <p className="tool-tip-secondary xs">{tooltip}</p>}
     </button>
   )
 }
@@ -68,7 +68,7 @@ export interface CompositeButtonProps {
 }
 export const CompositeButton = ({children, className = '', secondary}: CompositeButtonProps) => (
   <div
-    className={`${(secondary ? 'composite-button-secondary' : 'composite-button') + ' ' + className}`}
+    className={`shadowed ${(secondary ? 'composite-button-secondary' : 'composite-button') + ' ' + className}`}
   >
     {children}
   </div>

app/components/Chatbot/ChatEntry.tsx

@@ -143,21 +143,22 @@ const ChatbotReply = ({question, phase, content, citationsMap}: AssistantEntry)
     citations.push(v)
   })
   citations.sort((a, b) => a.index - b.index)
+  const phaseMessageClass = 'phase-message large-reading'
 
   const PhaseState = () => {
     switch (phase) {
       case 'started':
-        return <p>Loading: Sending query...</p>
+        return <p className={phaseMessageClass}>Loading: Sending query...</p>
       case 'semantic':
-        return <p>Loading: Performing semantic search...</p>
+        return <p className={phaseMessageClass}>Loading: Performing semantic search...</p>
       case 'history':
-        return <p>Loading: Processing history...</p>
+        return <p className={phaseMessageClass}>Loading: Processing history...</p>
       case 'context':
-        return <p>Loading: Creating context...</p>
+        return <p className={phaseMessageClass}>Loading: Creating context...</p>
       case 'prompt':
-        return <p>Loading: Creating prompt...</p>
+        return <p className={phaseMessageClass}>Loading: Creating prompt...</p>
       case 'llm':
-        return <p>Loading: Waiting for LLM...</p>
+        return <p className={phaseMessageClass}>Loading: Waiting for LLM...</p>
       case 'streaming':
       case 'followups':
       default:
@@ -211,7 +212,7 @@ const ChatbotReply = ({question, phase, content, citationsMap}: AssistantEntry)
           ]}
         />
       ) : undefined}
-      {phase === 'followups' ? <p>Checking for followups...</p> : undefined}
+      {phase === 'followups' ? <p className="followups">Checking for followups...</p> : undefined}
     </div>
   )
 }

app/components/Chatbot/chat_entry.css

@@ -13,6 +13,16 @@ article.stampy {
   align-items: center;
 }
 
+.phase-message {
+  margin-left: 57px;
+  color: var(--colors-cool-grey-600);
+}
+
+.followups {
+  margin-top: var(--spacing-16);
+  color: var(--colors-cool-grey-600);
+}
+
 .chat-entry .info {
   display: flex;
   gap: var(--spacing-8);

app/components/Chatbot/index.tsx

@@ -87,7 +87,7 @@ const QuestionInput = ({
       <div className="flex-container">
         <Input
           placeholder={placeholder}
-          className={'large full-width ' + (fixed ? '' : 'shadowed')}
+          className="large full-width shadowed"
           value={question}
           onChange={(e) => handleChange(e.target.value)}
           onKeyDown={(e) => {

app/components/Chatbot/widgit.css

@@ -77,6 +77,6 @@
   width: calc(100% + 2000px);
   height: 100px;
   top: 100%;
-  z-index: 1000;
+  z-index: -1;
   background: #ffffff;
 }

app/root.css

@@ -29,7 +29,7 @@
   --colors-green-500: #40c075;
 
   /* spacing - user everywhere for padding and margin */
-  --border-radius: 4px;
+  --border-radius: 6px;
   --spacing-4: 4px;
   --spacing-8: 8px;
   --spacing-12: 12px;