diff options
Diffstat (limited to 'src')
4 files changed, 73 insertions, 91 deletions
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"> |