feat: improve components structure

Author: Dogtiti

app/components/auth.module.scss app/components/auth/auth.module.scssapp/components/auth.module.scss renamed to app/components/auth/auth.module.scss

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

app/components/auth.tsx app/components/auth/auth.tsxapp/components/auth.tsx renamed to app/components/auth/auth.tsx

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

app/components/auth/index.tsx

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

app/components/button.module.scss app/components/button/button.module.scssapp/components/button.module.scss renamed to app/components/button/button.module.scss

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

app/components/button.tsx app/components/button/button.tsxapp/components/button.tsx renamed to app/components/button/button.tsx

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

app/components/button/index.tsx

@@ -1,4 +1,4 @@
-@import "../styles/animation.scss";
+@import "../../styles/animation.scss";
 
 .attach-images {
   position: absolute;
@@ -231,10 +231,12 @@
 
   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 {
@@ -367,7 +369,7 @@
   }
 }
 
-.chat-message-user>.chat-message-container {
+.chat-message-user > .chat-message-container {
   align-items: flex-end;
 }
 
@@ -450,23 +452,27 @@
   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;
@@ -476,7 +482,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);
   }
 }
 
@@ -494,7 +500,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 {
@@ -605,7 +611,8 @@
   min-height: 68px;
 }
 
-.chat-input:focus {}
+.chat-input:focus {
+}
 
 .chat-input-send {
   background-color: var(--primary);
@@ -624,4 +631,4 @@
   .chat-input-send {
     bottom: 30px;
   }
-}
+}

app/components/chat-list.tsx app/components/chat-list/chat-list.tsxapp/components/chat-list.tsx renamed to app/components/chat-list/chat-list.tsx

@@ -9,34 +9,34 @@ import React, {
   RefObject,
 } from "react";
 
-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 "../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 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 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 {
   ChatMessage,
@@ -49,7 +49,7 @@ import {
   useAppConfig,
   DEFAULT_TOPIC,
   ModelType,
-} from "../store";
+} from "@/app/store";
 
 import {
   copyToClipboard,
@@ -59,17 +59,17 @@ import {
   getMessageTextContent,
   getMessageImages,
   isVisionModel,
-} from "../utils";
+} from "@/app/utils";
 
 import { uploadImage as uploadImageRemote } from "@/app/utils/chat";
 
 import dynamic from "next/dynamic";
 
-import { ChatControllerPool } from "../client/controller";
-import { Prompt, usePromptStore } from "../store/prompt";
-import Locale from "../locales";
+import { ChatControllerPool } from "@/app/client/controller";
+import { Prompt, usePromptStore } from "@/app/store/prompt";
+import Locale from "@/app/locales";
 
-import { IconButton } from "./button";
+import { IconButton } from "@/app/components/button";
 import styles from "./chat.module.scss";
 
 import {
@@ -80,7 +80,7 @@ import {
   showConfirm,
   showPrompt,
   showToast,
-} from "./ui-lib";
+} from "@/app/components/ui-lib";
 import { useNavigate } from "react-router-dom";
 import {
   CHAT_PAGE_SIZE,
@@ -89,20 +89,27 @@ import {
   REQUEST_TIMEOUT_MS,
   UNFINISHED_INPUT,
   ServiceProvider,
-} 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, {
-  loading: () => <LoadingIcon />,
-});
+} 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";
+
+const Markdown = dynamic(
+  async () => (await import("../markdown/markdown")).Markdown,
+  {
+    loading: () => <LoadingIcon />,
+  },
+);
 
 export function SessionConfigModel(props: { onClose: () => void }) {
   const chatStore = useChatStore();