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

Revert "feat: improve components structure"

Author: lloydzhou

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

@@ -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/auth.tsx app/components/auth.tsxapp/components/auth/auth.tsx renamed to app/components/auth.tsx

@@ -1,24 +1,24 @@
-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,
   Draggable,
   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/auth/index.tsx

@@ -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/button/button.module.scss app/components/button.module.scssapp/components/button/button.module.scss renamed to app/components/button.module.scss

@@ -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 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 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 {
   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";
-
-const Markdown = dynamic(
-  async () => (await import("../markdown/markdown")).Markdown,
-  {
-    loading: () => <LoadingIcon />,
-  },
-);
+} 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 />,
+});
 
 export function SessionConfigModel(props: { onClose: () => void }) {
   const chatStore = useChatStore();