Merge branch 'release/v0.8.1'

.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_AICH_URL=http://localhost:5568

next-i18next.config.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+const i18nConfig = {
+  i18n: {
+    defaultLocale: 'tw',
+    locales: ['tw', 'en', 'cn'],
+    localeDetection: false,
+  },
+  localePath: path.resolve('./src/locales'),
+};
+
+module.exports = i18nConfig;

next.config.js

@@ -1,6 +1,31 @@
+const { i18n } = require('./next-i18next.config');
+
+function getEnvVariables(keys) {
+  const missingKeys = [];
+
+  keys.forEach((key) => {
+    const value = process.env[key];
+    if (!value) {
+      missingKeys.push(key);
+    }
+  });
+
+  if (missingKeys.length > 0) {
+    throw new Error(`Missing environment variables: ${missingKeys.join(', ')}`);
+  }
+}
+
+const requiredEnvVars = ['NEXT_PUBLIC_AICH_URL'];
+
+if (process.env.VERCEL !== '1') {
+  getEnvVariables(requiredEnvVars);
+}
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  // Your Next.js config options
   reactStrictMode: true,
+  i18n,
 };
 
 module.exports = nextConfig;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "FAITH",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "private": false,
   "scripts": {
     "dev": "next dev",
@@ -20,10 +20,15 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cookie": "^0.6.0",
+    "dotenv": "^16.4.5",
+    "i18next": "^23.14.0",
     "lottie-react": "^2.4.0",
+    "marked": "^14.1.1",
     "next": "14.2.4",
+    "next-i18next": "^15.3.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-i18next": "^15.0.1",
     "react-toastify": "^10.0.5",
     "react-usestateref": "^1.0.9",
     "tailwind-merge": "^2.3.0",
@@ -34,7 +39,7 @@
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20",
+    "@types/node": "^20.16.1",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/uuid": "^10.0.0",

src/components/button/button.tsx

@@ -9,17 +9,19 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          'bg-primaryYellow text-primary-foreground hover:bg-primaryYellow/70 disabled:bg-lightGray disabled:cursor-default',
+          'bg-button-surface-strong-primary text-button-text-primary-solid hover:bg-button-surface-strong-primary-hover disabled:bg-button-surface-strong-disable disabled:cursor-default disabled:text-button-text-disable',
         tertiary:
-          'bg-button-surface-strong-secondary text-button-text-invert hover:bg-button-surface-strong-secondary-hover disabled:bg-button-surface-strong-disable',
+          'bg-button-surface-strong-secondary text-button-text-invert hover:bg-button-surface-strong-secondary-hover disabled:bg-button-surface-strong-disable disabled:cursor-default disabled:text-button-text-disable',
         tertiaryOutline:
-          'border border-button-surface-strong-secondary text-button-surface-strong-secondary hover:border-button-text-primary hover:text-button-text-primary group-hover:border-button-text-primary group-hover:text-button-text-primary',
+          'border border-button-surface-strong-secondary text-button-surface-strong-secondary hover:border-button-stroke-primary-hover hover:text-button-text-primary-hover group-hover:border-button-stroke-primary-hover group-hover:text-button-text-primary-hover disabled:text-button-text-disable disabled:border-button-stroke-disable',
         secondaryOutline:
-          'border border-button-text-secondary text-button-text-secondary hover:border-button-text-primary hover:text-button-text-primary group-hover:border-button-text-primary group-hover:text-button-text-primary',
+          'border border-button-text-secondary text-button-text-secondary hover:border-button-text-primary hover:text-button-text-primary-hover group-hover:border-button-text-primary group-hover:text-button-text-primary-hover disabled:text-button-text-disable disabled:border-button-stroke-disable',
         tertiaryBorderless:
-          'border-none border-button-surface-strong-secondary text-button-surface-strong-secondary hover:border-button-text-primary hover:text-button-text-primary group-hover:border-button-text-primary group-hover:text-button-text-primary',
+          'border-none border-button-surface-strong-secondary text-button-surface-strong-secondary hover:border-button-text-primary hover:text-button-text-primary-hover group-hover:border-button-text-primary group-hover:text-button-text-primary-hover disabled:text-button-text-disable',
         secondaryBorderless:
-          'border-none border-button-text-secondary text-button-text-secondary hover:border-button-text-primary hover:text-button-text-primary group-hover:border-button-text-primary group-hover:text-button-text-primary',
+          'border-none border-button-text-secondary text-button-text-secondary hover:border-button-text-primary hover:text-button-text-primary-hover group-hover:border-button-text-primary group-hover:text-button-text-primary-hover disabled:text-button-text-disable',
+        disabledGray: 'border border-button-stroke-disable text-button-text-disable',
+        disabledYellow: 'border border-button-stroke-primary text-button-text-primary',
       },
       size: {
         default: 'px-6 py-3',

src/components/chat_list/chat_list.tsx

@@ -6,12 +6,15 @@ import { cn, timestampToString } from '@/lib/utils/common';
 import { IChat } from '@/interfaces/chat';
 import { useChatCtx } from '@/contexts/chat_context';
 import { useGlobalCtx } from '@/contexts/global_context';
+import { useTranslation } from 'next-i18next';
+import { ITranslateFunction } from '@/interfaces/locale';
 
 interface IChatItemProps {
   chat: IChat;
 }
 
 const ChatItem = ({ chat }: IChatItemProps) => {
+  const { t }: { t: ITranslateFunction } = useTranslation('common');
   const { renameChat, deleteChat } = useChatCtx();
   const { moveChatModalVisibilityHandler, updateLinkModalVisibilityHandler } = useGlobalCtx();
   const { id, name, createdAt, messages } = chat;
@@ -97,7 +100,7 @@ const ChatItem = ({ chat }: IChatItemProps) => {
       onKeyDown={handleKeyDown}
       onCompositionStart={handleCompositionStart}
       onCompositionEnd={handleCompositionEnd}
-      className="rounded border bg-white px-2 py-1 text-sm font-normal"
+      className="rounded border bg-input-surface-input-background px-2 py-1 text-sm font-normal"
       onClick={(e) => e.stopPropagation()}
     />
   ) : (
@@ -136,39 +139,39 @@ const ChatItem = ({ chat }: IChatItemProps) => {
             className="w-full py-8px"
             onClick={renamingHandler}
           >
-            Rename
+            {t('COMMON.RENAME')}
           </Button>
           <Button
             type="button"
             variant="tertiaryBorderless"
             className="w-full py-8px"
             onClick={shareChatHandler}
           >
-            Share
+            {t('COMMON.SHARE')}
           </Button>
           <Button
             type="button"
             variant="tertiaryBorderless"
             className="w-full py-8px"
             onClick={moveChatHandler}
           >
-            Move
+            {t('COMMON.MOVE')}
           </Button>
           <Button
             type="button"
             variant="tertiaryBorderless"
             className="w-full py-8px"
             onClick={setPrivateChatHandler}
           >
-            Set to Private
+            {t('COMMON.SET_TO_PRIVATE')}
           </Button>
           <Button
             type="button"
             variant="tertiaryBorderless"
             className="w-full py-8px"
             onClick={removeChatHandler}
           >
-            Remove Chat
+            {t('SIDE_BAR.REMOVE_CHAT')}
           </Button>
         </div>
       </div>
@@ -181,15 +184,20 @@ interface IChatListProps {
 }
 
 const ChatList = ({ chats }: IChatListProps) => {
+  const { t }: { t: ITranslateFunction } = useTranslation('common');
   return (
     <div className="table w-full border-separate border-spacing-y-8px rounded-xs font-semibold text-text-neutral-secondary">
       {/* Info: (20240708 - Julian) Header */}
       <div className="table-header-group bg-surface-brand-primary-soft shadow-3 drop-shadow-md">
         <div className="table-row">
-          <div className="table-cell rounded-l-xs py-5px pl-20px text-left">Chat Name</div>
-          <div className="table-cell text-center">Latest Questions</div>
-          <div className="table-cell text-center">Date</div>
-          <div className="table-cell rounded-r-xs py-5px pr-20px text-right">Action</div>
+          <div className="table-cell rounded-l-xs py-5px pl-20px text-left">
+            {t('FOLDER.CHAT_NAME')}
+          </div>
+          <div className="table-cell text-center">{t('FOLDER.LATEST_QUESTIONS')}</div>
+          <div className="table-cell text-center">{t('FOLDER.DATE')}</div>
+          <div className="table-cell rounded-r-xs py-5px pr-20px text-right">
+            {t('FOLDER.ACTION')}
+          </div>
         </div>
       </div>
       {/* Info: (20240708 - Julian) Body */}