Style/chat (#278)

* 🎨style improve chat component * ♻️ refactor code * fix delete prop
QuivrHQ · Jun 7, 2023 · ff02e88 · ff02e88 · vercel · Jun 7, 2023
1 parent b441daf
commit ff02e88
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 56 deletions.
diff --git a/frontend/app/chat/components/ChatMessage.tsx b/frontend/app/chat/components/ChatMessage.tsx
@@ -1,18 +1,16 @@
-import { cn } from "@/lib/utils";
-import { motion } from "framer-motion";
-import { forwardRef, Ref } from "react";
-import ReactMarkdown from "react-markdown";
+import { cn } from "@/lib/utils"
+import { motion } from "framer-motion"
+import { forwardRef, Ref } from "react"
+import ReactMarkdown from "react-markdown"
 
 const ChatMessage = forwardRef(
   (
     {
       speaker,
       text,
-      left = false,
     }: {
-      speaker: string;
-      text: string;
-      left?: boolean;
+      speaker: string
+      text: string
     },
     ref
   ) => {
@@ -27,25 +25,29 @@ const ChatMessage = forwardRef(
         }}
         exit={{ y: -24, opacity: 0 }}
         className={cn(
-          "py-3 px-3 rounded-lg border border-black/10 dark:border-white/25 flex flex-col max-w-4xl overflow-hidden scroll-pt-32",
-          left ? "self-start mr-20" : "self-end ml-20"
+          "py-3 px-3 md:px-6 w-full dark:border-white/25 flex flex-col max-w-4xl overflow-hidden scroll-pt-32",
+          speaker === "user" ? "" : "bg-gray-200 dark:bg-gray-800 bg-opacity-60 py-8",
         )}
         style={speaker === "user" ? { whiteSpace: "pre-line" } : {}} // Add this line to preserve line breaks
       >
-        <span className={cn("capitalize text-xs")}>{speaker}</span>
+        <span
+          className={cn(
+            "capitalize  text-xs bg-sky-200 rounded-xl p-1 px-2 mb-2 w-fit  dark:bg-sky-700"
+          )}>
+          {speaker}
+        </span>
         <>
           <ReactMarkdown
             // remarkRehypeOptions={{}}
-            className="prose dark:prose-invert"
-          >
+            className="prose dark:prose-invert ml-[6px]  mt-1">
             {text}
           </ReactMarkdown>
         </>
       </motion.div>
-    );
+    )
   }
-);
+)
 
-ChatMessage.displayName = "ChatMessage";
+ChatMessage.displayName = "ChatMessage"
 
-export default ChatMessage;
+export default ChatMessage
diff --git a/frontend/app/chat/components/ChatMessages.tsx b/frontend/app/chat/components/ChatMessages.tsx
@@ -15,7 +15,7 @@ const ChatMessages: FC<ChatMessagesProps> = ({ history }) => {
   }, [history]);
 
   return (
-    <div className="overflow-hidden flex flex-col gap-5 scrollbar scroll-smooth flex-1">
+    <div className="space-y-8 grid grid-cols-1 overflow-hidden scrollbar scroll-smooth">
       {history.length === 0 ? (
         <div className="text-center opacity-50">
           Ask a question, or describe a task.
@@ -29,7 +29,6 @@ const ChatMessages: FC<ChatMessagesProps> = ({ history }) => {
                 key={idx}
                 speaker={speaker}
                 text={text}
-                left={idx % 2 !== 0}
               />
             );
           })}
@@ -38,4 +37,4 @@ const ChatMessages: FC<ChatMessagesProps> = ({ history }) => {
     </div>
   );
 };
-export default ChatMessages;
+export default ChatMessages;
diff --git a/frontend/app/chat/page.tsx b/frontend/app/chat/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 import Link from "next/link";
-import { MdAutorenew, MdMic, MdMicOff, MdSettings } from "react-icons/md";
+import { MdAutorenew, MdMic, MdMicOff, MdSend, MdSettings } from "react-icons/md";
 import Button from "../components/ui/Button";
 import Card from "../components/ui/Card";
 import PageHeading from "../components/ui/PageHeading";
@@ -21,18 +21,19 @@ export default function ChatPage() {
           subtitle="Talk to a language model about your uploaded data"
         />
         {/* Chat */}
-        <Card className="p-5 max-w-3xl w-full flex-1 mb-24 overflow-auto flex flex-col">
+        <Card className="py-4 max-w-3xl w-full  flex-1 md:mb-24 overflow-auto flex flex-col hover:shadow-none shadow-none ">
           <ChatMessages history={history} />
         </Card>
-        <Card className="fixed left-1/2 w-full max-w-3xl bg-gray-100 dark:bg-gray-800 -translate-x-1/2 bottom-16 px-5 py-5 mb-5">
+        <Card className="md:fixed md:rounded md:left-1/2 w-full max-w-3xl bg-gray-100  dark:bg-gray-800 md:-translate-x-1/2 md:bottom-16 px-5 py-5 md:mb-5 hover:shadow-none shadow-none">
           <form
             onSubmit={(e) => {
               e.preventDefault();
               if (!isPending) askQuestion();
             }}
-            className="w-full flex items-center justify-center gap-2"
+            className="w-full flex flex-col md:flex-row items-center justify-center gap-2 "
           >
-            <textarea
+            <div className="flex gap-1 w-full">
+              <input
               autoFocus
               value={question}
               onChange={(e) => setQuestion(e.target.value)}
@@ -42,44 +43,48 @@ export default function ChatPage() {
                   if (!isPending) askQuestion(); // Call the submit function here
                 }
               }}
-              className="w-full p-2 border border-gray-300 dark:border-gray-500 outline-none rounded dark:bg-gray-800"
+              className="w-full  p-2 border border-gray-300 dark:border-gray-500 outline-none rounded dark:bg-gray-800"
               placeholder="Begin conversation here..."
             />
             <Button type="submit" isLoading={isPending}>
-              {isPending ? "Thinking..." : "Chat"}
+                {isPending ? "" : <MdSend />}
             </Button>
-            {/* Reset Button */}
-            <Button
-              className="px-3"
-              variant={"tertiary"}
-              type="button"
-              onClick={resetHistory}
-              disabled={isPending}
-            >
-              <MdAutorenew className="text-2xl" />
-            </Button>
-            {/* Mic Button */}
-            <Button
-              className="px-3"
-              variant={"tertiary"}
-              type="button"
-              onClick={startListening}
-              disabled={!speechSupported}
-            >
-              {isListening ? (
-                <MdMicOff className="text-2xl" />
-              ) : (
-                <MdMic className="text-2xl" />
-              )}
-            </Button>
-            <Link href={"/config"}>
-              <Button className="px-3" variant={"tertiary"}>
-                <MdSettings className="text-2xl" />
+            </div>
+
+            <div className="flex">
+             {/* Reset Button */}
+              <Button
+                className="px-3"
+                variant={"tertiary"}
+                type="button"
+                onClick={resetHistory}
+                disabled={isPending}
+              >
+                <MdAutorenew className="text-2xl" />
+              </Button>
+              {/* Mic Button */}
+              <Button
+                className="px-3"
+                variant={"tertiary"}
+                type="button"
+                onClick={startListening}
+                disabled={!speechSupported}
+              >
+                {isListening ? (
+                  <MdMicOff className="text-2xl" />
+                ) : (
+                  <MdMic className="text-2xl" />
+                )}
               </Button>
-            </Link>
+              <Link href={"/config"}>
+                <Button className="px-3" variant={"tertiary"}>
+                  <MdSettings className="text-2xl" />
+                </Button>
+              </Link>
+            </div>
           </form>
         </Card>
       </section>
     </main>
   );
-}
+}