UI Modifications based on Vincent's message

lonestone · Dec 13, 2024 · 91c8ae6 · 91c8ae6
1 parent a45f484
commit 91c8ae6
Show file tree

Hide file tree

Showing 10 changed files with 585 additions and 595 deletions.
diff --git a/cooppilot/apps/cooppilot-front/index.html b/cooppilot/apps/cooppilot-front/index.html
@@ -6,7 +6,7 @@
     <link href="/hand.png" rel="apple-touch-icon">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-    <title>CoopIA</title>
+    <title>Chat Coop</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/cooppilot/apps/cooppilot-front/src/assets/i18n/en.json b/cooppilot/apps/cooppilot-front/src/assets/i18n/en.json
diff --git a/cooppilot/apps/cooppilot-front/src/assets/i18n/fr.json b/cooppilot/apps/cooppilot-front/src/assets/i18n/fr.json
diff --git a/cooppilot/apps/cooppilot-front/src/components/molecules/ChatAnswer.tsx b/cooppilot/apps/cooppilot-front/src/components/molecules/ChatAnswer.tsx
@@ -1,21 +1,21 @@
-import logo from "@/assets/logo.png";
-import ChatEntryFeedback from "@/components/molecules/ChatEntryFeedback";
-import ChatReasoningLoader from "@/components/molecules/ChatReasoningLoader";
-import ChatAnswerDetails from "@/components/organisms/ChatAnswerDetails";
-import { useChatEntryPolling } from "@/hooks/useChatEntry";
-import { ChatEntry } from "@common/types/back/chat";
-import { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import Markdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+import logo from '@/assets/logo.png'
+import ChatEntryFeedback from '@/components/molecules/ChatEntryFeedback'
+import ChatReasoningLoader from '@/components/molecules/ChatReasoningLoader'
+import ChatAnswerDetails from '@/components/organisms/ChatAnswerDetails'
+import { useChatEntryPolling } from '@/hooks/useChatEntry'
+import { ChatEntry } from '@common/types/back/chat'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 
 type ChatAnswerProps = {
-  projectId: string;
-  chatEntryId: number;
-  onChatEntryUpdated: () => void;
-  onLoaded: () => void;
-  isActive: boolean;
-};
+  projectId: string
+  chatEntryId: number
+  onChatEntryUpdated: () => void
+  onLoaded: () => void
+  isActive: boolean
+}
 
 const ChatAnswer = ({
   projectId,
@@ -29,41 +29,41 @@ const ChatAnswer = ({
     cachedChatEntry: {} as ChatEntry,
     projectId,
     chatId: chatEntryId,
-  });
-  const { t } = useTranslation();
-  const [isLoaded, setIsLoaded] = useState(false);
+  })
+  const { t } = useTranslation()
+  const [isLoaded, setIsLoaded] = useState(false)
 
   useEffect(() => {
     if (chatEntry?.queryStatus !== undefined && !isLoaded) {
-      setIsLoaded(true);
-      onLoaded();
+      setIsLoaded(true)
+      onLoaded()
     }
-  }, [chatEntry, chatEntry?.queryStatus, isLoaded, onLoaded]);
+  }, [chatEntry, chatEntry?.queryStatus, isLoaded, onLoaded])
 
   useEffect(() => {
-    onChatEntryUpdated();
-  }, [chatEntry?.queryStatus, onChatEntryUpdated]);
+    onChatEntryUpdated()
+  }, [chatEntry?.queryStatus, onChatEntryUpdated])
 
   const Comp = useMemo(() => {
-    if (chatEntry?.queryStatus === "DONE") {
+    if (chatEntry?.queryStatus === 'DONE') {
       return (
         <Markdown remarkPlugins={[remarkGfm]}>
           {chatEntry.response.answer}
         </Markdown>
-      );
-    } else if (chatEntry?.queryStatus === "ERROR") {
-      return <div className="text-red-400">{t("Chat.answerError")}</div>;
+      )
+    } else if (chatEntry?.queryStatus === 'ERROR') {
+      return <div className="text-red-400">{t('Chat.answerError')}</div>
     } else if (
-      chatEntry?.queryStatus === "PENDING" ||
-      chatEntry?.queryStatus === "RUNNING" ||
-      chatEntry?.queryStatus === "CREATING"
+      chatEntry?.queryStatus === 'PENDING' ||
+      chatEntry?.queryStatus === 'RUNNING' ||
+      chatEntry?.queryStatus === 'CREATING'
     ) {
-      return <ChatReasoningLoader entry={chatEntry} />;
+      return <ChatReasoningLoader entry={chatEntry} />
     } else {
       // return <ChatEntrySkeleton isLeft={false} displayUser={false} />;
-      return null;
+      return null
     }
-  }, [chatEntry, t]);
+  }, [chatEntry, t])
 
   return (
     <div className="flex flex-col items-start" id="list-view-item">
@@ -74,23 +74,23 @@ const ChatAnswer = ({
         </div>
         <div
           className="w-full md:max-w-[calc(100%-120px)] py-2 px-4 markdown-content overflow-hidden"
-          style={{ wordBreak: "break-word" }}
+          style={{ wordBreak: 'break-word' }}
         >
           {Comp}
         </div>
       </div>
-      {chatEntry?.queryStatus === "DONE" && isActive && (
+      {/* {chatEntry?.queryStatus === "DONE" && isActive && (
         <ChatAnswerDetails chatEntry={chatEntry} />
-      )}
-      {chatEntry?.queryStatus === "DONE" && isActive && (
+      )} */}
+      {chatEntry?.queryStatus === 'DONE' && isActive && (
         <ChatEntryFeedback
           projectSlug={projectId}
           chatEntryId={chatEntryId}
           userFeedback={chatEntry?.answerUserFeedbacks?.[0]}
         />
       )}
     </div>
-  );
-};
+  )
+}
 
-export default ChatAnswer;
+export default ChatAnswer
diff --git a/cooppilot/apps/cooppilot-front/src/components/organisms/ChatPromptInput.tsx b/cooppilot/apps/cooppilot-front/src/components/organisms/ChatPromptInput.tsx
@@ -1,49 +1,49 @@
-import ChatInput from "@/components/molecules/ChatInput";
-import { Button } from "@/components/ui/button";
-import { Send } from "lucide-react";
-import { ChangeEvent, useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
+import ChatInput from '@/components/molecules/ChatInput'
+import { Button } from '@/components/ui/button'
+import { Send } from 'lucide-react'
+import { ChangeEvent, useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
 type ChatPromptInputProps = {
-  sendMessage: (message: string) => Promise<void>;
-};
+  sendMessage: (message: string) => Promise<void>
+}
 
 const ChatPromptInput = ({ sendMessage }: ChatPromptInputProps) => {
-  const { t } = useTranslation("translation", {
-    keyPrefix: "ChatPromptInput",
-  });
-  const [message, setMessage] = useState("");
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'ChatPromptInput',
+  })
+  const [message, setMessage] = useState('')
 
   const onSubmit = async () => {
-    if (message.trim() === "" || message.length < 2) return;
+    if (message.trim() === '' || message.length < 2) return
 
-    await sendMessage(message);
-    setMessage("");
-  };
+    await sendMessage(message)
+    setMessage('')
+  }
 
   const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      onSubmit();
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      onSubmit()
     }
-  };
+  }
 
   const onTranscriptionReady = (q?: string) => {
-    if (!q) return;
-    setMessage(q);
-  };
+    if (!q) return
+    setMessage(q)
+  }
 
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
-      setMessage(e.target.value);
+      setMessage(e.target.value)
     },
     [setMessage]
-  );
+  )
 
   return (
     <div className="flex flex-row items-center w-full rounded-3xl outline outline-1 p-1 outline-[rgba(255,255,255,0.16)] bg-card">
       <ChatInput
-        placeholder={t("typeYourMessage")}
+        placeholder={t('typeYourMessage')}
         value={message}
         onChange={handleChange}
         onKeyDown={onKeyDown}
@@ -53,14 +53,14 @@ const ChatPromptInput = ({ sendMessage }: ChatPromptInputProps) => {
       <Button
         size="icon"
         className="rounded-full h-10 w-10 text-white p-2 ml-2"
-        disabled={message.trim() === ""}
+        disabled={message.trim() === ''}
         onClick={onSubmit}
       >
         {/* C'était pas aligné donc bon..... a méditer */}
         <Send className="translate-y-[1px] translate-x-[-1px]" />
       </Button>
     </div>
-  );
-};
+  )
+}
 
-export default ChatPromptInput;
+export default ChatPromptInput
diff --git a/cooppilot/apps/cooppilot-front/src/components/organisms/Sidebar.tsx b/cooppilot/apps/cooppilot-front/src/components/organisms/Sidebar.tsx
@@ -1,30 +1,30 @@
-import logo from "@/assets/logo.svg";
-import AccountCard from "@/components/molecules/AccountCard";
-import SidebarNavCategory from "@/components/molecules/SidebarNavCategory";
-import useNavBarCategories from "@/hooks/useNavBarCategories";
-import { Bot } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import logo from '@/assets/logo.svg'
+import AccountCard from '@/components/molecules/AccountCard'
+import SidebarNavCategory from '@/components/molecules/SidebarNavCategory'
+import useNavBarCategories from '@/hooks/useNavBarCategories'
+import { Bot } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
 
 const Sidebar = () => {
-  const { t } = useTranslation("translation", {
-    keyPrefix: "Sidebar",
-  });
-  const { unnamedCategories } = useNavBarCategories();
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'Sidebar',
+  })
+  const { unnamedCategories } = useNavBarCategories()
 
   return (
     <div className="flex flex-col w-80 h-full justify-between gap-8 items-start max-h-full overflow-y-auto overflow-x-hidden">
       <div className="rounded-2xl bg-card flex flex-col p-4 gap-8 w-full">
         <div className="flex flex-row w-full items-center justify-center pt-2">
           <img src={logo} alt="Logo" />
-          <span className="text-white text-2xl ml-3">CoopIA</span>
+          <span className="text-white text-2xl ml-3">Chat Coop</span>
         </div>
         <Link
           to="/chat"
           className="rounded-full justify-start flex flex-row items-center bg-gradient-to-r from-gradient-from to-gradient-to py-[0.7rem] text-gray-text text-sm"
         >
           <Bot className="size-5 ml-3 text-white" />
-          <span className="ml-2 text-white">{t("talkWith")}</span>
+          <span className="ml-2 text-white">{t('talkWith')}</span>
         </Link>
         <div className="h-[1px] bg-gray opacity-50" />
         {unnamedCategories.map((category, index) => (
@@ -35,7 +35,7 @@ const Sidebar = () => {
         <AccountCard />
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Sidebar;
+export default Sidebar
diff --git a/cooppilot/apps/cooppilot-front/src/components/organisms/TopBar.tsx b/cooppilot/apps/cooppilot-front/src/components/organisms/TopBar.tsx
@@ -1,5 +1,5 @@
-import logo from "@/assets/logo.png";
-import { Link } from "react-router-dom";
+import logo from '@/assets/logo.png'
+import { Link } from 'react-router-dom'
 
 const TopBar = () => {
   // const [drawerOpen, setDrawerOpen] = useState(false);
@@ -16,7 +16,10 @@ const TopBar = () => {
     <div className="px-4 py-2 flex flex-row justify-between items-center z-10">
       <div className="flex flex-row items-center justify-center">
         <Link to="/" reloadDocument={false} unstable_viewTransition={true}>
-          <img src={logo} alt="Logo" width={35} className="xl:w-[35px]" />
+          <div className="flex flex-row items-center justify-center">
+            <img src={logo} alt="Logo" width={35} className="xl:w-[35px]" />
+            <span className="text-black text-2xl">hat Coop</span>
+          </div>
         </Link>
       </div>
       <div />
@@ -51,7 +54,7 @@ const TopBar = () => {
         </DrawerContent>
       </Drawer> */}
     </div>
-  );
-};
+  )
+}
 
-export default TopBar;
+export default TopBar