From b4a51bce3bb05738ec9cd0efd1b795ba19cbc640 Mon Sep 17 00:00:00 2001
From: "A.J. Shulman" <Shulman.aj@gmail.com>
Date: Fri, 8 Nov 2024 10:44:51 -0500
Subject: looks better still some things to work out

---
 .../views/nodes/chatbot/agentsystem/prompts.ts     |   2 +-
 .../nodes/chatbot/chatboxcomponents/ChatBox.scss   | 117 +++++++++++----------
 .../nodes/chatbot/chatboxcomponents/ChatBox.tsx    |   5 +-
 .../chatbot/chatboxcomponents/MessageComponent.tsx |  40 ++-----
 4 files changed, 73 insertions(+), 91 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/chatbot/agentsystem/prompts.ts b/src/client/views/nodes/chatbot/agentsystem/prompts.ts
index 1f534d67c..1aa10df14 100644
--- a/src/client/views/nodes/chatbot/agentsystem/prompts.ts
+++ b/src/client/views/nodes/chatbot/agentsystem/prompts.ts
@@ -159,7 +159,7 @@ export function getReactPrompt(tools: BaseTool<ReadonlyArray<Parameter>>[], summ
                 <action_input>
                     <action_input_description>Scraping websites for information about Qatar's tourism impact during the 2022 World Cup.</action_input_description>
                     <inputs>
-                        <queries>["Tourism impact of the 2022 World Cup in Qatar"]</query>
+                        <queries>["Tourism impact of the 2022 World Cup in Qatar"]</queries>
                     </inputs>
                 </action_input>
             </stage>
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
index 50111f678..ea461388f 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
@@ -1,42 +1,34 @@
-@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
 
-$primary-color: #4a90e2;
-$secondary-color: #f5f8fa;
-$text-color: #333;
-$light-text-color: #777;
-$border-color: #e1e8ed;
+$primary-color: #3f51b5;
+$secondary-color: #f0f0f0;
+$text-color: #2e2e2e;
+$light-text-color: #6d6d6d;
+$border-color: #dcdcdc;
 $shadow-color: rgba(0, 0, 0, 0.1);
-$transition: all 0.3s ease;
+$transition: all 0.2s ease-in-out;
+
 .chat-box {
     display: flex;
     flex-direction: column;
     height: 100%;
     background-color: #fff;
-    font-family:
-        'Atkinson Hyperlegible',
-        -apple-system,
-        BlinkMacSystemFont,
-        'Segoe UI',
-        Roboto,
-        Helvetica,
-        Arial,
-        sans-serif;
-    border-radius: 12px;
+    font-family: 'Inter', sans-serif;
+    border-radius: 8px;
     overflow: hidden;
-    box-shadow: 0 4px 12px $shadow-color;
+    box-shadow: 0 2px 8px $shadow-color;
     position: relative;
 
     .chat-header {
         background-color: $primary-color;
-        color: white;
-        padding: 15px;
+        color: #fff;
+        padding: 16px;
         text-align: center;
-        box-shadow: 0 2px 4px $shadow-color;
-        height: fit-content;
+        box-shadow: 0 1px 4px $shadow-color;
 
         h2 {
             margin: 0;
-            font-size: 1.3em;
+            font-size: 1.5em;
             font-weight: 500;
         }
     }
@@ -44,30 +36,30 @@ $transition: all 0.3s ease;
     .chat-messages {
         flex-grow: 1;
         overflow-y: auto;
-        padding: 20px;
+        padding: 16px;
         display: flex;
         flex-direction: column;
-        gap: 10px; // Added to give space between elements
+        gap: 12px;
 
         &::-webkit-scrollbar {
-            width: 6px;
+            width: 8px;
         }
 
         &::-webkit-scrollbar-thumb {
-            background-color: $border-color;
-            border-radius: 3px;
+            background-color: rgba(0, 0, 0, 0.1);
+            border-radius: 4px;
         }
     }
 
     .chat-input {
         display: flex;
-        padding: 20px;
+        padding: 12px;
         border-top: 1px solid $border-color;
         background-color: #fff;
 
         input {
             flex-grow: 1;
-            padding: 12px 15px;
+            padding: 12px 16px;
             border: 1px solid $border-color;
             border-radius: 24px;
             font-size: 15px;
@@ -78,6 +70,11 @@ $transition: all 0.3s ease;
                 border-color: $primary-color;
                 box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
             }
+
+            &:disabled {
+                background-color: $secondary-color;
+                cursor: not-allowed;
+            }
         }
 
         .submit-button {
@@ -100,7 +97,7 @@ $transition: all 0.3s ease;
             }
 
             &:disabled {
-                background-color: $light-text-color;
+                background-color: lighten($primary-color, 20%);
                 cursor: not-allowed;
             }
 
@@ -110,10 +107,11 @@ $transition: all 0.3s ease;
                 border: 3px solid rgba(255, 255, 255, 0.3);
                 border-top: 3px solid #fff;
                 border-radius: 50%;
-                animation: spin 2s linear infinite;
+                animation: spin 1s linear infinite;
             }
         }
     }
+
     .citation-popup {
         position: fixed;
         bottom: 50px;
@@ -144,61 +142,73 @@ $transition: all 0.3s ease;
 }
 
 .message {
-    max-width: 80%;
-    margin-bottom: 20px;
-    padding: 16px 20px;
-    border-radius: 18px;
+    max-width: 75%;
+    padding: 14px 18px;
+    border-radius: 16px;
     font-size: 15px;
-    line-height: 1.5;
-    box-shadow: 0 2px 4px $shadow-color;
-    word-wrap: break-word; // To handle long words
+    line-height: 1.6;
+    box-shadow: 0 1px 3px $shadow-color;
+    word-wrap: break-word;
 
     &.user {
         align-self: flex-end;
         background-color: $primary-color;
-        color: white;
+        color: #fff;
         border-bottom-right-radius: 4px;
     }
 
-    &.chatbot {
+    &.assistant {
         align-self: flex-start;
         background-color: $secondary-color;
         color: $text-color;
         border-bottom-left-radius: 4px;
     }
 
+    .message-content {
+        // Additional styles if needed
+    }
+
     .toggle-info {
+        margin-top: 10px;
         background-color: transparent;
         color: $primary-color;
         border: 1px solid $primary-color;
-        width: 100%;
-        height: fit-content;
         border-radius: 8px;
-        padding: 10px 16px;
+        padding: 8px 12px;
         font-size: 14px;
         cursor: pointer;
         transition: $transition;
-        margin-top: 10px;
+        margin-bottom: 12px; // Adds space between button and thoughts/actions text
 
         &:hover {
             background-color: rgba($primary-color, 0.1);
         }
     }
+
+    .processing-info {
+        margin-top: 10px;
+
+        .processing-item {
+            margin-bottom: 5px;
+            font-size: 14px;
+            color: $light-text-color;
+        }
+    }
 }
 
 .follow-up-questions {
-    margin-top: 15px;
+    margin-top: 12px;
 
     h4 {
         font-size: 15px;
         font-weight: 600;
-        margin-bottom: 10px;
+        margin-bottom: 8px;
     }
 
     .questions-list {
         display: flex;
         flex-direction: column;
-        gap: 10px;
+        gap: 8px;
     }
 
     .follow-up-button {
@@ -206,15 +216,11 @@ $transition: all 0.3s ease;
         color: $primary-color;
         border: 1px solid $primary-color;
         border-radius: 8px;
-        padding: 10px 16px;
+        padding: 10px 14px;
         font-size: 14px;
         cursor: pointer;
         transition: $transition;
         text-align: left;
-        white-space: normal;
-        word-wrap: break-word;
-        width: 100%;
-        height: fit-content;
 
         &:hover {
             background-color: $primary-color;
@@ -227,8 +233,8 @@ $transition: all 0.3s ease;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 20px;
-    height: 20px;
+    width: 22px;
+    height: 22px;
     border-radius: 50%;
     background-color: rgba(0, 0, 0, 0.1);
     color: $text-color;
@@ -237,7 +243,6 @@ $transition: all 0.3s ease;
     margin-left: 5px;
     cursor: pointer;
     transition: $transition;
-    vertical-align: middle;
 
     &:hover {
         background-color: rgba(0, 0, 0, 0.2);
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
index c5ffb2c74..a61705250 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
@@ -756,9 +756,10 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         <MessageComponentBox key={this.history.length} message={this.current_message} onFollowUpClick={this.handleFollowUpClick} onCitationClick={this.handleCitationClick} updateMessageCitations={this.updateMessageCitations} />
                     )}
                 </div>
+
                 <form onSubmit={this.askGPT} className="chat-input">
-                    <input type="text" name="messageInput" autoComplete="off" placeholder="Type your message here..." value={this.inputValue} onChange={e => (this.inputValue = e.target.value)} />
-                    <button className="submit-button" type="submit" disabled={this.isLoading}>
+                    <input type="text" name="messageInput" autoComplete="off" placeholder="Type your message here..." value={this.inputValue} onChange={e => (this.inputValue = e.target.value)} disabled={this.isLoading} />
+                    <button className="submit-button" type="submit" disabled={this.isLoading || !this.inputValue.trim()}>
                         {this.isLoading ? (
                             <div className="spinner"></div>
                         ) : (
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/MessageComponent.tsx b/src/client/views/nodes/chatbot/chatboxcomponents/MessageComponent.tsx
index e463d15bf..44dedca78 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/MessageComponent.tsx
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/MessageComponent.tsx
@@ -34,18 +34,11 @@ interface MessageComponentProps {
  * @param {MessageComponentProps} props - The props for the component.
  */
 const MessageComponentBox: React.FC<MessageComponentProps> = ({ message, onFollowUpClick, onCitationClick }) => {
-    // State for managing whether the dropdown is open or closed for processing info
     const [dropdownOpen, setDropdownOpen] = useState(false);
 
-    /**
-     * Renders the content of the message based on the type (e.g., grounded text, normal text).
-     * @param {MessageContent} item - The content item to render.
-     * @returns {JSX.Element} JSX element rendering the content.
-     */
     const renderContent = (item: MessageContent) => {
         const i = item.index;
 
-        // Handle grounded text with citations
         if (item.type === TEXT_TYPE.GROUNDED) {
             const citation_ids = item.citation_ids || [];
             return (
@@ -56,34 +49,25 @@ const MessageComponentBox: React.FC<MessageComponentProps> = ({ message, onFollo
                         if (!citation) return null;
                         return (
                             <button key={i + idx} className="citation-button" onClick={() => onCitationClick(citation)}>
-                                {i + 1}
+                                [{idx + 1}]
                             </button>
                         );
                     })}
                 </span>
             );
-        }
-
-        // Handle normal text
-        else if (item.type === TEXT_TYPE.NORMAL) {
+        } else if (item.type === TEXT_TYPE.NORMAL) {
             return (
                 <span key={i} className="normal-text">
                     <ReactMarkdown>{item.text}</ReactMarkdown>
                 </span>
             );
-        }
-
-        // Handle query type content
-        else if ('query' in item) {
+        } else if ('query' in item) {
             return (
                 <span key={i} className="query-text">
                     <ReactMarkdown>{JSON.stringify(item.query)}</ReactMarkdown>
                 </span>
             );
-        }
-
-        // Fallback for any other content type
-        else {
+        } else {
             return (
                 <span key={i}>
                     <ReactMarkdown>{JSON.stringify(item)}</ReactMarkdown>
@@ -92,24 +76,18 @@ const MessageComponentBox: React.FC<MessageComponentProps> = ({ message, onFollo
         }
     };
 
-    // Check if the message contains processing information (thoughts/actions)
     const hasProcessingInfo = message.processing_info && message.processing_info.length > 0;
 
-    /**
-     * Renders processing information such as thoughts or actions during message handling.
-     * @param {ProcessingInfo} info - The processing information to render.
-     * @returns {JSX.Element | null} JSX element rendering the processing info or null.
-     */
     const renderProcessingInfo = (info: ProcessingInfo) => {
         if (info.type === PROCESSING_TYPE.THOUGHT) {
             return (
-                <div key={info.index} className="dropdown-item">
+                <div key={info.index} className="processing-item">
                     <strong>Thought:</strong> {info.content}
                 </div>
             );
         } else if (info.type === PROCESSING_TYPE.ACTION) {
             return (
-                <div key={info.index} className="dropdown-item">
+                <div key={info.index} className="processing-item">
                     <strong>Action:</strong> {info.content}
                 </div>
             );
@@ -119,6 +97,8 @@ const MessageComponentBox: React.FC<MessageComponentProps> = ({ message, onFollo
 
     return (
         <div className={`message ${message.role}`}>
+            <div className="message-content">{message.content && message.content.map(messageFragment => <React.Fragment key={messageFragment.index}>{renderContent(messageFragment)}</React.Fragment>)}</div>
+
             {/* Processing Information Dropdown */}
             {hasProcessingInfo && (
                 <div className="processing-info">
@@ -126,13 +106,9 @@ const MessageComponentBox: React.FC<MessageComponentProps> = ({ message, onFollo
                         {dropdownOpen ? 'Hide Agent Thoughts/Actions' : 'Show Agent Thoughts/Actions'}
                     </button>
                     {dropdownOpen && <div className="info-content">{message.processing_info.map(renderProcessingInfo)}</div>}
-                    <br />
                 </div>
             )}
 
-            {/* Message Content */}
-            <div className="message-content">{message.content && message.content.map(messageFragment => <React.Fragment key={messageFragment.index}>{renderContent(messageFragment)}</React.Fragment>)}</div>
-
             {/* Follow-up Questions Section */}
             {message.follow_up_questions && message.follow_up_questions.length > 0 && (
                 <div className="follow-up-questions">
-- 
cgit v1.2.3-70-g09d2