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();