7x31
/
ChatGPT-Next-Web
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5080 from ConnectAI-E/refactor-components 

feat: improve components structure
This commit is contained in:
Lloyd Zhou 2024-07-22 19:08:02 +08:00 committed by GitHub
parent 4a0bef9afb d6089e6309
commit 1943f3b53f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
49 changed files with 318 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
app/components/auth.module.scss → app/components/auth/auth.module.scss
View File

12
app/components/auth.tsx → app/components/auth/auth.tsx
View File

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

1
app/components/auth/index.tsx Normal file
View File

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

0
app/components/button.module.scss → app/components/button/button.module.scss
View File

0
app/components/button.tsx → app/components/button/button.tsx
View File

1
app/components/button/index.tsx Normal file
View File

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

20
app/components/chat-list.tsx → app/components/chat-list/chat-list.tsx
View File

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

1
app/components/chat-list/index.tsx Normal file
View File

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

35
app/components/chat.module.scss → app/components/chat/chat.module.scss
View File

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

101
app/components/chat.tsx → app/components/chat/chat.tsx
View File

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

1
app/components/chat/index.tsx Normal file
View File

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

6
app/components/emoji.tsx → app/components/emoji/emoji.tsx
View File

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

1
app/components/emoji/index.tsx Normal file
View File

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

14
app/components/error.tsx → app/components/error/error.tsx
View File

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

1
app/components/error/index.tsx Normal file
View File

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

0
app/components/exporter.module.scss → app/components/exporter/exporter.module.scss
View File

55
app/components/exporter.tsx → app/components/exporter/exporter.tsx
View File

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

1
app/components/exporter/index.tsx Normal file
View File

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

0
app/components/home.module.scss → app/components/home/home.module.scss
View File

62
app/components/home.tsx → app/components/home/home.tsx
View File

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

1
app/components/home/index.tsx Normal file
View File

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

1
app/components/input-range/index.tsx Normal file
View File

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

0
app/components/input-range.module.scss → app/components/input-range/input-range.module.scss
View File

0
app/components/input-range.tsx → app/components/input-range/input-range.tsx
View File

1
app/components/markdown/index.tsx Normal file
View File

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

6
app/components/markdown.tsx → app/components/markdown/markdown.tsx
View File

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

1
app/components/mask/index.tsx Normal file
View File

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

2
app/components/mask.module.scss → app/components/mask/mask.module.scss
View File

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

48
app/components/mask.tsx → app/components/mask/mask.tsx
View File

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

1
app/components/message-selector/index.tsx Normal file
View File

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

0
app/components/message-selector.module.scss → app/components/message-selector/message-selector.module.scss
View File

14
app/components/message-selector.tsx → app/components/message-selector/message-selector.tsx
View File

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

1
app/components/model-config/index.tsx Normal file
View File

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

10
app/components/model-config.tsx → app/components/model-config/model-config.tsx
View File

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

1
app/components/new-chat/index.tsx Normal file
View File

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

2
app/components/new-chat.module.scss → app/components/new-chat/new-chat.module.scss
View File

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

26
app/components/new-chat.tsx → app/components/new-chat/new-chat.tsx
View File

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

1
app/components/settings/index.tsx Normal file
View File

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

0
app/components/settings.module.scss → app/components/settings/settings.module.scss
View File

60
app/components/settings.tsx → app/components/settings/settings.tsx
View File

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

1
app/components/sidebar/index.tsx Normal file
View File

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

41
app/components/sidebar.tsx → app/components/sidebar/sidebar.tsx
View File

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

1
app/components/ui-lib/index.tsx Normal file
View File

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

2
app/components/ui-lib.module.scss → app/components/ui-lib/ui-lib.module.scss
View File

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

22
app/components/ui-lib.tsx → app/components/ui-lib/ui-lib.tsx
View File

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

4
app/page.tsx
View File

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

2
app/store/chat.ts
View File

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

10
app/store/sync.ts
View File

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

2
app/utils.ts
View File

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