From b4a51bce3bb05738ec9cd0efd1b795ba19cbc640 Mon Sep 17 00:00:00 2001 From: "A.J. Shulman" Date: Fri, 8 Nov 2024 10:44:51 -0500 Subject: looks better still some things to work out --- .../nodes/chatbot/chatboxcomponents/ChatBox.scss | 117 +++++++++++---------- 1 file changed, 61 insertions(+), 56 deletions(-) (limited to 'src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss') 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); -- cgit v1.2.3-70-g09d2 From 309085a660f4f932935adba812214a948aacdfc3 Mon Sep 17 00:00:00 2001 From: "A.J. Shulman" Date: Fri, 8 Nov 2024 11:07:45 -0500 Subject: displays much better with citations inline --- .../nodes/chatbot/chatboxcomponents/ChatBox.scss | 77 ++++++++++++---------- .../chatbot/chatboxcomponents/MessageComponent.tsx | 43 +++++++++--- 2 files changed, 78 insertions(+), 42 deletions(-) (limited to 'src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss') diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss index ea461388f..9cf760a12 100644 --- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss +++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss @@ -86,11 +86,10 @@ $transition: all 0.2s ease-in-out; height: 48px; margin-left: 10px; cursor: pointer; - transition: $transition; display: flex; align-items: center; justify-content: center; - position: relative; + transition: $transition; &:hover { background-color: darken($primary-color, 10%); @@ -102,12 +101,12 @@ $transition: all 0.2s ease-in-out; } .spinner { - height: 24px; - width: 24px; + width: 20px; + height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-top: 3px solid #fff; border-radius: 50%; - animation: spin 1s linear infinite; + animation: spin 0.6s linear infinite; } } } @@ -143,12 +142,14 @@ $transition: all 0.2s ease-in-out; .message { max-width: 75%; - padding: 14px 18px; - border-radius: 16px; + padding: 12px 16px; + border-radius: 12px; font-size: 15px; line-height: 1.6; box-shadow: 0 1px 3px $shadow-color; word-wrap: break-word; + display: flex; + flex-direction: column; &.user { align-self: flex-end; @@ -164,10 +165,6 @@ $transition: all 0.2s ease-in-out; border-bottom-left-radius: 4px; } - .message-content { - // Additional styles if needed - } - .toggle-info { margin-top: 10px; background-color: transparent; @@ -178,7 +175,7 @@ $transition: all 0.2s ease-in-out; font-size: 14px; cursor: pointer; transition: $transition; - margin-bottom: 12px; // Adds space between button and thoughts/actions text + margin-bottom: 16px; &:hover { background-color: rgba($primary-color, 0.1); @@ -186,7 +183,12 @@ $transition: all 0.2s ease-in-out; } .processing-info { - margin-top: 10px; + margin-bottom: 12px; + padding: 10px 15px; + background-color: #f9f9f9; + border-radius: 8px; + box-shadow: 0 1px 3px $shadow-color; + font-size: 14px; .processing-item { margin-bottom: 5px; @@ -194,6 +196,35 @@ $transition: all 0.2s ease-in-out; color: $light-text-color; } } + + .message-content { + background-color: inherit; + padding: 10px; + border-radius: 8px; + font-size: 15px; + line-height: 1.5; + + .citation-button { + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + border-radius: 50%; + background-color: rgba(0, 0, 0, 0.1); + color: $text-color; + font-size: 12px; + font-weight: bold; + margin-left: 5px; + cursor: pointer; + transition: $transition; + + &:hover { + background-color: rgba($primary-color, 0.2); + color: #fff; + } + } + } } .follow-up-questions { @@ -229,26 +260,6 @@ $transition: all 0.2s ease-in-out; } } -.citation-button { - display: inline-flex; - align-items: center; - justify-content: center; - width: 22px; - height: 22px; - border-radius: 50%; - background-color: rgba(0, 0, 0, 0.1); - color: $text-color; - font-size: 12px; - font-weight: bold; - margin-left: 5px; - cursor: pointer; - transition: $transition; - - &:hover { - background-color: rgba(0, 0, 0, 0.2); - } -} - .uploading-overlay { position: absolute; top: 0; diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/MessageComponent.tsx b/src/client/views/nodes/chatbot/chatboxcomponents/MessageComponent.tsx index 44dedca78..120e20001 100644 --- a/src/client/views/nodes/chatbot/chatboxcomponents/MessageComponent.tsx +++ b/src/client/views/nodes/chatbot/chatboxcomponents/MessageComponent.tsx @@ -34,40 +34,57 @@ interface MessageComponentProps { * @param {MessageComponentProps} props - The props for the component. */ const MessageComponentBox: React.FC = ({ 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 ( - {item.text} + {item.text} {citation_ids.map((id, idx) => { const citation = message.citations?.find(c => c.citation_id === id); if (!citation) return null; return ( ); })} +
); - } else if (item.type === TEXT_TYPE.NORMAL) { + } + + // Handle normal text + else if (item.type === TEXT_TYPE.NORMAL) { return ( {item.text} ); - } else if ('query' in item) { + } + + // Handle query type content + else if ('query' in item) { return ( {JSON.stringify(item.query)} ); - } else { + } + + // Fallback for any other content type + else { return ( {JSON.stringify(item)} @@ -76,18 +93,24 @@ const MessageComponentBox: React.FC = ({ 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 ( -
+
Thought: {info.content}
); } else if (info.type === PROCESSING_TYPE.ACTION) { return ( -
+
Action: {info.content}
); @@ -97,8 +120,6 @@ const MessageComponentBox: React.FC = ({ message, onFollo return (
-
{message.content && message.content.map(messageFragment => {renderContent(messageFragment)})}
- {/* Processing Information Dropdown */} {hasProcessingInfo && (
@@ -106,9 +127,13 @@ const MessageComponentBox: React.FC = ({ message, onFollo {dropdownOpen ? 'Hide Agent Thoughts/Actions' : 'Show Agent Thoughts/Actions'} {dropdownOpen &&
{message.processing_info.map(renderProcessingInfo)}
} +
)} + {/* Message Content */} +
{message.content && message.content.map(messageFragment => {renderContent(messageFragment)})}
+ {/* Follow-up Questions Section */} {message.follow_up_questions && message.follow_up_questions.length > 0 && (
-- cgit v1.2.3-70-g09d2