Checkpoint: Updated sidebar panel with new components

- Add non-functional UI elements for chat, references, feedback buttons, rename/share session, mic, attachment, websocket connection

src/interface/web/app/components/chatMessage/chatMessage.module.css

@@ -1,12 +1,34 @@
 div.chatMessageContainer {
     display: flex;
     flex-direction: column;
+    margin: 12px;
+    border-radius: 16px;
+    padding: 16px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
+}
+
+div.chatMessageWrapper {
+    padding-left: 24px;
+}
+
+div.khojfullHistory {
+    border-color: var(--border-color);
+    border-width: 1px;
+    padding-left: 24px;
+}
+
+div.youfullHistory {
+    max-width: 80%;
+}
+
+div.chatMessageContainer.youfullHistory {
+    padding-left: 0px;
 }
 
 div.you {
-    color: var(--frosted-background-color);
-    background-color: var(--intense-green);
+    background-color: var(--frosted-background-color);
     align-self: flex-end;
+    border-radius: 16px;
 }
 
 div.khoj {
@@ -15,6 +37,11 @@ div.khoj {
     align-self: flex-start;
 }
 
+div.khojChatMessage {
+    padding-top: 8px;
+    padding-left: 16px;
+}
+
 div.chatMessageContainer img {
     width: 50%;
 }
@@ -42,21 +69,25 @@ div.chatFooter {
 div.chatButtons {
     display: flex;
     justify-content: flex-end;
+    border: var(--border-color) 1px solid;
+    border-radius: 16px;
+    position: relative;
+    bottom: -28px;
+    background-color: hsla(var(--background));
 }
 
 div.chatFooter button {
     cursor: pointer;
-    background-color: var(--calm-blue);
-    color: var(--main-text-color);
+    color: hsl(var(--muted-foreground));
     border: none;
-    border-radius: 0.5rem;
-    padding: 0.25rem;
-    margin-left: 0.5rem;
+    border-radius: 16px;
+    padding: 4px;
+    margin-left: 4px;
+    margin-right: 4px;
 }
 
 div.chatFooter button:hover {
     background-color: var(--frosted-background-color);
-    color: var(--intense-green);
 }
 
 div.chatTimestamp {
@@ -70,7 +101,6 @@ button.codeCopyButton {
 }
 
 button.codeCopyButton:hover {
-    background-color: var(--intense-green);
     color: var(--frosted-background-color);
 }
 
@@ -78,3 +108,10 @@ div.feedbackButtons img,
 button.copyButton img {
     width: 24px;
 }
+
+@media screen and (max-width: 768px) {
+    div.youfullHistory {
+        max-width: 100%;
+    }
+
+}

src/interface/web/app/components/chatMessage/chatMessage.tsx

@@ -12,6 +12,8 @@ import 'highlight.js/styles/github.css'
 
 import { hasValidReferences } from '../referencePanel/referencePanel';
 
+import { ThumbsUp, ThumbsDown, Copy } from '@phosphor-icons/react';
+
 const md = new markdownIt({
     html: true,
     linkify: true,
@@ -103,31 +105,19 @@ export interface ChatHistoryData {
 
 function FeedbackButtons() {
     return (
-        <div className={styles.feedbackButtons}>
+        <div className={`${styles.feedbackButtons} flex align-middle justify-center items-center`}>
             <button className={styles.thumbsUpButton}>
-                <Image
-                    src="/thumbs-up.svg"
-                    alt="Thumbs Up"
-                    width={24}
-                    height={24}
-                    priority
-                />
+                <ThumbsUp color='hsl(var(--muted-foreground))' />
             </button>
             <button className={styles.thumbsDownButton}>
-                <Image
-                    src="/thumbs-down.svg"
-                    alt="Thumbs Down"
-                    width={24}
-                    height={24}
-                    priority
-                />
+                <ThumbsDown color='hsl(var(--muted-foreground))' />
             </button>
         </div>
     )
 }
 
 function onClickMessage(event: React.MouseEvent<any>, chatMessage: SingleChatMessage, setReferencePanelData: Function, setShowReferencePanel: Function) {
-    event.preventDefault();
+    console.log("Clicked on message", chatMessage);
     setReferencePanelData(chatMessage);
     setShowReferencePanel(true);
 }
@@ -136,6 +126,8 @@ interface ChatMessageProps {
     chatMessage: SingleChatMessage;
     setReferencePanelData: Function;
     setShowReferencePanel: Function;
+    customClassName?: string;
+    borderLeftColor?: string;
 }
 
 export default function ChatMessage(props: ChatMessageProps) {
@@ -204,53 +196,65 @@ export default function ChatMessage(props: ChatMessageProps) {
 
     let referencesValid = hasValidReferences(props.chatMessage);
 
+    function constructClasses(chatMessage: SingleChatMessage) {
+        let classes = [styles.chatMessageContainer];
+        classes.push(styles[chatMessage.by]);
+
+        if (props.customClassName) {
+            classes.push(styles[`${chatMessage.by}${props.customClassName}`])
+        }
+
+        return classes.join(' ');
+    }
+
+    function chatMessageWrapperClasses(chatMessage: SingleChatMessage) {
+        let classes = [styles.chatMessageWrapper];
+        classes.push(styles[chatMessage.by]);
+
+        if (chatMessage.by === "khoj") {
+            classes.push(`border-l-4 border-opacity-50 border-l-orange-500 border-l-${props.borderLeftColor}`);
+        }
+
+        return classes.join(' ');
+    }
+
     return (
         <div
-            className={`${styles.chatMessageContainer} ${styles[props.chatMessage.by]}`}
+            className={constructClasses(props.chatMessage)}
             onClick={props.chatMessage.by === "khoj" ? (event) => onClickMessage(event, props.chatMessage, props.setReferencePanelData, props.setShowReferencePanel) : undefined}>
                 {/* <div className={styles.chatFooter}> */}
                     {/* {props.chatMessage.by} */}
                 {/* </div> */}
-                <div ref={messageRef} className={styles.chatMessage} dangerouslySetInnerHTML={{ __html: markdownRendered }} />
-                {/* Add a copy button, thumbs up, and thumbs down buttons */}
-                <div className={styles.chatFooter}>
-                    <div className={styles.chatTimestamp}>
-                        {renderTimeStamp(props.chatMessage.created)}
-                    </div>
-                    <div className={styles.chatButtons}>
-                        {
-                            referencesValid &&
-                            <div className={styles.referenceButton}>
-                                <button onClick={(event) => onClickMessage(event, props.chatMessage, props.setReferencePanelData, props.setShowReferencePanel)}>
-                                    References
-                                </button>
-                            </div>
-                        }
-                        <button className={`${styles.copyButton}`} onClick={() => {
-                                navigator.clipboard.writeText(props.chatMessage.message);
-                                setCopySuccess(true);
-                        }}>
+                <div className={chatMessageWrapperClasses(props.chatMessage)}>
+                    <div ref={messageRef} className={styles.chatMessage} dangerouslySetInnerHTML={{ __html: markdownRendered }} />
+                    {/* Add a copy button, thumbs up, and thumbs down buttons */}
+                    <div className={styles.chatFooter}>
+                        <div className={styles.chatTimestamp}>
+                            {renderTimeStamp(props.chatMessage.created)}
+                        </div>
+                        <div className={styles.chatButtons}>
                             {
-                                copySuccess ?
-                                    <Image
-                                        src="/copy-button-success.svg"
-                                        alt="Checkmark"
-                                        width={24}
-                                        height={24}
-                                        priority
-                                    />
-                                    : <Image
-                                        src="/copy-button.svg"
-                                        alt="Copy"
-                                        width={24}
-                                        height={24}
-                                        priority
-                                    />
+                                referencesValid &&
+                                <div className={styles.referenceButton}>
+                                    <button onClick={(event) => onClickMessage(event, props.chatMessage, props.setReferencePanelData, props.setShowReferencePanel)}>
+                                        References
+                                    </button>
+                                </div>
                             }
-                        </button>
-                        {
-                            props.chatMessage.by === "khoj" && <FeedbackButtons />
-                        }
+                            <button className={`${styles.copyButton}`} onClick={() => {
+                                    navigator.clipboard.writeText(props.chatMessage.message);
+                                    setCopySuccess(true);
+                            }}>
+                                {
+                                    copySuccess ?
+                                        <Copy color='green' />
+                                        : <Copy color='hsl(var(--muted-foreground))' />
+                                }
+                            </button>
+                            {
+                                props.chatMessage.by === "khoj" && <FeedbackButtons />
+                            }
+                        </div>
                     </div>
                 </div>
         </div>