7x31/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git synced 2025-09-08 01:06:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: optiminize

Browse Source
This commit is contained in:
butterfly
2024-04-26 01:31:03 +08:00
parent 59583e53bd
commit 48e8c0a194
30 changed files with 304 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app/containers/Chat/ChatActions.tsx
View File

@@ -115,23 +115,23 @@ export function ChatActions(props: {
icon: props.uploading ? <LoadingButtonIcon /> : <ImageIcon />,
placement: "left",
},
{
onClick: nextTheme,
text: Locale.Chat.InputActions.Theme[theme],
isShow: true,
icon: (
<>
{theme === Theme.Auto ? (
<AutoIcon />
) : theme === Theme.Light ? (
<LightIcon />
) : theme === Theme.Dark ? (
<DarkIcon />
) : null}
</>
),
placement: "left",
},
// {
// onClick: nextTheme,
// text: Locale.Chat.InputActions.Theme[theme],
// isShow: true,
// icon: (
// <>
// {theme === Theme.Auto ? (
// <AutoIcon />
// ) : theme === Theme.Light ? (
// <LightIcon />
// ) : theme === Theme.Dark ? (
// <DarkIcon />
// ) : null}
// </>
// ),
// placement: "left",
// },
{
onClick: props.showPromptHints,
text: Locale.Chat.InputActions.Prompt,
@@ -201,6 +201,7 @@ export function ChatActions(props: {
placement="rt"
noArrow
popoverClassName="border border-chat-actions-popover-mobile rounded-md shadow-chat-actions-popover-mobile w-actions-popover bg-chat-actions-popover-panel-mobile "
className=" cursor-pointer"
>
<AddCircleIcon />
</Popover>
@@ -222,7 +223,7 @@ export function ChatActions(props: {
placement={ind ? "t" : "lt"}
>
<div
className="h-[32px] w-[32px] flex items-center justify-center hover:bg-chat-actions-btn-hovered hover:rounded-action-btn"
className=" cursor-pointer h-[32px] w-[32px] flex items-center justify-center hover:bg-chat-actions-btn-hovered hover:rounded-action-btn"
onClick={act.onClick}
>
{act.icon}
@@ -242,7 +243,7 @@ export function ChatActions(props: {
placement={ind === arr.length - 1 ? "rt" : "t"}
>
<div
className="h-[32px] w-[32px] flex items-center justify-center hover:bg-chat-actions-btn-hovered hover:rounded-action-btn"
className=" cursor-pointer h-[32px] w-[32px] flex items-center justify-center hover:bg-chat-actions-btn-hovered hover:rounded-action-btn"
onClick={act.onClick}
>
{act.icon}

41
app/containers/Chat/ChatHeader.tsx
View File

@@ -30,21 +30,13 @@ export default function ChatHeader(props: ChatHeaderProps) {
const currentModel = chatStore.currentSession().mask.modelConfig.model;
let containerClassName = "";
let titleClassName = "mr-4";
let mainTitleClassName = "";
let subTitleClassName = "";
if (isMobileScreen) {
containerClassName = "h-menu-title-mobile";
titleClassName = "flex flex-col items-center justify-center gap-0.5 text";
mainTitleClassName = "text-sm-title h-[19px] leading-5";
subTitleClassName = "text-sm-mobile-tab leading-4";
}
return (
<div
className={`absolute w-[100%] backdrop-blur-[30px] z-20 flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap sm:border-b sm:border-chat-header-bottom ${containerClassName}`}
className={`
absolute w-[100%] backdrop-blur-[30px] z-20 flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap
sm:border-b sm:border-chat-header-bottom
max-md:h-menu-title-mobile
`}
data-tauri-drag-region
>
<div
@@ -54,26 +46,38 @@ export default function ChatHeader(props: ChatHeaderProps) {
</div>
{isMobileScreen ? (
<div onClick={() => navigate(Path.Home)}>
<div className=" cursor-pointer" onClick={() => navigate(Path.Home)}>
<GobackIcon />
</div>
) : (
<LogIcon />
)}
<div className={`flex-1 ${titleClassName}`}>
<div
className={`
flex-1
max-md:flex max-md:flex-col max-md:items-center max-md:justify-center max-md:gap-0.5 max-md:text
md:mr-4
`}
>
<div
className={`line-clamp-1 cursor-pointer text-text-chat-header-title text-chat-header-title font-common ${mainTitleClassName}`}
className={`
line-clamp-1 cursor-pointer text-text-chat-header-title text-chat-header-title font-common
max-md:text-sm-title max-md:h-chat-header-title-mobile max-md:leading-5
`}
onClickCapture={() => setIsEditingMessage(true)}
>
{!session.topic ? DEFAULT_TOPIC : session.topic}
</div>
<div
className={`text-text-chat-header-subtitle text-sm ${subTitleClassName}`}
className={`
text-text-chat-header-subtitle text-sm
max-md:text-sm-mobile-tab max-md:leading-4
`}
>
{isMobileScreen ? (
<div
className="flex items-center gap-1"
className="flex items-center gap-1 cursor-pointer"
onClick={() => showModelSelector(true)}
>
{currentModel}
@@ -86,6 +90,7 @@ export default function ChatHeader(props: ChatHeaderProps) {
</div>
<div
className=" cursor-pointer"
onClick={() => {
setShowExport(true);
}}

46
app/containers/Chat/ChatInputPanel.tsx
View File

@@ -203,29 +203,28 @@ export default forwardRef<ChatInputPanelInstance, ChatInputPanelProps>(
emitImages: setAttachImages,
setUploading,
});
let containerClassName = "border-t border-chat-input-top";
let inputClassName = " flex flex-col px-5 pb-5";
let actionsClassName = "py-2.5";
let labelClassName = "rounded-md p-4 gap-4";
let textarea = "min-h-chat-input";
if (isMobileScreen) {
containerClassName = "rounded-tl-md rounded-tr-md";
inputClassName = "flex flex-row-reverse items-center gap-2 p-3";
actionsClassName = "";
labelClassName = " rounded-chat-input p-3 gap-3 flex-1";
textarea = "h-chat-input-mobile";
}
return (
<div className={`relative w-[100%] box-border ${containerClassName}`}>
<div
className={`
relative w-[100%] box-border
max-md:rounded-tl-md max-md:rounded-tr-md
md:border-t md:border-chat-input-top
`}
>
<PromptHints
prompts={promptHints}
onPromptSelect={onPromptSelect}
className=" border-chat-input-top"
/>
<div className={`${inputClassName}`}>
<div
className={`
flex
max-md:flex-row-reverse max-md:items-center max-md:gap-2 max-md:p-3
md:flex-col md:px-5 md:pb-5
`}
>
<ChatActions
showModelSelector={showModelSelector}
uploadImage={uploadImage}
@@ -246,11 +245,18 @@ export default forwardRef<ChatInputPanelInstance, ChatInputPanelProps>(
setUserInput("/");
onSearch("");
}}
className={actionsClassName}
className={`
md:py-2.5
`}
isMobileScreen={isMobileScreen}
/>
<label
className={`cursor-text flex flex-col bg-chat-panel-input-hood border border-chat-input-hood sm:focus-within:border-chat-input-hood-focus sm:focus-within:shadow-chat-input-hood-focus-shadow ${labelClassName}`}
className={`
cursor-text flex flex-col bg-chat-panel-input-hood border border-chat-input-hood
sm:focus-within:border-chat-input-hood-focus sm:focus-within:shadow-chat-input-hood-focus-shadow
rounded-chat-input p-3 gap-3 max-md:flex-1
md:rounded-md md:p-4 md:gap-4
`}
htmlFor="chat-input"
>
{attachImages.length != 0 && (
@@ -273,7 +279,11 @@ export default forwardRef<ChatInputPanelInstance, ChatInputPanelProps>(
<textarea
id="chat-input"
ref={inputRef}
className={`leading-[19px] flex-1 focus:outline-none focus:shadow-none focus:border-none ${textarea} resize-none`}
className={`
leading-[19px] flex-1 focus:outline-none focus:shadow-none focus:border-none resize-none
max-md:h-chat-input-mobile
md:min-h-chat-input
`}
placeholder={
isMobileScreen
? Locale.Chat.Input(submitKey, isMobileScreen)

2
app/containers/Chat/ChatMessagePanel.tsx
View File

@@ -228,7 +228,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
: "text-text-chat-message-markdown-bot"
}`}
/>
<Imgs message={message} isMobileScreen={isMobileScreen} />
<Imgs message={message} />
</div>
<MessageActions
className={actionsBarPosition}

12
app/containers/Chat/ChatPanel.tsx
View File

@@ -273,13 +273,11 @@ function _Chat() {
return (
<div
className={`relative flex flex-col ${
isMobileScreen
? "absolute h-[100vh] w-[100%]"
: "h-[calc(100%-1.25rem)]"
} overflow-hidden ${
isMobileScreen ? "" : `my-2.5 ml-1 mr-2.5 rounded-md`
} bg-chat-panel`}
className={`
relative flex flex-col overflow-hidden bg-chat-panel
max-md:absolute max-md:h-[100vh] max-md:w-[100%]
md:h-[calc(100%-1.25rem)] md:my-2.5 md:ml-1 md:mr-2.5 md:rounded-md
`}
key={session.id}
>
<ChatHeader

9
app/containers/Chat/ClearContextDivider.tsx
View File

@@ -8,7 +8,7 @@ export default function ClearContextDivider() {
return (
<div
className={`mt-6 mb-8 flex items-center justify-center gap-2.5`}
className={`mt-6 mb-8 flex items-center justify-center gap-2.5 max-md:cursor-pointer`}
onClick={() => {
if (!isMobileScreen) {
return;
@@ -24,9 +24,10 @@ export default function ClearContextDivider() {
{Locale.Context.Clear}
</div>
<div
className={`text-text-chat-panel-message-clear-revert underline font-common ${
!isMobileScreen ? " cursor-pointer" : ""
}`}
className={`
text-text-chat-panel-message-clear-revert underline font-common
md:cursor-pointer
`}
onClick={() => {
if (isMobileScreen) {
return;

2
app/containers/Chat/MessageActions.tsx
View File

@@ -263,7 +263,7 @@ export default function MessageActions(props: MessageActionsProps) {
className={`
absolute z-10
${isUser ? "right-0" : "left-0"}
transition-all duration-500
transition-all duration-300
opacity-0
pointer-events-none
group-hover:opacity-100

67
app/containers/Chat/index.tsx
View File

@@ -11,20 +11,20 @@ import Locale from "@/app/locales";
import { useLocation, useNavigate } from "react-router-dom";
import { Path } from "@/app/constant";
import { Mask } from "@/app/store/mask";
import { useRef, useEffect, useMemo, useContext } from "react";
import { useRef, useEffect } from "react";
import { showConfirm } from "@/app/components/ui-lib";
import AddIcon from "@/app/icons/addIcon.svg";
import NextChatTitle from "@/app/icons/nextchatTitle.svg";
// import { ListHoodProps } from "@/app/containers/types";
import DeleteChatIcon from "@/app/icons/deleteChatIcon.svg";
import { getTime } from "@/app/utils";
import DeleteIcon from "@/app/icons/deleteIcon.svg";
import LogIcon from "@/app/icons/logIcon.svg";
import MenuLayout, {
MenuWrapperInspectProps,
} from "@/app/components/MenuLayout";
import MenuLayout from "@/app/components/MenuLayout";
import Panel from "./ChatPanel";
import Popover from "@/app/components/Popover";
export function SessionItem(props: {
onClick?: () => void;
@@ -90,17 +90,30 @@ export function SessionItem(props: {
{Locale.ChatItem.ChatItemCount(props.count)}
</div>
</div>
<div
className={`absolute top-[50%] translate-y-[-50%] right-3 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100`}
onClickCapture={(e) => {
props.onDelete?.();
e.preventDefault();
e.stopPropagation();
}}
<Popover
content={
<div
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6`}
onClickCapture={(e) => {
props.onDelete?.();
e.preventDefault();
e.stopPropagation();
}}
>
<DeleteChatIcon />
<div className="flex-1 font-common text-actions-popover-menu-item">
{Locale.Chat.Actions.Delete}
</div>
</div>
}
className=""
>
<DeleteIcon />
</div>
<div
className={`absolute top-[50%] translate-y-[-50%] right-3 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100`}
>
<DeleteIcon />
</div>
</Popover>
</div>
)}
</Draggable>
@@ -145,26 +158,28 @@ export default MenuLayout(function SessionList(props) {
moveSession(source.index, destination.index);
};
let layoutClassName = "flex flex-col px-0";
let titleClassName = "py-7";
if (isMobileScreen) {
layoutClassName = "flex flex-col pb-chat-panel-mobile ";
titleClassName = "py-6 box-content h-0";
}
return (
<div className={`h-[100%] ${layoutClassName}`}>
<div
className={`
h-[100%] flex flex-col
max-md:pb-chat-panel-mobile
md:px-0
`}
>
<div data-tauri-drag-region>
<div
className={`flex items-center justify-between ${titleClassName}`}
className={`
flex items-center justify-between
py-6 max-md:box-content max-md:h-0
md:py-7
`}
data-tauri-drag-region
>
<div className="">
<NextChatTitle />
</div>
<div
className=""
className=" cursor-pointer"
onClick={() => {
if (config.dontShowMaskSplashScreen) {
chatStore.newSession();

4
app/containers/Settings/AppSetting.tsx
View File

@@ -57,9 +57,7 @@ export default function AppSetting(props: AppSettingProps) {
return (
<List
widgetStyle={{
selectClassName: isMobileScreen
? "min-w-select-mobile"
: "min-w-select",
selectClassName: "min-w-select-mobile md:min-w-select",
rangeNextLine: isMobileScreen,
}}
>

34
app/containers/Settings/SettingHeader.tsx
View File

@@ -10,37 +10,35 @@ export interface ChatHeaderProps {
export default function SettingHeader(props: ChatHeaderProps) {
const { isMobileScreen, goback } = props;
const navigate = useNavigate();
let containerClassName = "";
let titleClassName = "mr-4";
let mainTitleClassName = "";
let subTitleClassName = "";
if (isMobileScreen) {
containerClassName = "h-menu-title-mobile bg-settings-header-mobile";
titleClassName = "flex flex-col items-center justify-center gap-0.5 text";
mainTitleClassName = "text-sm-title h-[19px] leading-5";
subTitleClassName = "text-sm-mobile-tab leading-4";
}
return (
<div
className={`relative flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap border-b border-settings-header ${containerClassName}`}
className={`
relative flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap border-b border-settings-header
max-md:h-menu-title-mobile max-md:bg-settings-header-mobile
`}
data-tauri-drag-region
>
{isMobileScreen ? (
<div
className="absolute left-4 top-[50%] translate-y-[-50%]"
className="absolute left-4 top-[50%] translate-y-[-50%] cursor-pointer"
onClick={() => goback()}
>
<GobackIcon />
</div>
) : null}
<div className={`flex-1 ${titleClassName}`}>
<div
className={`
flex-1
max-md:flex max-md:flex-col max-md:items-center max-md:justify-center max-md:gap-0.5 max-md:text
md:mr-4
`}
>
<div
className={`line-clamp-1 cursor-pointer text-text-settings-panel-header-title text-chat-header-title font-common ${mainTitleClassName}`}
className={`
line-clamp-1 cursor-pointer text-text-settings-panel-header-title text-chat-header-title font-common
max-md:text-sm-title max-md:h-chat-header-title-mobile max-md:leading-5
`}
>
{Locale.Settings.Title}
</div>

25
app/containers/Settings/SettingPanel.tsx
View File

@@ -47,26 +47,27 @@ export default function Settings(props: MenuWrapperInspectProps) {
const clientConfig = useMemo(() => getClientConfig(), []);
let containerClassName =
"h-[calc(100%-1.25rem)] my-2.5 ml-1 mr-2.5 rounded-md";
let listBodyClassName = "px-6 py-8";
let cardClassName = "max-w-setting-list mb-8";
if (isMobileScreen) {
containerClassName = "h-setting-panel-mobile";
listBodyClassName = "gap-5 w-[100%] px-4 py-5";
cardClassName = "mb-6";
}
const cardClassName = "mb-6 md:max-w-setting-list md:mb-8";
return (
<div
className={`flex flex-col overflow-hidden bg-settings-panel ${containerClassName}`}
className={`
flex flex-col overflow-hidden bg-settings-panel
h-setting-panel-mobile
md:h-[calc(100%-1.25rem)] md:my-2.5 md:ml-1 md:mr-2.5 md:rounded-md
`}
>
<SettingHeader
isMobileScreen={isMobileScreen}
goback={() => setShowPanel?.(false)}
/>
<div className={`!overflow-x-hidden ${listBodyClassName}`}>
<div
className={`
!overflow-x-hidden
max-md:gap-5 max-md:w-[100%] px-4 py-5
md:px-6 md:py-8
`}
>
<Card className={cardClassName} title={Locale.Settings.Basic.Title}>
<AppSetting />
</Card>

37
app/containers/Settings/index.tsx
View File

@@ -12,21 +12,21 @@ export default MenuLayout(function SettingList(props) {
const { isMobileScreen } = config;
let layoutClassName = "pt-7 px-4";
let titleClassName = "pb-5";
let itemClassName = "";
if (isMobileScreen) {
layoutClassName = "h-[100%] mx-[-1.5rem] px-6 py-6 bg-settings-menu-mobile";
titleClassName = "h-menu-title-mobile";
itemClassName = "p-4 bg-settings-menu-item-mobile";
}
return (
<div className={` ${layoutClassName}`}>
<div
className={`
px-6
max-md:h-[100%] max-md:mx-[-1.5rem] max-md:py-6 max-md:bg-settings-menu-mobile
md:pt-7 md:px-4
`}
>
<div data-tauri-drag-region>
<div
className={`flex items-center justify-between ${titleClassName}`}
className={`
flex items-center justify-between
max-md:h-menu-title-mobile
md:pb-5
`}
data-tauri-drag-region
>
<div className="text-setting-title text-text-settings-menu-title font-common font-setting-title">
@@ -39,11 +39,14 @@ export default MenuLayout(function SettingList(props) {
className={`flex flex-col overflow-y-auto overflow-x-hidden w-[100%]`}
>
<div
className={`p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title
border border-settings-menu-item-selected border-opacity-0 rounded-md
hover:border-opacity-100 hover:font-semibold hover:bg-settings-menu-item-selected ${itemClassName}
flex justify-between items-center
`}
className={`
p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title
border
border-opacity-0 rounded-md
hover:border-opacity-100 hover:font-semibold hover:bg-settings-menu-item-selected
flex justify-between items-center
max-md:bg-settings-menu-item-mobile
`}
onClick={() => {
setShowPanel?.(true);
}}

24
app/containers/Sidebar/index.tsx
View File

@@ -41,17 +41,14 @@ export function SideBar(props: { className?: string }) {
selectedTab = Path.Home;
}
let containerClassName = "relative flex h-[100%]";
let tabActionsClassName = "2xl:px-5 xl:px-4 px-2 py-6";
if (isMobileScreen) {
containerClassName = "flex flex-col-reverse w-[100%] h-[100%]";
tabActionsClassName =
"bg-sidebar-mobile rounded-tl-md rounded-tr-md h-mobile";
}
return (
<div className={`${containerClassName}`}>
<div
className={`
flex h-[100%]
max-md:flex-col-reverse max-md:w-[100%]
md:relative
`}
>
<ActionsBar
inMobile={isMobileScreen}
actionsShema={[
@@ -113,9 +110,10 @@ export function SideBar(props: { className?: string }) {
mobile: [[Path.Home, Path.Masks, Path.Settings]],
}}
selected={selectedTab}
className={`${
isMobileScreen ? "justify-around" : "flex-col"
} ${tabActionsClassName}`}
className={`
max-md:bg-sidebar-mobile max-md:rounded-tl-md max-md:rounded-tr-md max-md:h-mobile max-md:justify-around
2xl:px-5 xl:px-4 md:px-2 md:py-6 md:flex-col
`}
/>
</div>
);