Merge pull request #5088 from ChatGPTNextWeb/revert-5080-refactor-components

Revert "feat: improve components structure"

app/components/auth.tsx

@@ -1,14 +1,14 @@
 import styles from "./auth.module.scss";
-import { IconButton } from "@/app/components/button/button";
+import { IconButton } from "./button";
 
 import { useNavigate } from "react-router-dom";
-import { Path } from "@/app/constant";
-import { useAccessStore } from "@/app/store";
-import Locale from "@/app/locales";
+import { Path } from "../constant";
+import { useAccessStore } from "../store";
+import Locale from "../locales";
 
-import BotIcon from "@/app/icons/bot.svg";
+import BotIcon from "../icons/bot.svg";
 import { useEffect } from "react";
-import { getClientConfig } from "@/app/config/client";
+import { getClientConfig } from "../config/client";
 
 export function AuthPage() {
   const navigate = useNavigate();

app/components/auth/index.tsx

@@ -1 +0,0 @@
-export * from "./auth";

app/components/button/index.tsx

@@ -1 +0,0 @@
-export * from "./button";

app/components/chat-list.tsx

@@ -1,7 +1,7 @@
-import DeleteIcon from "@/app/icons/delete.svg";
-import BotIcon from "@/app/icons/bot.svg";
+import DeleteIcon from "../icons/delete.svg";
+import BotIcon from "../icons/bot.svg";
 
-import styles from "@/app/components/home/home.module.scss";
+import styles from "./home.module.scss";
 import {
   DragDropContext,
   Droppable,
@@ -9,16 +9,16 @@ import {
   OnDragEndResponder,
 } from "@hello-pangea/dnd";
 
-import { useChatStore } from "@/app/store";
+import { useChatStore } from "../store";
 
-import Locale from "@/app/locales";
+import Locale from "../locales";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import { Path } from "@/app/constant";
-import { MaskAvatar } from "@/app/components/mask/mask";
-import { Mask } from "@/app/store/mask";
+import { Path } from "../constant";
+import { MaskAvatar } from "./mask";
+import { Mask } from "../store/mask";
 import { useRef, useEffect } from "react";
-import { showConfirm } from "@/app/components/ui-lib";
-import { useMobileScreen } from "@/app/utils";
+import { showConfirm } from "./ui-lib";
+import { useMobileScreen } from "../utils";
 
 export function ChatItem(props: {
   onClick?: () => void;

app/components/chat-list/index.tsx

@@ -1 +0,0 @@
-export * from "./chat-list";

app/components/chat.module.scss

@@ -1,4 +1,4 @@
-@import "../../styles/animation.scss";
+@import "../styles/animation.scss";
 
 .attach-images {
   position: absolute;
@@ -231,12 +231,10 @@
 
   animation: slide-in ease 0.3s;
 
-  $linear: linear-gradient(
-    to right,
-    rgba(0, 0, 0, 0),
-    rgba(0, 0, 0, 1),
-    rgba(0, 0, 0, 0)
-  );
+  $linear: linear-gradient(to right,
+      rgba(0, 0, 0, 0),
+      rgba(0, 0, 0, 1),
+      rgba(0, 0, 0, 0));
   mask-image: $linear;
 
   @mixin show {
@@ -369,7 +367,7 @@
   }
 }
 
-.chat-message-user > .chat-message-container {
+.chat-message-user>.chat-message-container {
   align-items: flex-end;
 }
 
@@ -452,27 +450,23 @@
   border: rgba($color: #888, $alpha: 0.2) 1px solid;
 }
 
+
 @media only screen and (max-width: 600px) {
-  $calc-image-width: calc(100vw / 3 * 2 / var(--image-count));
+  $calc-image-width: calc(100vw/3*2/var(--image-count));
 
   .chat-message-item-image-multi {
     width: $calc-image-width;
     height: $calc-image-width;
   }
-
+  
   .chat-message-item-image {
-    max-width: calc(100vw / 3 * 2);
+    max-width: calc(100vw/3*2);
   }
 }
 
 @media screen and (min-width: 600px) {
-  $max-image-width: calc(
-    calc(1200px - var(--sidebar-width)) / 3 * 2 / var(--image-count)
-  );
-  $image-width: calc(
-    calc(var(--window-width) - var(--sidebar-width)) / 3 * 2 /
-      var(--image-count)
-  );
+  $max-image-width: calc(calc(1200px - var(--sidebar-width))/3*2/var(--image-count));
+  $image-width: calc(calc(var(--window-width) - var(--sidebar-width))/3*2/var(--image-count));
 
   .chat-message-item-image-multi {
     width: $image-width;
@@ -482,7 +476,7 @@
   }
 
   .chat-message-item-image {
-    max-width: calc(calc(1200px - var(--sidebar-width)) / 3 * 2);
+    max-width: calc(calc(1200px - var(--sidebar-width))/3*2);
   }
 }
 
@@ -500,7 +494,7 @@
   z-index: 1;
 }
 
-.chat-message-user > .chat-message-container > .chat-message-item {
+.chat-message-user>.chat-message-container>.chat-message-item {
   background-color: var(--second);
 
   &:hover {
@@ -611,8 +605,7 @@
   min-height: 68px;
 }
 
-.chat-input:focus {
-}
+.chat-input:focus {}
 
 .chat-input-send {
   background-color: var(--primary);
@@ -631,4 +624,4 @@
   .chat-input-send {
     bottom: 30px;
   }
-}
+}

app/components/chat.tsx

@@ -9,34 +9,34 @@ import React, {
   RefObject,
 } from "react";
 
-import SendWhiteIcon from "@/app/icons/send-white.svg";
-import BrainIcon from "@/app/icons/brain.svg";
-import RenameIcon from "@/app/icons/rename.svg";
-import ExportIcon from "@/app/icons/share.svg";
-import ReturnIcon from "@/app/icons/return.svg";
-import CopyIcon from "@/app/icons/copy.svg";
-import LoadingIcon from "@/app/icons/three-dots.svg";
-import LoadingButtonIcon from "@/app/icons/loading.svg";
-import PromptIcon from "@/app/icons/prompt.svg";
-import MaskIcon from "@/app/icons/mask.svg";
-import MaxIcon from "@/app/icons/max.svg";
-import MinIcon from "@/app/icons/min.svg";
-import ResetIcon from "@/app/icons/reload.svg";
-import BreakIcon from "@/app/icons/break.svg";
-import SettingsIcon from "@/app/icons/chat-settings.svg";
-import DeleteIcon from "@/app/icons/clear.svg";
-import PinIcon from "@/app/icons/pin.svg";
-import EditIcon from "@/app/icons/rename.svg";
-import ConfirmIcon from "@/app/icons/confirm.svg";
-import CancelIcon from "@/app/icons/cancel.svg";
-import ImageIcon from "@/app/icons/image.svg";
+import SendWhiteIcon from "../icons/send-white.svg";
+import BrainIcon from "../icons/brain.svg";
+import RenameIcon from "../icons/rename.svg";
+import ExportIcon from "../icons/share.svg";
+import ReturnIcon from "../icons/return.svg";
+import CopyIcon from "../icons/copy.svg";
+import LoadingIcon from "../icons/three-dots.svg";
+import LoadingButtonIcon from "../icons/loading.svg";
+import PromptIcon from "../icons/prompt.svg";
+import MaskIcon from "../icons/mask.svg";
+import MaxIcon from "../icons/max.svg";
+import MinIcon from "../icons/min.svg";
+import ResetIcon from "../icons/reload.svg";
+import BreakIcon from "../icons/break.svg";
+import SettingsIcon from "../icons/chat-settings.svg";
+import DeleteIcon from "../icons/clear.svg";
+import PinIcon from "../icons/pin.svg";
+import EditIcon from "../icons/rename.svg";
+import ConfirmIcon from "../icons/confirm.svg";
+import CancelIcon from "../icons/cancel.svg";
+import ImageIcon from "../icons/image.svg";
 
-import LightIcon from "@/app/icons/light.svg";
-import DarkIcon from "@/app/icons/dark.svg";
-import AutoIcon from "@/app/icons/auto.svg";
-import BottomIcon from "@/app/icons/bottom.svg";
-import StopIcon from "@/app/icons/pause.svg";
-import RobotIcon from "@/app/icons/robot.svg";
+import LightIcon from "../icons/light.svg";
+import DarkIcon from "../icons/dark.svg";
+import AutoIcon from "../icons/auto.svg";
+import BottomIcon from "../icons/bottom.svg";
+import StopIcon from "../icons/pause.svg";
+import RobotIcon from "../icons/robot.svg";
 
 import {
   ChatMessage,
@@ -49,7 +49,7 @@ import {
   useAppConfig,
   DEFAULT_TOPIC,
   ModelType,
-} from "@/app/store";
+} from "../store";
 
 import {
   copyToClipboard,
@@ -59,17 +59,17 @@ import {
   getMessageTextContent,
   getMessageImages,
   isVisionModel,
-} from "@/app/utils";
+} from "../utils";
 
 import { uploadImage as uploadImageRemote } from "@/app/utils/chat";
 
 import dynamic from "next/dynamic";
 
-import { ChatControllerPool } from "@/app/client/controller";
-import { Prompt, usePromptStore } from "@/app/store/prompt";
-import Locale from "@/app/locales";
+import { ChatControllerPool } from "../client/controller";
+import { Prompt, usePromptStore } from "../store/prompt";
+import Locale from "../locales";
 
-import { IconButton } from "@/app/components/button";
+import { IconButton } from "./button";
 import styles from "./chat.module.scss";
 
 import {
@@ -80,7 +80,7 @@ import {
   showConfirm,
   showPrompt,
   showToast,
-} from "@/app/components/ui-lib";
+} from "./ui-lib";
 import { useNavigate } from "react-router-dom";
 import {
   CHAT_PAGE_SIZE,
@@ -89,27 +89,20 @@ import {
   REQUEST_TIMEOUT_MS,
   UNFINISHED_INPUT,
   ServiceProvider,
-} from "@/app/constant";
-import { Avatar } from "../emoji";
-import {
-  ContextPrompts,
-  MaskAvatar,
-  MaskConfig,
-} from "@/app/components/mask/mask";
-import { useMaskStore } from "@/app/store/mask";
-import { ChatCommandPrefix, useChatCommand, useCommand } from "@/app/command";
-import { prettyObject } from "@/app/utils/format";
-import { ExportMessageModal } from "@/app/components/exporter/exporter";
-import { getClientConfig } from "@/app/config/client";
-import { useAllModels } from "@/app/utils/hooks";
-import { MultimodalContent } from "@/app/client/api";
+} from "../constant";
+import { Avatar } from "./emoji";
+import { ContextPrompts, MaskAvatar, MaskConfig } from "./mask";
+import { useMaskStore } from "../store/mask";
+import { ChatCommandPrefix, useChatCommand, useCommand } from "../command";
+import { prettyObject } from "../utils/format";
+import { ExportMessageModal } from "./exporter";
+import { getClientConfig } from "../config/client";
+import { useAllModels } from "../utils/hooks";
+import { MultimodalContent } from "../client/api";
 
-const Markdown = dynamic(
-  async () => (await import("../markdown/markdown")).Markdown,
-  {
-    loading: () => <LoadingIcon />,
-  },
-);
+const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
+  loading: () => <LoadingIcon />,
+});
 
 export function SessionConfigModel(props: { onClose: () => void }) {
   const chatStore = useChatStore();

app/components/chat/index.tsx

@@ -1 +0,0 @@
-export * from "./chat";

app/components/emoji.tsx

@@ -4,10 +4,10 @@ import EmojiPicker, {
   Theme as EmojiTheme,
 } from "emoji-picker-react";
 
-import { ModelType } from "@/app/store";
+import { ModelType } from "../store";
 
-import BotIcon from "@/app/icons/bot.svg";
-import BlackBotIcon from "@/app/icons/black-bot.svg";
+import BotIcon from "../icons/bot.svg";
+import BlackBotIcon from "../icons/black-bot.svg";
 
 export function getEmojiUrl(unified: string, style: EmojiStyle) {
   // Whoever owns this Content Delivery Network (CDN), I am using your CDN to serve emojis

app/components/emoji/index.tsx

@@ -1 +0,0 @@
-export * from "./emoji";

app/components/error.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { IconButton } from "@/app/components/button";
-import GithubIcon from "@/app/icons/github.svg";
-import ResetIcon from "@/app/icons/reload.svg";
-import { ISSUE_URL } from "@/app/constant";
-import Locale from "@/app/locales";
-import { showConfirm } from "@/app/components/ui-lib";
-import { useSyncStore } from "@/app/store/sync";
+import { IconButton } from "./button";
+import GithubIcon from "../icons/github.svg";
+import ResetIcon from "../icons/reload.svg";
+import { ISSUE_URL } from "../constant";
+import Locale from "../locales";
+import { showConfirm } from "./ui-lib";
+import { useSyncStore } from "../store/sync";
 
 interface IErrorBoundaryState {
   hasError: boolean;

app/components/error/index.tsx

@@ -1 +0,0 @@
-export * from "./error";

app/components/exporter.tsx

@@ -1,11 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
-import {
-  ChatMessage,
-  ModelType,
-  useAppConfig,
-  useChatStore,
-} from "@/app/store";
-import Locale from "@/app/locales";
+import { ChatMessage, ModelType, useAppConfig, useChatStore } from "../store";
+import Locale from "../locales";
 import styles from "./exporter.module.scss";
 import {
   List,
@@ -15,46 +10,40 @@ import {
   showImageModal,
   showModal,
   showToast,
-} from "@/app/components/ui-lib";
-import { IconButton } from "@/app/components/button";
+} from "./ui-lib";
+import { IconButton } from "./button";
 import {
   copyToClipboard,
   downloadAs,
   getMessageImages,
   useMobileScreen,
-} from "@/app/utils";
+} from "../utils";
 
-import CopyIcon from "@/app/icons/copy.svg";
-import LoadingIcon from "@/app/icons/three-dots.svg";
-import ChatGptIcon from "@/app/icons/chatgpt.png";
-import ShareIcon from "@/app/icons/share.svg";
-import BotIcon from "@/app/icons/bot.png";
+import CopyIcon from "../icons/copy.svg";
+import LoadingIcon from "../icons/three-dots.svg";
+import ChatGptIcon from "../icons/chatgpt.png";
+import ShareIcon from "../icons/share.svg";
+import BotIcon from "../icons/bot.png";
 
-import DownloadIcon from "@/app/icons/download.svg";
+import DownloadIcon from "../icons/download.svg";
 import { useEffect, useMemo, useRef, useState } from "react";
-import {
-  MessageSelector,
-  useMessageSelector,
-} from "@/app/components/message-selector/message-selector";
-import { Avatar } from "@/app/components/emoji";
+import { MessageSelector, useMessageSelector } from "./message-selector";
+import { Avatar } from "./emoji";
 import dynamic from "next/dynamic";
 import NextImage from "next/image";
 
 import { toBlob, toPng } from "html-to-image";
-import { DEFAULT_MASK_AVATAR } from "@/app/store/mask";
+import { DEFAULT_MASK_AVATAR } from "../store/mask";
 
-import { prettyObject } from "@/app/utils/format";
-import { EXPORT_MESSAGE_CLASS_NAME } from "@/app/constant";
-import { getClientConfig } from "@/app/config/client";
-import { type ClientApi, getClientApi } from "@/app/client/api";
-import { getMessageTextContent } from "@/app/utils";
+import { prettyObject } from "../utils/format";
+import { EXPORT_MESSAGE_CLASS_NAME } from "../constant";
+import { getClientConfig } from "../config/client";
+import { type ClientApi, getClientApi } from "../client/api";
+import { getMessageTextContent } from "../utils";
 
-const Markdown = dynamic(
-  async () => (await import("@/app/components/markdown/markdown")).Markdown,
-  {
-    loading: () => <LoadingIcon />,
-  },
-);
+const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
+  loading: () => <LoadingIcon />,
+});
 
 export function ExportMessageModal(props: { onClose: () => void }) {
   return (

app/components/exporter/index.tsx

@@ -1 +0,0 @@
-export * from "./exporter";

app/components/home.tsx

@@ -1,21 +1,21 @@
 "use client";
 
-require("../../polyfill");
+require("../polyfill");
 
 import { useState, useEffect } from "react";
 
 import styles from "./home.module.scss";
 
-import BotIcon from "@/app/icons/bot.svg";
-import LoadingIcon from "@/app/icons/three-dots.svg";
+import BotIcon from "../icons/bot.svg";
+import LoadingIcon from "../icons/three-dots.svg";
 
-import { getCSSVar, useMobileScreen } from "@/app/utils";
+import { getCSSVar, useMobileScreen } from "../utils";
 
 import dynamic from "next/dynamic";
-import { Path, SlotID } from "@/app/constant";
-import { ErrorBoundary } from "@/app/components/error";
+import { Path, SlotID } from "../constant";
+import { ErrorBoundary } from "./error";
 
-import { getISOLang, getLang } from "@/app/locales";
+import { getISOLang, getLang } from "../locales";
 
 import {
   HashRouter as Router,
@@ -23,12 +23,12 @@ import {
   Route,
   useLocation,
 } from "react-router-dom";
-import { SideBar } from "@/app/components/sidebar";
-import { useAppConfig } from "@/app/store/config";
-import { AuthPage } from "@/app/components/auth/auth";
-import { getClientConfig } from "@/app/config/client";
-import { type ClientApi, getClientApi } from "@/app/client/api";
-import { useAccessStore } from "@/app/store";
+import { SideBar } from "./sidebar";
+import { useAppConfig } from "../store/config";
+import { AuthPage } from "./auth";
+import { getClientConfig } from "../config/client";
+import { type ClientApi, getClientApi } from "../client/api";
+import { useAccessStore } from "../store";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
@@ -39,33 +39,21 @@ export function Loading(props: { noLogo?: boolean }) {
   );
 }
 
-const Settings = dynamic(
-  async () => (await import("@/app/components/settings/settings")).Settings,
-  {
-    loading: () => <Loading noLogo />,
-  },
-);
+const Settings = dynamic(async () => (await import("./settings")).Settings, {
+  loading: () => <Loading noLogo />,
+});
 
-const Chat = dynamic(
-  async () => (await import("@/app/components/chat/chat")).Chat,
-  {
-    loading: () => <Loading noLogo />,
-  },
-);
+const Chat = dynamic(async () => (await import("./chat")).Chat, {
+  loading: () => <Loading noLogo />,
+});
 
-const NewChat = dynamic(
-  async () => (await import("@/app/components/new-chat/new-chat")).NewChat,
-  {
-    loading: () => <Loading noLogo />,
-  },
-);
+const NewChat = dynamic(async () => (await import("./new-chat")).NewChat, {
+  loading: () => <Loading noLogo />,
+});
 
-const MaskPage = dynamic(
-  async () => (await import("@/app/components/mask/mask")).MaskPage,
-  {
-    loading: () => <Loading noLogo />,
-  },
-);
+const MaskPage = dynamic(async () => (await import("./mask")).MaskPage, {
+  loading: () => <Loading noLogo />,
+});
 
 export function useSwitchTheme() {
   const config = useAppConfig();

app/components/home/index.tsx

@@ -1 +0,0 @@
-export * from "./home";

app/components/input-range/index.tsx

@@ -1 +0,0 @@
-export * from "./input-range";

app/components/markdown.tsx

@@ -6,13 +6,13 @@ import RehypeKatex from "rehype-katex";
 import RemarkGfm from "remark-gfm";
 import RehypeHighlight from "rehype-highlight";
 import { useRef, useState, RefObject, useEffect, useMemo } from "react";
-import { copyToClipboard } from "@/app/utils";
+import { copyToClipboard } from "../utils";
 import mermaid from "mermaid";
 
-import LoadingIcon from "@/app/icons/three-dots.svg";
+import LoadingIcon from "../icons/three-dots.svg";
 import React from "react";
 import { useDebouncedCallback } from "use-debounce";
-import { showImageModal } from "@/app/components/ui-lib";
+import { showImageModal } from "./ui-lib";
 
 export function Mermaid(props: { code: string }) {
   const ref = useRef<HTMLDivElement>(null);

app/components/markdown/index.tsx

@@ -1 +0,0 @@
-export * from "./markdown";

app/components/mask.module.scss

@@ -1,4 +1,4 @@
-@import "../../styles/animation.scss";
+@import "../styles/animation.scss";
 .mask-page {
   height: 100%;
   display: flex;

app/components/mask.tsx

@@ -1,19 +1,19 @@
-import { IconButton } from "@/app/components/button";
-import { ErrorBoundary } from "@/app/components/error";
+import { IconButton } from "./button";
+import { ErrorBoundary } from "./error";
 
 import styles from "./mask.module.scss";
 
-import DownloadIcon from "@/app/icons/download.svg";
-import UploadIcon from "@/app/icons/upload.svg";
-import EditIcon from "@/app/icons/edit.svg";
-import AddIcon from "@/app/icons/add.svg";
-import CloseIcon from "@/app/icons/close.svg";
-import DeleteIcon from "@/app/icons/delete.svg";
-import EyeIcon from "@/app/icons/eye.svg";
-import CopyIcon from "@/app/icons/copy.svg";
-import DragIcon from "@/app/icons/drag.svg";
+import DownloadIcon from "../icons/download.svg";
+import UploadIcon from "../icons/upload.svg";
+import EditIcon from "../icons/edit.svg";
+import AddIcon from "../icons/add.svg";
+import CloseIcon from "../icons/close.svg";
+import DeleteIcon from "../icons/delete.svg";
+import EyeIcon from "../icons/eye.svg";
+import CopyIcon from "../icons/copy.svg";
+import DragIcon from "../icons/drag.svg";
 
-import { DEFAULT_MASK_AVATAR, Mask, useMaskStore } from "@/app/store/mask";
+import { DEFAULT_MASK_AVATAR, Mask, useMaskStore } from "../store/mask";
 import {
   ChatMessage,
   createMessage,
@@ -21,8 +21,8 @@ import {
   ModelType,
   useAppConfig,
   useChatStore,
-} from "@/app/store";
-import { MultimodalContent, ROLES } from "@/app/client/api";
+} from "../store";
+import { MultimodalContent, ROLES } from "../client/api";
 import {
   Input,
   List,
@@ -31,23 +31,23 @@ import {
   Popover,
   Select,
   showConfirm,
-} from "@/app/components/ui-lib";
-import { Avatar, AvatarPicker } from "@/app/components/emoji";
-import Locale, { AllLangs, ALL_LANG_OPTIONS, Lang } from "@/app/locales";
+} from "./ui-lib";
+import { Avatar, AvatarPicker } from "./emoji";
+import Locale, { AllLangs, ALL_LANG_OPTIONS, Lang } from "../locales";
 import { useNavigate } from "react-router-dom";
 
-import chatStyle from "@/app/components/chat/chat.module.scss";
+import chatStyle from "./chat.module.scss";
 import { useEffect, useState } from "react";
 import {
   copyToClipboard,
   downloadAs,
   getMessageImages,
   readFromFile,
-} from "@/app/utils";
-import { Updater } from "@/app/typing";
-import { ModelConfigList } from "@/app/components/model-config";
-import { FileName, Path } from "@/app/constant";
-import { BUILTIN_MASK_STORE } from "@/app/masks";
+} from "../utils";
+import { Updater } from "../typing";
+import { ModelConfigList } from "./model-config";
+import { FileName, Path } from "../constant";
+import { BUILTIN_MASK_STORE } from "../masks";
 import { nanoid } from "nanoid";
 import {
   DragDropContext,
@@ -55,7 +55,7 @@ import {
   Draggable,
   OnDragEndResponder,
 } from "@hello-pangea/dnd";
-import { getMessageTextContent } from "@/app/utils";
+import { getMessageTextContent } from "../utils";
 
 // drag and drop helper function
 function reorder<T>(list: T[], startIndex: number, endIndex: number): T[] {

app/components/mask/index.tsx

@@ -1 +0,0 @@
-export * from "./mask";

app/components/message-selector.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useMemo, useState } from "react";
-import { ChatMessage, useAppConfig, useChatStore } from "@/app/store";
-import { Updater } from "@/app/typing";
-import { IconButton } from "@/app/components/button";
-import { Avatar } from "@/app/components/emoji";
-import { MaskAvatar } from "@/app/components/mask";
-import Locale from "@/app/locales";
+import { ChatMessage, useAppConfig, useChatStore } from "../store";
+import { Updater } from "../typing";
+import { IconButton } from "./button";
+import { Avatar } from "./emoji";
+import { MaskAvatar } from "./mask";
+import Locale from "../locales";
 
 import styles from "./message-selector.module.scss";
-import { getMessageTextContent } from "@/app/utils";
+import { getMessageTextContent } from "../utils";
 
 function useShiftRange() {
   const [startIndex, setStartIndex] = useState<number>();

app/components/message-selector/index.tsx

@@ -1 +0,0 @@
-export * from "./message-selector";

app/components/model-config.tsx

@@ -1,10 +1,10 @@
 import { ServiceProvider } from "@/app/constant";
-import { ModalConfigValidator, ModelConfig } from "@/app/store";
+import { ModalConfigValidator, ModelConfig } from "../store";
 
-import Locale from "@/app/locales";
-import { InputRange } from "@/app/components/input-range";
-import { ListItem, Select } from "@/app/components/ui-lib";
-import { useAllModels } from "@/app/utils/hooks";
+import Locale from "../locales";
+import { InputRange } from "./input-range";
+import { ListItem, Select } from "./ui-lib";
+import { useAllModels } from "../utils/hooks";
 
 export function ModelConfigList(props: {
   modelConfig: ModelConfig;

app/components/model-config/index.tsx

@@ -1 +0,0 @@
-export * from "./model-config";

app/components/new-chat.module.scss

@@ -1,4 +1,4 @@
-@import "../../styles/animation.scss";
+@import "../styles/animation.scss";
 
 .new-chat {
   height: 100%;

app/components/new-chat.tsx

@@ -1,21 +1,21 @@
 import { useEffect, useRef, useState } from "react";
-import { Path, SlotID } from "@/app/constant";
-import { IconButton } from "@/app/components/button";
-import { EmojiAvatar } from "@/app/components/emoji";
+import { Path, SlotID } from "../constant";
+import { IconButton } from "./button";
+import { EmojiAvatar } from "./emoji";
 import styles from "./new-chat.module.scss";
 
-import LeftIcon from "@/app/icons/left.svg";
-import LightningIcon from "@/app/icons/lightning.svg";
-import EyeIcon from "@/app/icons/eye.svg";
+import LeftIcon from "../icons/left.svg";
+import LightningIcon from "../icons/lightning.svg";
+import EyeIcon from "../icons/eye.svg";
 
 import { useLocation, useNavigate } from "react-router-dom";
-import { Mask, useMaskStore } from "@/app/store/mask";
-import Locale from "@/app/locales";
-import { useAppConfig, useChatStore } from "@/app/store";
-import { MaskAvatar } from "@/app/components/mask";
-import { useCommand } from "@/app/command";
-import { showConfirm } from "@/app/components/ui-lib";
-import { BUILTIN_MASK_STORE } from "@/app/masks";
+import { Mask, useMaskStore } from "../store/mask";
+import Locale from "../locales";
+import { useAppConfig, useChatStore } from "../store";
+import { MaskAvatar } from "./mask";
+import { useCommand } from "../command";
+import { showConfirm } from "./ui-lib";
+import { BUILTIN_MASK_STORE } from "../masks";
 
 function MaskItem(props: { mask: Mask; onClick?: () => void }) {
   return (

app/components/new-chat/index.tsx

@@ -1 +0,0 @@
-export * from "./new-chat";

app/components/settings.tsx

@@ -2,22 +2,22 @@ import { useState, useEffect, useMemo } from "react";
 
 import styles from "./settings.module.scss";
 
-import ResetIcon from "@/app/icons/reload.svg";
-import AddIcon from "@/app/icons/add.svg";
-import CloseIcon from "@/app/icons/close.svg";
-import CopyIcon from "@/app/icons/copy.svg";
-import ClearIcon from "@/app/icons/clear.svg";
-import LoadingIcon from "@/app/icons/three-dots.svg";
-import EditIcon from "@/app/icons/edit.svg";
-import EyeIcon from "@/app/icons/eye.svg";
-import DownloadIcon from "@/app/icons/download.svg";
-import UploadIcon from "@/app/icons/upload.svg";
-import ConfigIcon from "@/app/icons/config.svg";
-import ConfirmIcon from "@/app/icons/confirm.svg";
+import ResetIcon from "../icons/reload.svg";
+import AddIcon from "../icons/add.svg";
+import CloseIcon from "../icons/close.svg";
+import CopyIcon from "../icons/copy.svg";
+import ClearIcon from "../icons/clear.svg";
+import LoadingIcon from "../icons/three-dots.svg";
+import EditIcon from "../icons/edit.svg";
+import EyeIcon from "../icons/eye.svg";
+import DownloadIcon from "../icons/download.svg";
+import UploadIcon from "../icons/upload.svg";
+import ConfigIcon from "../icons/config.svg";
+import ConfirmIcon from "../icons/confirm.svg";
 
-import ConnectionIcon from "@/app/icons/connection.svg";
-import CloudSuccessIcon from "@/app/icons/cloud-success.svg";
-import CloudFailIcon from "@/app/icons/cloud-fail.svg";
+import ConnectionIcon from "../icons/connection.svg";
+import CloudSuccessIcon from "../icons/cloud-success.svg";
+import CloudFailIcon from "../icons/cloud-fail.svg";
 
 import {
   Input,
@@ -29,10 +29,10 @@ import {
   Select,
   showConfirm,
   showToast,
-} from "@/app/components/ui-lib";
-import { ModelConfigList } from "@/app/components/model-config";
+} from "./ui-lib";
+import { ModelConfigList } from "./model-config";
 
-import { IconButton } from "@/app/components/button";
+import { IconButton } from "./button";
 import {
   SubmitKey,
   useChatStore,
@@ -40,15 +40,15 @@ import {
   useUpdateStore,
   useAccessStore,
   useAppConfig,
-} from "@/app/store";
+} from "../store";
 
 import Locale, {
   AllLangs,
   ALL_LANG_OPTIONS,
   changeLang,
   getLang,
-} from "@/app/locales";
-import { copyToClipboard } from "@/app/utils";
+} from "../locales";
+import { copyToClipboard } from "../utils";
 import Link from "next/link";
 import {
   Anthropic,
@@ -65,17 +65,17 @@ import {
   ServiceProvider,
   SlotID,
   UPDATE_URL,
-} from "@/app/constant";
-import { Prompt, SearchService, usePromptStore } from "@/app/store/prompt";
-import { ErrorBoundary } from "@/app/components/error";
-import { InputRange } from "@/app/components/input-range";
+} from "../constant";
+import { Prompt, SearchService, usePromptStore } from "../store/prompt";
+import { ErrorBoundary } from "./error";
+import { InputRange } from "./input-range";
 import { useNavigate } from "react-router-dom";
-import { Avatar, AvatarPicker } from "@/app/components/emoji";
-import { getClientConfig } from "@/app/config/client";
-import { useSyncStore } from "@/app/store/sync";
+import { Avatar, AvatarPicker } from "./emoji";
+import { getClientConfig } from "../config/client";
+import { useSyncStore } from "../store/sync";
 import { nanoid } from "nanoid";
-import { useMaskStore } from "@/app/store/mask";
-import { ProviderType } from "@/app/utils/cloud";
+import { useMaskStore } from "../store/mask";
+import { ProviderType } from "../utils/cloud";
 
 function EditPromptModal(props: { id: string; onClose: () => void }) {
   const promptStore = usePromptStore();

app/components/settings/index.tsx

@@ -1 +0,0 @@
-export * from "./settings";

app/components/sidebar.tsx

@@ -1,21 +1,21 @@
 import { useEffect, useRef, useMemo } from "react";
 
-import styles from "@/app/components/home/home.module.scss";
+import styles from "./home.module.scss";
 
-import { IconButton } from "@/app/components/button";
-import SettingsIcon from "@/app/icons/settings.svg";
-import GithubIcon from "@/app/icons/github.svg";
-import ChatGptIcon from "@/app/icons/chatgpt.svg";
-import AddIcon from "@/app/icons/add.svg";
-import CloseIcon from "@/app/icons/close.svg";
-import DeleteIcon from "@/app/icons/delete.svg";
-import MaskIcon from "@/app/icons/mask.svg";
-import PluginIcon from "@/app/icons/plugin.svg";
-import DragIcon from "@/app/icons/drag.svg";
+import { IconButton } from "./button";
+import SettingsIcon from "../icons/settings.svg";
+import GithubIcon from "../icons/github.svg";
+import ChatGptIcon from "../icons/chatgpt.svg";
+import AddIcon from "../icons/add.svg";
+import CloseIcon from "../icons/close.svg";
+import DeleteIcon from "../icons/delete.svg";
+import MaskIcon from "../icons/mask.svg";
+import PluginIcon from "../icons/plugin.svg";
+import DragIcon from "../icons/drag.svg";
 
-import Locale from "@/app/locales";
+import Locale from "../locales";
 
-import { useAppConfig, useChatStore } from "@/app/store";
+import { useAppConfig, useChatStore } from "../store";
 
 import {
   DEFAULT_SIDEBAR_WIDTH,
@@ -24,19 +24,16 @@ import {
   NARROW_SIDEBAR_WIDTH,
   Path,
   REPO_URL,
-} from "@/app/constant";
+} from "../constant";
 
 import { Link, useNavigate } from "react-router-dom";
-import { isIOS, useMobileScreen } from "@/app/utils";
+import { isIOS, useMobileScreen } from "../utils";
 import dynamic from "next/dynamic";
-import { showConfirm, showToast } from "@/app/components/ui-lib";
+import { showConfirm, showToast } from "./ui-lib";
 
-const ChatList = dynamic(
-  async () => (await import("@/app/components/chat-list")).ChatList,
-  {
-    loading: () => null,
-  },
-);
+const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
+  loading: () => null,
+});
 
 function useHotKey() {
   const chatStore = useChatStore();

app/components/sidebar/index.tsx

@@ -1 +0,0 @@
-export * from "./sidebar";

app/components/ui-lib.module.scss

@@ -1,4 +1,4 @@
-@import "../../styles/animation.scss";
+@import "../styles/animation.scss";
 
 .card {
   background-color: var(--white);

app/components/ui-lib.tsx

@@ -1,20 +1,20 @@
 /* eslint-disable @next/next/no-img-element */
 import styles from "./ui-lib.module.scss";
-import LoadingIcon from "@/app/icons/three-dots.svg";
-import CloseIcon from "@/app/icons/close.svg";
-import EyeIcon from "@/app/icons/eye.svg";
-import EyeOffIcon from "@/app/icons/eye-off.svg";
-import DownIcon from "@/app/icons/down.svg";
-import ConfirmIcon from "@/app/icons/confirm.svg";
-import CancelIcon from "@/app/icons/cancel.svg";
-import MaxIcon from "@/app/icons/max.svg";
-import MinIcon from "@/app/icons/min.svg";
+import LoadingIcon from "../icons/three-dots.svg";
+import CloseIcon from "../icons/close.svg";
+import EyeIcon from "../icons/eye.svg";
+import EyeOffIcon from "../icons/eye-off.svg";
+import DownIcon from "../icons/down.svg";
+import ConfirmIcon from "../icons/confirm.svg";
+import CancelIcon from "../icons/cancel.svg";
+import MaxIcon from "../icons/max.svg";
+import MinIcon from "../icons/min.svg";
 
-import Locale from "@/app/locales";
+import Locale from "../locales";
 
 import { createRoot } from "react-dom/client";
 import React, { HTMLProps, useEffect, useState } from "react";
-import { IconButton } from "@/app/components/button";
+import { IconButton } from "./button";
 
 export function Popover(props: {
   children: JSX.Element;

app/components/ui-lib/index.tsx

@@ -1 +0,0 @@
-export * from "./ui-lib";

app/page.tsx

@@ -1,8 +1,8 @@
 import { Analytics } from "@vercel/analytics/react";
 
-import { Home } from "@/app/components/home";
+import { Home } from "./components/home";
 
-import { getServerSideConfig } from "@/app/config/server";
+import { getServerSideConfig } from "./config/server";
 
 const serverConfig = getServerSideConfig();
 

app/store/chat.ts

@@ -1,7 +1,7 @@
 import { trimTopic, getMessageTextContent } from "../utils";
 
 import Locale, { getLang } from "../locales";
-import { showToast } from "@/app/components/ui-lib";
+import { showToast } from "../components/ui-lib";
 import { ModelConfig, ModelType, useAppConfig } from "./config";
 import { createEmptyMask, Mask } from "./mask";
 import {

app/store/sync.ts

@@ -10,7 +10,7 @@ import {
   setLocalAppState,
 } from "../utils/sync";
 import { downloadAs, readFromFile } from "../utils";
-import { showToast } from "@/app/components/ui-lib";
+import { showToast } from "../components/ui-lib";
 import Locale from "../locales";
 import { createSyncClient, ProviderType } from "../utils/cloud";
 import { corsPath } from "../utils/cors";
@@ -100,17 +100,15 @@ export const useSyncStore = createPersistStore(
         const remoteState = await client.get(config.username);
         if (!remoteState || remoteState === "") {
           await client.set(config.username, JSON.stringify(localState));
-          console.log(
-            "[Sync] Remote state is empty, using local state instead.",
-          );
-          return;
+          console.log("[Sync] Remote state is empty, using local state instead.");
+          return
         } else {
           const parsedRemoteState = JSON.parse(
             await client.get(config.username),
           ) as AppState;
           mergeAppState(localState, parsedRemoteState);
           setLocalAppState(localState);
-        }
+       } 
       } catch (e) {
         console.log("[Sync] failed to get remote state", e);
         throw e;

app/utils.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { showToast } from "@/app/components/ui-lib";
+import { showToast } from "./components/ui-lib";
 import Locale from "./locales";
 import { RequestMessage } from "./client/api";