Skip to content

Commit

Permalink
UI Modifications based on Vincent's message
Browse files Browse the repository at this point in the history
  • Loading branch information
Noé Grangier committed Dec 13, 2024
1 parent a45f484 commit a69cb95
Show file tree
Hide file tree
Showing 10 changed files with 585 additions and 595 deletions.
2 changes: 1 addition & 1 deletion cooppilot/apps/cooppilot-front/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
314 changes: 157 additions & 157 deletions cooppilot/apps/cooppilot-front/src/assets/i18n/en.json

Large diffs are not rendered by default.

402 changes: 201 additions & 201 deletions cooppilot/apps/cooppilot-front/src/assets/i18n/fr.json

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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">
Expand All @@ -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
Original file line number Diff line number Diff line change
@@ -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}
Expand All @@ -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
32 changes: 16 additions & 16 deletions cooppilot/apps/cooppilot-front/src/components/organisms/Sidebar.tsx
Original file line number Diff line number Diff line change
@@ -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) => (
Expand All @@ -35,7 +35,7 @@ const Sidebar = () => {
<AccountCard />
</div>
</div>
);
};
)
}

export default Sidebar;
export default Sidebar
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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 />
Expand Down Expand Up @@ -51,7 +54,7 @@ const TopBar = () => {
</DrawerContent>
</Drawer> */}
</div>
);
};
)
}

export default TopBar;
export default TopBar
Loading

0 comments on commit a69cb95

Please sign in to comment.