Improve styling

eea · Jan 16, 2025 · 9e9cf73 · 9e9cf73
1 parent 8f75385
commit 9e9cf73
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/src/ChatBlock/ChatMessageBubble.jsx b/src/ChatBlock/ChatMessageBubble.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { Citation } from './Citation';
 import { SourceDetails } from './Source';
-import { SVGIcon, transformEmailsToLinks } from './utils';
+import { debounce, SVGIcon, transformEmailsToLinks } from './utils';
 
 import BotIcon from './../icons/bot.svg';
 import UserIcon from './../icons/user.svg';
@@ -66,6 +66,8 @@ export function ToolCall({ tool_args, tool_name, tool_result }) {
   return null;
 }
 
+let click_signal = { current: null };
+
 export function ChatMessageBubble(props) {
   const { message, isLoading, isMostRecent, libs, onChoice, showToolCalls } =
     props;
@@ -76,8 +78,8 @@ export function ChatMessageBubble(props) {
   const showLoader = isMostRecent && isLoading;
 
   // TODO: these classes are not actually used, remove them
-  const colorClassName = isUser ? 'bg-lime-300' : 'bg-slate-50';
-  const alignmentClassName = isUser ? 'ml-auto' : 'mr-auto';
+  // const colorClassName = isUser ? 'bg-lime-300' : 'bg-slate-50';
+  // const alignmentClassName = isUser ? 'ml-auto' : 'mr-auto';
 
   const icon = isUser ? (
     <div className="circle user">
@@ -103,7 +105,7 @@ export function ChatMessageBubble(props) {
   }, {});
 
   return (
-    <div className={`${alignmentClassName} ${colorClassName} `}>
+    <div>
       <div className="comment">
         {icon}
 
@@ -135,20 +137,20 @@ export function ChatMessageBubble(props) {
             </>
           )}
           {message.relatedQuestions?.length > 0 && (
-            <>
+            <div className="chat-related-questions">
               <h5>Related Questions:</h5>
               {message.relatedQuestions?.map(({ question }) => (
                 <div
                   className="relatedQuestionButton"
                   role="button"
-                  onClick={() => onChoice(question)}
-                  onKeyDown={() => onChoice(question)}
+                  onClick={() => !isLoading && onChoice(question)}
+                  onKeyDown={() => !isLoading && onChoice(question)}
                   tabIndex="-1"
                 >
                   {question}
                 </div>
               ))}
-            </>
+            </div>
           )}
         </div>
       </div>

diff --git a/src/ChatBlock/style.less b/src/ChatBlock/style.less
@@ -4,6 +4,7 @@
 @citationCircleColor: #e6e7e8;
 @citationCircleHoverColor: @blue;
 @borderRadius: 0.4rem;
+@marginBottom: 1.6em;
 
 .mr-auto {
   margin: 2em 0;
@@ -43,6 +44,7 @@
   .comment {
     display: flex;
     gap: 0.8em;
+    margin-bottom: @marginBottom;
 
     i.inverted.circular.grey.icon {
       background-color: #3d5265 !important;
@@ -59,11 +61,16 @@
     }
   }
 
+  .chat-related-questions {
+    margin-bottom: 2em;
+  }
+
   .sources {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 0.8em;
+    margin-bottom: @marginBottom;
 
     @media only screen and (max-width: 800px) {
       display: inline-flex;
@@ -170,6 +177,9 @@
 
 .relatedQuestionButton {
   margin-bottom: 0.3em;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
   cursor: pointer;
 
   &:hover {