yuugure-aikouka · abcqwq · Feb 1, 2025 · Jan 27, 2025 · Jan 27, 2025 · Jan 27, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,9 @@
   },
   "dependencies": {
     "@google/generative-ai": "^0.21.0",
+    "@types/js-cookie": "^3.0.6",
     "axios": "^1.7.9",
+    "js-cookie": "^3.0.5",
     "next": "15.1.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

diff --git a/public/images/Memoji-01.png b/public/images/Memoji-01.png
diff --git a/public/images/Memoji-02.png b/public/images/Memoji-02.png
diff --git a/public/images/Memoji-03.png b/public/images/Memoji-03.png
diff --git a/public/images/Memoji-04.png b/public/images/Memoji-04.png
diff --git a/public/images/Memoji-05.png b/public/images/Memoji-05.png
diff --git a/public/images/Memoji-06.png b/public/images/Memoji-06.png
diff --git a/public/images/Memoji-07.png b/public/images/Memoji-07.png
diff --git a/public/images/Memoji-08.png b/public/images/Memoji-08.png
diff --git a/public/images/Memoji-09.png b/public/images/Memoji-09.png
diff --git a/public/images/Memoji-10.png b/public/images/Memoji-10.png
diff --git a/public/images/Memoji-11.png b/public/images/Memoji-11.png
diff --git a/public/images/Memoji-12.png b/public/images/Memoji-12.png
diff --git a/public/images/Memoji-13.png b/public/images/Memoji-13.png
diff --git a/public/images/Memoji-14.png b/public/images/Memoji-14.png
diff --git a/public/images/Memoji-15.png b/public/images/Memoji-15.png
diff --git a/public/images/Memoji-16.png b/public/images/Memoji-16.png
diff --git a/public/images/Memoji-17.png b/public/images/Memoji-17.png
diff --git a/public/images/Memoji-18.png b/public/images/Memoji-18.png
diff --git a/public/images/Memoji-19.png b/public/images/Memoji-19.png
diff --git a/public/images/Memoji-20.png b/public/images/Memoji-20.png
diff --git a/public/images/Memoji-21.png b/public/images/Memoji-21.png
diff --git a/public/images/Memoji-22.png b/public/images/Memoji-22.png
diff --git a/public/images/Memoji-23.png b/public/images/Memoji-23.png
diff --git a/public/images/Memoji-24.png b/public/images/Memoji-24.png
diff --git a/public/images/Memoji-25.png b/public/images/Memoji-25.png
diff --git a/public/images/Memoji-26.png b/public/images/Memoji-26.png
diff --git a/src/app/api/chat/ai/route.ts b/src/app/api/chat/ai/route.ts
@@ -8,6 +8,7 @@ export const POST = async (request: Request): Promise<Response> => {
     return chatService.getAiResponse({
       message: requestBody?.message,
       history: requestBody?.history,
+      characterName: requestBody?.character_name,
     });
   });
 };
diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx
@@ -1,13 +1,48 @@
 import ChatLayout from '@/components/ChatLayout/ChatLayout';
 import PartnerList from '@/components/PartnerList';
 import ChatBox from '@/components/ChatBox';
+import CurrentPartnerProvider from '@/contexts/CurrentPartnerProvider';
+import ChatEnablementProvider from '@/contexts/ChatEnablementProvider';
+
+import { getPartnerList } from '@/mocks/partner';
+import { PartnerPreviewType } from '@/components/PartnerPreviewChat';
+
+const formatPartnerPreview = ({
+  display_name,
+  avatar_url,
+  is_ai,
+  last_chat,
+  username,
+}: {
+  display_name: string;
+  avatar_url: string;
+  is_ai: boolean;
+  last_chat: string;
+  username: string;
+}): PartnerPreviewType => {
+  return {
+    displayName: display_name,
+    avatarSrc: avatar_url,
+    isAi: is_ai,
+    lastChat: last_chat,
+    username,
+  };
+};
 
 const Page = () => {
+  const partnerList = getPartnerList().map((entry) =>
+    formatPartnerPreview(entry)
+  );
+
   return (
-    <ChatLayout>
-      <PartnerList />
-      <ChatBox />
-    </ChatLayout>
+    <CurrentPartnerProvider>
+      <ChatEnablementProvider>
+        <ChatLayout>
+          <PartnerList partners={partnerList} />
+          <ChatBox />
+        </ChatLayout>
+      </ChatEnablementProvider>
+    </CurrentPartnerProvider>
   );
 };
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,9 +3,9 @@ import '@/app/globals.css';
 import StyledComponentsRegistry from '@/styled-component-registry/registry';
 import GlobalStyles from '@/styled-component-registry/global-styles';
 
-// todo: create a dark-mode functionality
-import { LIGHT_COLORS } from '@/const/COLORS';
+import ThemeProvider from '@/contexts/ThemeProvider';
 
+import { getThemePreference } from '@/utils/theme';
 import { Funnel_Display } from 'next/font/google';
 import type { Metadata } from 'next';
 
@@ -18,17 +18,21 @@ export const metadata: Metadata = {
   title: 'mateify',
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const [theme, themeColors] = await getThemePreference();
+
   return (
-    <html lang="en" style={LIGHT_COLORS as React.CSSProperties}>
+    <html lang="en" style={themeColors as React.CSSProperties}>
       <body className={defaultFont.className}>
         <StyledComponentsRegistry>
-          {children}
-          <GlobalStyles />
+          <ThemeProvider initialTheme={theme}>
+            {children}
+            <GlobalStyles />
+          </ThemeProvider>
         </StyledComponentsRegistry>
       </body>
     </html>

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -1,10 +1,14 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
+import Label from '@/components/Label';
+
+import { Container } from '@/components/Avatar/styled-components';
 
 type AvatarProps = {
   src: string;
   size?: 'large' | 'medium' | 'small';
+  isAi?: boolean;
 };
 
 const AVATAR_SIZES = {
@@ -14,20 +18,25 @@ const AVATAR_SIZES = {
 };
 
 const Img = styled.img`
-  height: var(--size);
-  aspect-ratio: 1;
+  display: block;
+  position: relative;
 `;
 
-const Avatar = ({ src, size = 'medium' }: AvatarProps) => {
+const Avatar = ({
+  src,
+  size = 'medium',
+  isAi = false,
+}: AvatarProps) => {
   return (
-    <Img
-      src={src}
+    <Container
       style={
         {
           '--size': AVATAR_SIZES[size],
         } as React.CSSProperties
-      }
-    />
+      }>
+      {isAi && <Label>AI</Label>}
+      <Img src={src} />
+    </Container>
   );
 };
 

diff --git a/src/components/Avatar/styled-components.ts b/src/components/Avatar/styled-components.ts
@@ -0,0 +1,10 @@
+'use client';
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  height: var(--size);
+  width: var(--size);
+
+  isolation: isolate;
+  position: relative;
+`;
diff --git a/src/components/ChatBox/ChatBox.tsx b/src/components/ChatBox/ChatBox.tsx
@@ -5,131 +5,95 @@ import styled from 'styled-components';
 import Header from '@/components/ChatBox/Header';
 import ChatHistory from '@/components/ChatBox/ChatHistory';
 import Input from '@/components/ChatBox/Input';
-import PATHS from '@/const/PATHS';
+import useChatData from '@/hooks/useChatData';
 
-import { post } from '@/network';
-import { Chat } from '@/components/ChatBox/ChatHistory';
-import { getChat } from '@/mocks/chat';
+import { CurrentPartnerContext } from '@/contexts/CurrentPartnerProvider';
+import { ChatEnablementContext } from '@/contexts/ChatEnablementProvider';
+import { Section as ChatHistorySection } from '@/components/ChatBox/styled-components';
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
 
-  & > *:nth-child(2) {
+  & > ${ChatHistorySection} {
     flex: 1;
   }
+
+  position: relative;
+  isolation: isolate;
 `;
 
-const formatHistory = ({
-  chat_id,
-  is_my_chat,
-  content,
-  timestamp,
-}: {
-  chat_id: string;
-  content: string;
-  is_my_chat: boolean;
-  timestamp: number;
-}): Chat => {
-  return {
-    chatId: chat_id,
-    content,
-    timestamp,
-    isMyChat: is_my_chat,
-  };
-};
+const Backdrop = styled.div`
+  position: absolute;
+  inset: 0;
 
-const fetchChatData = (): {
-  avatarUrl: string;
-  name: string;
-  isAi: boolean;
-  history: Chat[];
-} => {
-  const { avatar_url, display_name, is_ai, history } = getChat();
-
-  return {
-    avatarUrl: avatar_url,
-    name: display_name,
-    isAi: is_ai,
-    history: history.map((entry) => formatHistory(entry)),
-  };
-};
+  z-index: 1;
 
-const chatToDialog = (chatHistory: Chat[]): string[] => {
-  return chatHistory.map(({ isMyChat, content }) => {
-    return JSON.stringify({
-      them: isMyChat ? content : undefined,
-      you: !isMyChat ? content : undefined,
-    });
-  });
-};
+  backdrop-filter: blur(2px);
+`;
 
-const ChatBox = () => {
-  const { avatarUrl, name, isAi, history } = fetchChatData();
-  const [chatHistory, setChatHistory] =
-    React.useState<Chat[]>(history);
-  const [isPartnerTyping, setIsPartnerTyping] = React.useState(false);
-
-  const addNewChat = (
-    content: string,
-    isMyChat: boolean = true
-  ): void => {
-    setChatHistory((previousChatHistory) => {
-      const newChatHistory = [...previousChatHistory];
-      newChatHistory.push({
-        chatId: crypto.randomUUID(),
-        content,
-        timestamp: Date.now(),
-        isMyChat,
-      });
-
-      return newChatHistory;
-    });
-  };
-
-  const getPartnerResponse = (content: string): void => {
-    setIsPartnerTyping(true);
-
-    const data = {
-      message: content,
-      history: chatToDialog(
-        chatHistory.slice(
-          Math.max(0, chatHistory.length - 25),
-          chatHistory.length
-        )
-      ),
-    };
-    post({
-      path: PATHS.chat_gemini,
-      data,
-      callback: (response) => {
-        addNewChat(response.data?.data, false);
-        setIsPartnerTyping(false);
-      },
-    });
-  };
+const ActiveChatBox = ({ username }: { username: string }) => {
+  const { data, actions } = useChatData(username);
+  const { isChatActive } = React.useContext(ChatEnablementContext);
 
   return (
     <Container>
-      <Header avatarUrl={avatarUrl} name={name} isAi={isAi} />
+      {!isChatActive && <Backdrop />}
+      <Header
+        avatarUrl={data.avatarUrl}
+        name={data.name}
+        isAi={data.isAi}
+      />
 
       <ChatHistory
-        isPartnerTyping={isPartnerTyping}
-        chats={chatHistory}
+        isPartnerTyping={data.isPartnerTyping}
+        chats={data.history}
       />
 
       <Input
         onSubmit={(chat: string) => {
-          addNewChat(chat);
+          actions.addNewChat(chat);
 
           // todo: in the future, below AI (incoming chat) listener should be placed in a backend server
-          if (!isAi) return;
+          if (!data.isAi) return;
 
-          getPartnerResponse(chat);
+          actions.getPartnerResponse(chat);
         }}
       />
     </Container>
   );
 };
 
+const DesktopInactiveChatBox = styled.div`
+  overflow: hidden;
+
+  display: grid;
+  place-content: center;
+  width: 100%;
+
+  position: relative;
+  isolation: isolate;
+`;
+
+const InactiveChatBox = () => {
+  const { isChatActive } = React.useContext(ChatEnablementContext);
+
+  return (
+    <DesktopInactiveChatBox>
+      {!isChatActive && <Backdrop />}
+      start a chat with someone!
+    </DesktopInactiveChatBox>
+  );
+};
+
+const ChatBox = () => {
+  const { username } = React.useContext(CurrentPartnerContext);
+
+  if (!username) {
+    return <InactiveChatBox />;
+  }
+
+  return <ActiveChatBox key={username} username={username} />;
+};
+
 export default ChatBox;