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

feat: bugfix

This commit is contained in:
butterfly 2024-04-30 19:11:59 +08:00
parent cadd2558fd
commit 3d99965a8f
21 changed files with 313 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Card/index.tsx
View File

@ -14,7 +14,7 @@ export default function Card(props: CardProps) {
{title && ( {title && (
<div <div
className={` className={`
capitalize font-black font-setting-card-title text-sm-mobile font-weight-setting-card-title capitalize !font-semibold text-sm-mobile font-weight-setting-card-title
mb-3 mb-3
ml-3 ml-3

4
app/components/HoverPopover/index.tsx
View File

@ -8,6 +8,7 @@ export interface PopoverProps {
popoverClassName?: string; popoverClassName?: string;
noArrow?: boolean; noArrow?: boolean;
align?: ComponentProps<typeof HoverCard.Content>["align"]; align?: ComponentProps<typeof HoverCard.Content>["align"];
openDelay?: number;
} }
export default function HoverPopover(props: PopoverProps) { export default function HoverPopover(props: PopoverProps) {
@ -18,9 +19,10 @@ export default function HoverPopover(props: PopoverProps) {
popoverClassName, popoverClassName,
noArrow = false, noArrow = false,
align, align,
openDelay = 300,
} = props; } = props;
return ( return (
<HoverCard.Root> <HoverCard.Root openDelay={openDelay}>
<HoverCard.Trigger asChild>{children}</HoverCard.Trigger> <HoverCard.Trigger asChild>{children}</HoverCard.Trigger>
<HoverCard.Portal> <HoverCard.Portal>
<HoverCard.Content <HoverCard.Content

28
app/components/MenuLayout/index.tsx
View File

@ -1,4 +1,3 @@
import { useNavigate } from "react-router-dom";
import { import {
DEFAULT_SIDEBAR_WIDTH, DEFAULT_SIDEBAR_WIDTH,
MAX_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH,
@ -9,13 +8,13 @@ import useDrag from "@/app/hooks/useDrag";
import useMobileScreen from "@/app/hooks/useMobileScreen"; import useMobileScreen from "@/app/hooks/useMobileScreen";
import { updateGlobalCSSVars } from "@/app/utils/client"; import { updateGlobalCSSVars } from "@/app/utils/client";
import { ComponentType, useRef, useState } from "react"; import { ComponentType, useRef, useState } from "react";
import DragIcon from "@/app/icons/drag.svg";
import { useAppConfig } from "@/app/store/config"; import { useAppConfig } from "@/app/store/config";
export interface MenuWrapperInspectProps { export interface MenuWrapperInspectProps {
setExternalProps?: (v: Record<string, any>) => void;
setShowPanel?: (v: boolean) => void; setShowPanel?: (v: boolean) => void;
showPanel?: boolean; showPanel?: boolean;
[k: string]: any;
} }
export default function MenuLayout< export default function MenuLayout<
@ -27,8 +26,7 @@ export default function MenuLayout<
) { ) {
return function MenuHood(props: ListComponentProps & PanelComponentProps) { return function MenuHood(props: ListComponentProps & PanelComponentProps) {
const [showPanel, setShowPanel] = useState(false); const [showPanel, setShowPanel] = useState(false);
const [externalProps, setExternalProps] = useState({});
const navigate = useNavigate();
const config = useAppConfig(); const config = useAppConfig();
const isMobileScreen = useMobileScreen(); const isMobileScreen = useMobileScreen();
@ -62,38 +60,34 @@ export default function MenuLayout<
return ( return (
<div <div
className={` className={`
h-[100%] w-[100%] relative bg-center w-[100%] relative bg-center
md:flex md:flex md:my-2.5
`} `}
> >
<div <div
className={` className={`
flex flex-col px-6 flex flex-col px-6
h-[100%] h-[100%]
max-md:w-[100%] max-md:px-4 max-md:pb-4 max-md:flex-1 max-md:w-[100%] max-md:px-4 max-md:pb-4 max-md:flex-1
md:relative md:basis-sidebar md:h-[calc(100%-1.25rem)] md:pb-6 md:rounded-md md:my-2.5 md:bg-menu md:relative md:basis-sidebar md:pb-6 md:rounded-md md:bg-menu
`} `}
// onClick={(e) => {
// if (e.target === e.currentTarget) {
// navigate(Path.Home);
// }
// }}
> >
<ListComponent <ListComponent
{...props} {...props}
setShowPanel={setShowPanel} setShowPanel={setShowPanel}
setExternalProps={setExternalProps}
showPanel={showPanel} showPanel={showPanel}
/> />
</div> </div>
{!isMobileScreen && ( {!isMobileScreen && (
<div <div
className={`group/menu-dragger h-[100%] cursor-col-resize w-[0.25rem] flex items-center justify-center`} className={`group/menu-dragger cursor-col-resize w-[0.25rem] flex items-center justify-center`}
onPointerDown={(e) => { onPointerDown={(e) => {
startDragWidth.current = config.sidebarWidth; startDragWidth.current = config.sidebarWidth;
onDragStart(e as any); onDragStart(e as any);
}} }}
> >
<div className="w-[1px] opacity-0 group-hover/menu-dragger:opacity-100 bg-menu-dragger"> <div className="w-[2px] opacity-0 group-hover/menu-dragger:opacity-100 bg-menu-dragger h-[100%] rounded-[2px]">
&nbsp; &nbsp;
</div> </div>
</div> </div>
@ -108,7 +102,9 @@ export default function MenuLayout<
> >
<PanelComponent <PanelComponent
{...props} {...props}
{...externalProps}
setShowPanel={setShowPanel} setShowPanel={setShowPanel}
setExternalProps={setExternalProps}
showPanel={showPanel} showPanel={showPanel}
/> />
</div> </div>

17
app/components/Popover/index.tsx
View File

@ -312,17 +312,21 @@ export default function Popover(props: PopoverProps) {
return ( return (
<div <div
className={`group relative ${className}`} className={`group/popover relative ${className}`}
onPointerEnter={(e) => { onPointerEnter={(e) => {
getRelativePosition(e.currentTarget, ""); getRelativePosition(e.currentTarget, "");
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}} }}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
}}
> >
{children} {children}
<div <div
className={` className={`
hidden group-hover:block hidden group-hover/popover:block
${noArrow ? "opacity-0" : ""} ${noArrow ? "opacity-0" : ""}
bg-inherit bg-inherit
${arrowClassName} ${arrowClassName}
@ -332,9 +336,14 @@ export default function Popover(props: PopoverProps) {
<ArrowIcon sibling={popoverRef} /> <ArrowIcon sibling={popoverRef} />
</div> </div>
<div <div
className={`hidden group-hover:block whitespace-nowrap ${popoverCommonClass} ${placementClassName} ${popoverClassName}`} className={`
hidden group-hover/popover:block whitespace-nowrap
${popoverCommonClass}
${placementClassName}
${popoverClassName}
`}
ref={popoverRef} ref={popoverRef}
style={{ zIndex: 10000 }} style={{ zIndex: baseZIndex + 1 }}
> >
{content} {content}
</div> </div>

8
app/components/Screen/index.tsx
View File

@ -28,9 +28,9 @@ export default function Screen(props: ScreenProps) {
return ( return (
<div <div
className={` className={`
bg-global flex h-[100%] w-[100%] bg-center flex h-[100%] w-[100%] bg-center
max-md:relative max-md:flex-col-reverse max-md:relative max-md:flex-col-reverse max-md:bg-global-mobile
md:overflow-hidden md:overflow-hidden md:bg-global
`} `}
style={{ style={{
direction: getLang() === "ar" ? "rtl" : "ltr", direction: getLang() === "ar" ? "rtl" : "ltr",
@ -54,7 +54,7 @@ export default function Screen(props: ScreenProps) {
className={` className={`
h-[100%] h-[100%]
max-md:w-[100%] max-md:w-[100%]
md:flex-1 md:min-w-0 md:overflow-hidden md:flex-1 md:min-w-0 md:overflow-hidden md:flex
`} `}
id={SlotID.AppBody} id={SlotID.AppBody}
style={{ style={{

14
app/components/Switch/index.tsx
View File

@ -15,11 +15,15 @@ export default function Switch(props: SwitchProps) {
<RadixSwitch.Root <RadixSwitch.Root
checked={value} checked={value}
onCheckedChange={onChange} onCheckedChange={onChange}
className={` cursor-pointer flex w-switch h-switch p-0.5 box-content rounded-md ${switchClassName} ${ className={`
value cursor-pointer flex w-switch h-switch p-0.5 box-content rounded-md
? "bg-switch-checked justify-end" ${switchClassName}
: "bg-switch-unchecked justify-start" ${
}`} value
? "bg-switch-checked justify-end"
: "bg-switch-unchecked justify-start"
}
`}
> >
<RadixSwitch.Thumb <RadixSwitch.Thumb
className={` bg-switch-btn block w-4 h-4 drop-shadow-sm rounded-md`} className={` bg-switch-btn block w-4 h-4 drop-shadow-sm rounded-md`}

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

@ -259,7 +259,7 @@ function _Chat() {
className={` className={`
relative flex flex-col overflow-hidden bg-chat-panel relative flex flex-col overflow-hidden bg-chat-panel
max-md:absolute max-md:h-[100vh] max-md:w-[100%] max-md:absolute max-md:h-[100vh] max-md:w-[100%]
md:h-[calc(100%-1.25rem)] md:my-2.5 md:mr-2.5 md:rounded-md md:h-[100%] md:mr-2.5 md:rounded-md
`} `}
key={session.id} key={session.id}
> >

10
app/containers/Chat/components/ChatActions.tsx
View File

@ -30,6 +30,7 @@ export interface Action {
render?: (key: string) => JSX.Element; render?: (key: string) => JSX.Element;
icon?: JSX.Element; icon?: JSX.Element;
placement: "left" | "right"; placement: "left" | "right";
className?: string;
} }
export function ChatActions(props: { export function ChatActions(props: {
@ -220,7 +221,11 @@ export function ChatActions(props: {
.filter((v) => v.placement === "left" && v.isShow) .filter((v) => v.placement === "left" && v.isShow)
.map((act, ind) => { .map((act, ind) => {
if (act.render) { if (act.render) {
return act.render(act.text); return (
<div className={`${act.className ?? ""}`} key={act.text}>
{act.render(act.text)}
</div>
);
} }
return ( return (
<Popover <Popover
@ -228,9 +233,10 @@ export function ChatActions(props: {
content={act.text} content={act.text}
popoverClassName={`${popoverClassName}`} popoverClassName={`${popoverClassName}`}
placement={ind ? "t" : "lt"} placement={ind ? "t" : "lt"}
className={`${act.className ?? ""}`}
> >
<div <div
className=" cursor-pointer 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} onClick={act.onClick}
> >
{act.icon} {act.icon}

3
app/containers/Chat/components/ChatHeader.tsx
View File

@ -6,7 +6,6 @@ import { DEFAULT_TOPIC, useChatStore } from "@/app/store/chat";
import LogIcon from "@/app/icons/logIcon.svg"; import LogIcon from "@/app/icons/logIcon.svg";
import GobackIcon from "@/app/icons/goback.svg"; import GobackIcon from "@/app/icons/goback.svg";
import ShareIcon from "@/app/icons/shareIcon.svg"; import ShareIcon from "@/app/icons/shareIcon.svg";
import BottomArrow from "@/app/icons/bottomArrow.svg";
import ModelSelect from "./ModelSelect"; import ModelSelect from "./ModelSelect";
export interface ChatHeaderProps { export interface ChatHeaderProps {
@ -79,7 +78,7 @@ export default function ChatHeader(props: ChatHeaderProps) {
</div> </div>
<div <div
className=" cursor-pointer" className=" cursor-pointer hover:bg-hovered-btn p-1.5 rounded-action-btn"
onClick={() => { onClick={() => {
setShowExport(true); setShowExport(true);
}} }}

2
app/containers/Chat/components/ChatInputPanel.tsx
View File

@ -250,7 +250,7 @@ export default forwardRef<ChatInputPanelInstance, ChatInputPanelProps>(
<label <label
className={` className={`
cursor-text flex flex-col bg-chat-panel-input-hood border border-chat-input-hood 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 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 rounded-chat-input p-3 gap-3 max-md:flex-1
md:rounded-md md:p-4 md:gap-4 md:rounded-md md:p-4 md:gap-4
`} `}

4
app/containers/Chat/components/ChatMessagePanel.tsx
View File

@ -180,7 +180,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
)} )}
</div> </div>
<div <div
className={`group relative flex flex ${ className={`group relative flex ${
isUser ? "flex-row-reverse" : "" isUser ? "flex-row-reverse" : ""
}`} }`}
> >
@ -218,7 +218,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
fontSize={fontSize} fontSize={fontSize}
parentRef={scrollRef} parentRef={scrollRef}
defaultShow={i >= messages.length - 6} defaultShow={i >= messages.length - 6}
className={`max-w-message-width ${ className={`leading-6 max-w-message-width ${
isUser isUser
? " text-text-chat-message-markdown-user" ? " text-text-chat-message-markdown-user"
: "text-text-chat-message-markdown-bot" : "text-text-chat-message-markdown-bot"

8
app/containers/Chat/components/ModelSelect.tsx
View File

@ -63,7 +63,9 @@ const ModelSelect = () => {
}; };
const content: TriggerProps["content"] = ({ close }) => ( const content: TriggerProps["content"] = ({ close }) => (
<div className={`flex flex-col gap-1 overflow-x-hidden relative`}> <div
className={`flex flex-col gap-1 overflow-x-hidden relative text-sm-title`}
>
{models?.map((o) => ( {models?.map((o) => (
<div <div
key={o.displayName} key={o.displayName}
@ -125,7 +127,7 @@ const ModelSelect = () => {
placement={ placement={
position?.poi.relativePosition[1] !== Orientation.bottom ? "lb" : "lt" position?.poi.relativePosition[1] !== Orientation.bottom ? "lb" : "lt"
} }
popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover bg-select-popover-panel max-h-chat-actions-select-model-popover !py-0" popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover bg-select-popover-panel max-h-chat-actions-select-model-popover w-[280px]"
onShow={(e) => { onShow={(e) => {
if (e) { if (e) {
autoScrollToSelectedModal(); autoScrollToSelectedModal();
@ -135,7 +137,7 @@ const ModelSelect = () => {
getPopoverPanelRef={(ref) => (contentRef.current = ref.current)} getPopoverPanelRef={(ref) => (contentRef.current = ref.current)}
> >
<div <div
className="flex items-center justify-center gap-1 cursor-pointer rounded-chat-model-select pl-3 pr-2.5 py-2 font-common leading-4 bg-chat-actions-select-model hover:bg-chat-actions-select-model-hover" className="flex items-center justify-center gap-1 cursor-pointer rounded-chat-model-select pl-3 pr-2.5 py-2 font-common leading-4 bg-chat-actions-select-model hover:bg-chat-actions-select-model-hover"
ref={rootRef} ref={rootRef}
> >
<div className="line-clamp-1 max-w-chat-actions-select-model text-sm-title"> <div className="line-clamp-1 max-w-chat-actions-select-model text-sm-title">

116
app/containers/Chat/components/SessionItem.tsx
View File

@ -13,6 +13,7 @@ import DeleteIcon from "@/app/icons/deleteIcon.svg";
import LogIcon from "@/app/icons/logIcon.svg"; import LogIcon from "@/app/icons/logIcon.svg";
import HoverPopover from "@/app/components/HoverPopover"; import HoverPopover from "@/app/components/HoverPopover";
import Popover from "@/app/components/Popover";
export default function SessionItem(props: { export default function SessionItem(props: {
onClick?: () => void; onClick?: () => void;
@ -45,12 +46,16 @@ export default function SessionItem(props: {
className={` className={`
group/chat-menu-list relative flex p-3 items-center gap-2 self-stretch rounded-md mb-2 group/chat-menu-list relative flex p-3 items-center gap-2 self-stretch rounded-md mb-2
border border
bg-chat-menu-session-unselected border-chat-menu-session-unselected cursor-pointer bg-chat-menu-session-unselected-mobile border-chat-menu-session-unselected-mobile
md:bg-chat-menu-session-unselected md:border-chat-menu-session-unselected
${ ${
props.selected && props.selected &&
(currentPath === Path.Chat || currentPath === Path.Home) (currentPath === Path.Chat || currentPath === Path.Home)
? `!bg-chat-menu-session-selected !border-chat-menu-session-selected` ? `
: `hover:bg-chat-menu-session-hovered hover:chat-menu-session-hovered` md:!bg-chat-menu-session-selected md:!border-chat-menu-session-selected
!bg-chat-menu-session-selected-mobile !border-chat-menu-session-selected-mobile
`
: `md:hover:bg-chat-menu-session-hovered md:hover:chat-menu-session-hovered`
} }
`} `}
onClick={props.onClick} onClick={props.onClick}
@ -75,7 +80,7 @@ export default function SessionItem(props: {
{props.title} {props.title}
</div> </div>
<div <div
className={`text-text-chat-menu-item-time text-sm group-hover/chat-menu-list:opacity-0 pl-3`} className={`text-text-chat-menu-item-time text-sm group-hover/chat-menu-list:opacity-0 pl-3 hidden md:block`}
> >
{getTime(props.time)} {getTime(props.time)}
</div> </div>
@ -84,39 +89,82 @@ export default function SessionItem(props: {
{Locale.ChatItem.ChatItemCount(props.count)} {Locale.ChatItem.ChatItemCount(props.count)}
</div> </div>
</div> </div>
<HoverPopover <div
content={ className={`text-text-chat-menu-item-time text-sm pl-3 block md:hidden`}
<div
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
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>
}
popoverClassName={`
px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow
`}
noArrow
align={props.isMobileScreen ? "end" : "start"}
> >
<div {getTime(props.time)}
className={` </div>
!absolute top-[50%] translate-y-[-50%] right-3 pointer-events-none opacity-0 {props.isMobileScreen ? (
group-hover/chat-menu-list:pointer-events-auto <Popover
group-hover/chat-menu-list:opacity-100 content={
hover:bg-select-hover rounded-chat-img <div
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
onClickCapture={(e) => {
props.onDelete?.();
}}
>
<DeleteChatIcon />
<div className="flex-1 font-common text-actions-popover-menu-item text-text-chat-menu-item-delete">
{Locale.Chat.Actions.Delete}
</div>
</div>
}
popoverClassName={`
px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow
`} `}
noArrow
placement="r"
> >
<DeleteIcon /> <div
</div> className={`
</HoverPopover> cursor-pointer rounded-chat-img
md:!absolute md:top-[50%] md:translate-y-[-50%] md:right-3 md:pointer-events-none md:opacity-0
md:group-hover/chat-menu-list:pointer-events-auto
md:group-hover/chat-menu-list:opacity-100
md:hover:bg-select-hover
follow-parent-svg
text-text-chat-menu-item-time
`}
>
<DeleteIcon />
</div>
</Popover>
) : (
<HoverPopover
content={
<div
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
onClickCapture={(e) => {
props.onDelete?.();
e.preventDefault();
e.stopPropagation();
}}
>
<DeleteChatIcon />
<div className="flex-1 font-common text-actions-popover-menu-item text-text-chat-menu-item-delete">
{Locale.Chat.Actions.Delete}
</div>
</div>
}
popoverClassName={`
px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow
`}
noArrow
align="start"
>
<div
className={`
cursor-pointer rounded-chat-img
md:!absolute md:top-[50%] md:translate-y-[-50%] md:right-3 md:pointer-events-none md:opacity-0
md:group-hover/chat-menu-list:pointer-events-auto
md:group-hover/chat-menu-list:opacity-100
md:hover:bg-select-hover
`}
>
<DeleteIcon />
</div>
</HoverPopover>
)}
</div> </div>
)} )}
</Draggable> </Draggable>

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

@ -18,7 +18,7 @@ import ProviderSetting from "./components/ProviderSetting";
import ModelConfigList from "./components/ModelSetting"; import ModelConfigList from "./components/ModelSetting";
export default function Settings(props: MenuWrapperInspectProps) { export default function Settings(props: MenuWrapperInspectProps) {
const { setShowPanel } = props; const { setShowPanel, id } = props;
const navigate = useNavigate(); const navigate = useNavigate();
const accessStore = useAccessStore(); const accessStore = useAccessStore();
@ -49,12 +49,63 @@ export default function Settings(props: MenuWrapperInspectProps) {
const cardClassName = "mb-6 md:mb-8 last:mb-0"; const cardClassName = "mb-6 md:mb-8 last:mb-0";
const itemMap = {
[Locale.Settings.GeneralSettings]: (
<>
<Card className={cardClassName} title={Locale.Settings.Basic.Title}>
<AppSetting />
</Card>
<Card className={cardClassName} title={Locale.Settings.Mask.Title}>
<MaskSetting />
</Card>
<Card className={cardClassName} title={Locale.Settings.Prompt.Title}>
<PromptSetting />
</Card>
<Card className={cardClassName} title={Locale.Settings.Provider.Title}>
<ProviderSetting />
</Card>
<Card className={cardClassName} title={Locale.Settings.Danger.Title}>
<DangerItems />
</Card>
</>
),
[Locale.Settings.ModelSettings]: (
<Card className={cardClassName} title={Locale.Settings.Models.Title}>
<List
widgetStyle={{
// selectClassName: "min-w-select-mobile-lg",
selectClassName: "min-w-select-mobile md:min-w-select",
inputClassName: "md:min-w-select",
rangeClassName: "md:min-w-select",
rangeNextLine: isMobileScreen,
}}
>
<ModelConfigList
modelConfig={config.modelConfig}
updateConfig={(updater) => {
const modelConfig = { ...config.modelConfig };
updater(modelConfig);
config.update((config) => (config.modelConfig = modelConfig));
}}
/>
</List>
</Card>
),
[Locale.Settings.DataSettings]: (
<Card className={cardClassName} title={Locale.Settings.Sync.Title}>
<SyncItems />
</Card>
),
};
return ( return (
<div <div
className={` className={`
flex flex-col overflow-hidden bg-settings-panel flex flex-col overflow-hidden bg-settings-panel
h-setting-panel-mobile h-setting-panel-mobile
md:h-[calc(100%-1.25rem)] md:my-2.5 md:mr-2.5 md:rounded-md md:h-[100%] md:mr-2.5 md:rounded-md
`} `}
> >
<SettingHeader <SettingHeader
@ -78,47 +129,7 @@ export default function Settings(props: MenuWrapperInspectProps) {
overflow-y-auto overflow-y-auto
`} `}
> >
<Card className={cardClassName} title={Locale.Settings.Basic.Title}> {itemMap[id] || null}
<AppSetting />
</Card>
<Card className={cardClassName} title={Locale.Settings.Sync.Title}>
<SyncItems />
</Card>
<Card className={cardClassName} title={Locale.Settings.Mask.Title}>
<MaskSetting />
</Card>
<Card className={cardClassName} title={Locale.Settings.Prompt.Title}>
<PromptSetting />
</Card>
<Card
className={cardClassName}
title={Locale.Settings.Provider.Title}
>
<ProviderSetting />
</Card>
<Card className={cardClassName} title={Locale.Settings.Models.Title}>
<List
widgetStyle={{
// selectClassName: "min-w-select-mobile-lg",
selectClassName: "min-w-select-mobile md:min-w-select",
inputClassName: "md:min-w-select",
rangeClassName: "md:min-w-select",
rangeNextLine: isMobileScreen,
}}
>
<ModelConfigList
modelConfig={config.modelConfig}
updateConfig={(updater) => {
const modelConfig = { ...config.modelConfig };
updater(modelConfig);
config.update((config) => (config.modelConfig = modelConfig));
}}
/>
</List>
</Card>
<Card className={cardClassName} title={Locale.Settings.Danger.Title}>
<DangerItems />
</Card>
</div> </div>
</div> </div>
</div> </div>

2
app/containers/Settings/components/SettingHeader.tsx
View File

@ -36,7 +36,7 @@ export default function SettingHeader(props: ChatHeaderProps) {
<div <div
className={` className={`
line-clamp-1 cursor-pointer text-text-settings-panel-header-title text-chat-header-title font-common 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 max-md:text-sm-title max-md:h-chat-header-title-mobile max-md:leading-5 !font-medium
`} `}
> >
{Locale.Settings.Title} {Locale.Settings.Title}

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

@ -1,3 +1,4 @@
"use client";
import Locale from "@/app/locales"; import Locale from "@/app/locales";
import MenuLayout from "@/app/components/MenuLayout"; import MenuLayout from "@/app/components/MenuLayout";
@ -5,24 +6,38 @@ import Panel from "./SettingPanel";
import GotoIcon from "@/app/icons/goto.svg"; import GotoIcon from "@/app/icons/goto.svg";
import { useAppConfig } from "@/app/store"; import { useAppConfig } from "@/app/store";
import { useState } from "react"; import { useEffect, useState } from "react";
export const list = [
{
id: Locale.Settings.GeneralSettings,
title: Locale.Settings.GeneralSettings,
icon: null,
},
{
id: Locale.Settings.ModelSettings,
title: Locale.Settings.ModelSettings,
icon: null,
},
{
id: Locale.Settings.DataSettings,
title: Locale.Settings.DataSettings,
icon: null,
},
];
export default MenuLayout(function SettingList(props) { export default MenuLayout(function SettingList(props) {
const { setShowPanel } = props; const { setShowPanel, setExternalProps } = props;
const config = useAppConfig(); const config = useAppConfig();
const { isMobileScreen } = config; const { isMobileScreen } = config;
const list = [
{
id: Locale.Settings.GeneralSettings,
title: Locale.Settings.GeneralSettings,
icon: null,
},
];
const [selected, setSelected] = useState(list[0].id); const [selected, setSelected] = useState(list[0].id);
useEffect(() => {
setExternalProps?.(list[0]);
}, []);
return ( return (
<div <div
className={` className={`
@ -39,28 +54,28 @@ export default MenuLayout(function SettingList(props) {
`} `}
data-tauri-drag-region data-tauri-drag-region
> >
<div className="text-setting-title text-text-settings-menu-title font-common font-setting-title"> <div className="text-setting-title text-text-settings-menu-title font-common !font-bold">
{Locale.Settings.Title} {Locale.Settings.Title}
</div> </div>
</div> </div>
</div> </div>
<div <div
className={`flex flex-col overflow-y-auto overflow-x-hidden w-[100%]`} className={`flex flex-col gap-2 overflow-y-auto overflow-x-hidden w-[100%]`}
> >
{list.map((i) => ( {list.map((i) => (
<div <div
key={i.id} key={i.id}
className={` className={`
p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title
cursor-pointer cursor-pointer
border border
rounded-md rounded-md
bg-chat-menu-session-unselected border-chat-menu-session-unselected bg-chat-menu-session-unselected border-chat-menu-session-unselected
${ ${
selected === i.id && !isMobileScreen selected === i.id && !isMobileScreen
? `!bg-chat-menu-session-selected !border-chat-menu-session-selected` ? `!bg-chat-menu-session-selected !border-chat-menu-session-selected !font-medium`
: `hover:bg-chat-menu-session-hovered hover:chat-menu-session-hovered` : `hover:bg-chat-menu-session-hovered hover:chat-menu-session-hovered`
} }
@ -70,6 +85,8 @@ export default MenuLayout(function SettingList(props) {
`} `}
onClick={() => { onClick={() => {
setShowPanel?.(true); setShowPanel?.(true);
setExternalProps?.(i);
setSelected(i.id);
}} }}
> >
{i.title} {i.title}

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

@ -115,7 +115,7 @@ export function SideBar(props: { className?: string }) {
}} }}
selected={selectedTab} selected={selectedTab}
className={` className={`
max-md:bg-sidebar-mobile max-md:rounded-tl-md max-md:rounded-tr-md max-md:h-mobile max-md:justify-around max-md:bg-sidebar-mobile max-md:h-mobile max-md:justify-around
2xl:px-5 xl:px-4 md:px-2 md:py-6 md:flex-col 2xl:px-5 xl:px-4 md:px-2 md:py-6 md:flex-col
`} `}
/> />

2
app/locales/cn.ts
View File

@ -134,6 +134,8 @@ const cn = {
Title: "设置", Title: "设置",
SubTitle: "所有设置选项", SubTitle: "所有设置选项",
GeneralSettings: "通用设置", GeneralSettings: "通用设置",
ModelSettings: "模型设置",
DataSettings: "同步设置",
Basic: { Basic: {
Title: "基础设置", Title: "基础设置",
}, },

2
app/locales/en.ts
View File

@ -138,6 +138,8 @@ const en: LocaleType = {
Title: "Settings", Title: "Settings",
SubTitle: "All Settings", SubTitle: "All Settings",
GeneralSettings: "General settings", GeneralSettings: "General settings",
ModelSettings: "Model settings",
DataSettings: "Sync settings",
Basic: { Basic: {
Title: "Basic Settings", Title: "Basic Settings",
}, },

120
app/styles/base-new.scss
View File

@ -22,14 +22,23 @@ body {
background-color: inherit; background-color: inherit;
} }
.follow-parent-svg {
svg {
*:not(rect) {
fill: currentColor;
}
}
}
--siderbar-mobile-height: 3.125rem; --siderbar-mobile-height: 3.125rem;
--max-message-width: calc(var(--chat-panel-max-width) * 0.6); --max-message-width: calc(var(--chat-panel-max-width) * 0.6);
} }
.light-new { .light-new {
--global-bg: #e3e3ed; --global-bg: #e3e3ed;
--global-mobile-bg: #f0f0f3;
--actions-bar-btn-default-bg: #2e42f3; --actions-bar-btn-default-bg: #2e42f3;
--primary-btn: #2e42f3; --primary-btn-bg: #2e42f3;
--primary-btn-disabled-bg: rgba(60, 68, 255, 0.2); --primary-btn-disabled-bg: rgba(60, 68, 255, 0.2);
--danger-btn-bg: #fff6f6; --danger-btn-bg: #fff6f6;
--default-btn-bg: #f7f7f8; --default-btn-bg: #f7f7f8;
@ -72,16 +81,18 @@ body {
--sidebar-btn-hovered-bg: rgba(0, 0, 0, 0.05); --sidebar-btn-hovered-bg: rgba(0, 0, 0, 0.05);
--delete-chat-popover-panel-bg: #fff; --delete-chat-popover-panel-bg: #fff;
--modal-mask-bg: rgba(0, 0, 0, 0.7); --modal-mask-bg: rgba(0, 0, 0, 0.7);
--moda-panel-bg: #fff; --modal-panel-bg: #fff;
--delete-chat-ok-btn-bg: #ff5454; --delete-chat-ok-btn-bg: #ff5454;
--delete-chat-cancel-btn-bg: #fff; --delete-chat-cancel-btn-bg: #fff;
--chat-message-actions-bg: #fff; --chat-message-actions-bg: #fff;
--menu-dragger-bg: blue; --menu-dragger-bg: #2E42F3;
--chat-actions-select-model-bg: rgba(0, 0, 0, 0.05); --chat-actions-select-model-bg: rgba(0, 0, 0, 0.05);
--chat-actions-select-model-hover-bg: rgba(0, 0, 0, 0.1); --chat-actions-select-model-hover-bg: rgba(0, 0, 0, 0.1);
--select-hover-bg: rgba(0, 0, 0, 0.05); --select-hover-bg: rgba(0, 0, 0, 0.05);
--input-input-ele-hover-bg: rgba(0, 0, 0, 0); --input-input-ele-hover-bg: rgba(0, 0, 0, 0);
--slider-block-hover-bg: #F7F7F8; --slider-block-hover-bg: #F7F7F8;
--chat-menu-session-unselected-mobile-bg:#FFF;
--chat-menu-session-selected-mobile-bg: rgba(0, 0, 0, 0.05);
--select-popover-border: rgba(0, 0, 0, 0.1); --select-popover-border: rgba(0, 0, 0, 0.1);
--slider-block-border: #c9c9d1; --slider-block-border: #c9c9d1;
@ -99,6 +110,8 @@ body {
--chat-menu-session-unselected-border: #f0f0f3; --chat-menu-session-unselected-border: #f0f0f3;
--chat-menu-session-hovered-border: #e2e2e6; --chat-menu-session-hovered-border: #e2e2e6;
--modal-header-bottom-border: #f0f0f3; --modal-header-bottom-border: #f0f0f3;
--chat-menu-session-unselected-mobile-border: #FFF;
--chat-menu-session-selected-mobile-border: rgba(0, 0, 0, 0);
--sidebar-tab-mobile-active-text: #2e42f3; --sidebar-tab-mobile-active-text: #2e42f3;
--sidebar-tab-mobile-inactive-text: #a5a5b3; --sidebar-tab-mobile-inactive-text: #a5a5b3;
@ -126,6 +139,7 @@ body {
--modal-mask-text: #18182a; --modal-mask-text: #18182a;
--delete-chat-ok-btn-text: #fff; --delete-chat-ok-btn-text: #fff;
--delete-chat-cancel-btn-text: #18182a; --delete-chat-cancel-btn-text: #18182a;
--chat-menu-item-delete-text: #FF5454;
--btn-shadow: 0px 4px 10px 0px rgba(60, 68, 255, 0.14); --btn-shadow: 0px 4px 10px 0px rgba(60, 68, 255, 0.14);
--chat-actions-popover-mobile-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12); --chat-actions-popover-mobile-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12);
@ -141,58 +155,61 @@ body {
.dark-new { .dark-new {
--global-bg: #303030; --global-bg: #303030;
--actions-bar-btn-default-bg: #384cfc; --actions-bar-btn-default-bg: #384cfc;
--primary-btn: #384cfc; --primary-btn-bg: #384cfc;
--primary-btn-disabled-bg: rgba(60, 68, 255, 0.2); --primary-btn-disabled-bg: rgba(60, 68, 255, 0.2);
--danger-btn-bg: #20131A; --danger-btn-bg: #20131A;
--default-btn-bg: #1D1D1D; --default-btn-bg: #1D1D1D;
--hovered-btn-bg: rgba(0, 0, 0, 0.05); --hovered-btn-bg: #303030;
--card-bg: #fff; --card-bg: #111;
--input-bg: #f7f7f8; --input-bg: #1D1D1D;
--list-item-divider-bg: #f0f0f3; --list-item-divider-bg: #303030;
--menu-bg: #f7f7f8; --menu-bg: #1D1D1D;
--select-option-hovered-bg: rgba(0, 0, 0, 0.05); --select-option-hovered-bg: rgba(255, 255, 255, 0.05);
--select-popover-panel-bg: #fff; --select-popover-panel-bg: #1D1D1D;
--select-bg: #f7f7f8; --select-bg: #1D1D1D;
--slider-bg: #f0f0f3; --slider-bg: #303030;
--slider-slided-travel-bg: #88889a; --slider-slided-travel-bg: #B0B0B0;
--slider-block-bg: #fff; --slider-block-bg: #111;
--switch-unchecked-bg: #c9c9d1; --switch-unchecked-bg: #303030;
--switch-checked-bg: #2e42f3; --switch-checked-bg: #384CFC;
--switch-btn-bg: #fff; --switch-btn-bg: #111;
--chat-actions-popover-panel-mobile-bg: #fff; --chat-actions-popover-panel-mobile-bg: #111;
--chat-actions-btn-popover-bg: #434360; --chat-actions-btn-popover-bg: #F0F0F0;
--chat-actions-btn-hovered-bg: rgba(0, 0, 0, 0.05); --chat-actions-btn-hovered-bg: rgba(255, 255, 255, 0.05);
--chat-panel-header-mask-bg: #f7f7f8; --chat-panel-header-mask-bg: #1D1D1D;
--chat-panel-header-mobile-bg: #fff; --chat-panel-header-mobile-bg: #111;
--chat-panel-input-hood-bg: #fff; --chat-panel-input-hood-bg: #111;
--chat-panel-message-user-bg: #4a5cff; --chat-panel-message-user-bg: #4a5cff;
--chat-panel-message-bot-bg: #fff; --chat-panel-message-bot-bg: #111;
--chat-panel-message-bg: #f7f7f8; --chat-panel-message-bg: #1D1D1D;
--chat-panel-message-mobile-bg: #f0f0f3; --chat-panel-message-mobile-bg: #303030;
--chat-message-actions-btn-hovered-bg: rgba(0, 0, 0, 0.05); --chat-message-actions-btn-hovered-bg: rgba(255, 255, 255, 0.05);
--chat-panel-bg: #f7f7f8; --chat-panel-bg: #1D1D1D;
--chat-panel-message-clear-divider-bg: #e2e2e6; --chat-panel-message-clear-divider-bg: #e2e2e6; //////////
--chat-menu-session-selected-bg: #dee1fd; --chat-menu-session-selected-bg: #182455;
--chat-menu-session-unselected-bg: #f0f0f3; --chat-menu-session-unselected-bg: #303030;
--chat-menu-session-hovered-bg: #e2e2e6; --chat-menu-session-hovered-bg: #404040;
--settings-menu-mobile-bg: #f7f7f8; --settings-menu-mobile-bg: #1D1D1D;
--settings-menu-item-mobile-bg: #fff; --settings-menu-item-mobile-bg: #111;
--settings-menu-item-selected-bg: #dee1fd; --settings-menu-item-selected-bg: #182455;
--settings-header-mobile-bg: #fff; --settings-header-mobile-bg: #111;
--settings-panel-bg: #f7f7f8; --settings-panel-bg: #1D1D1D;
--sidebar-mobile-bg: #fff; --sidebar-mobile-bg: #111;
--sidebar-btn-hovered-bg: rgba(0, 0, 0, 0.05); --sidebar-btn-hovered-bg: rgba(255, 255, 255, 0.05);
--delete-chat-popover-panel-bg: #fff; --delete-chat-popover-panel-bg: #111;
--modal-mask-bg: rgba(0, 0, 0, 0.7); --modal-mask-bg: rgba(0, 0, 0, 0.85);
--moda-panel-bg: #fff; --modal-panel-bg: #111;
--delete-chat-ok-btn-bg: #ff5454; --delete-chat-ok-btn-bg: #F55151;
--delete-chat-cancel-btn-bg: #fff; --delete-chat-cancel-btn-bg: #404040;
--chat-message-actions-bg: #fff; --chat-message-actions-bg: rgba(255, 255, 255, 0);
--menu-dragger-bg: blue; --menu-dragger-bg: #2E42F3; ///////////
--chat-actions-select-model-bg: rgba(0, 0, 0, 0.05); --chat-actions-select-model-bg: rgba(255, 255, 255, 0.05);
--chat-actions-select-model-hover-bg: rgba(0, 0, 0, 0.1); --chat-actions-select-model-hover-bg: rgba(255, 255, 255, 0.1);
--select-hover-bg: rgba(0, 0, 0, 0.05); --select-hover-bg: #303030;
--input-input-ele-hover-bg: rgba(0, 0, 0, 0); --input-input-ele-hover-bg: rgba(0, 0, 0, 0);
--chat-menu-session-unselected-mobile-bg:#111;
--chat-menu-session-selected-mobile-bg: rgba(0, 0, 0, 0.05);////////////
--global-mobile-bg: #303030;
--select-popover-border: rgba(0, 0, 0, 0.1); --select-popover-border: rgba(0, 0, 0, 0.1);
--slider-block-border: #c9c9d1; --slider-block-border: #c9c9d1;
@ -210,6 +227,8 @@ body {
--chat-menu-session-unselected-border: #f0f0f3; --chat-menu-session-unselected-border: #f0f0f3;
--chat-menu-session-hovered-border: #e2e2e6; --chat-menu-session-hovered-border: #e2e2e6;
--modal-header-bottom-border: #f0f0f3; --modal-header-bottom-border: #f0f0f3;
--chat-menu-session-unselected-mobile-border: #FFF;
--chat-menu-session-selected-mobile-border: rgba(0, 0, 0, 0.05);
--sidebar-tab-mobile-active-text: #2e42f3; --sidebar-tab-mobile-active-text: #2e42f3;
--sidebar-tab-mobile-inactive-text: #a5a5b3; --sidebar-tab-mobile-inactive-text: #a5a5b3;
@ -237,6 +256,7 @@ body {
--modal-mask-text: #18182a; --modal-mask-text: #18182a;
--delete-chat-ok-btn-text: #fff; --delete-chat-ok-btn-text: #fff;
--delete-chat-cancel-btn-text: #18182a; --delete-chat-cancel-btn-text: #18182a;
--chat-menu-item-delete-text: #FF5454;
--btn-shadow: 0px 4px 10px 0px rgba(60, 68, 255, 0.14); --btn-shadow: 0px 4px 10px 0px rgba(60, 68, 255, 0.14);
--chat-actions-popover-mobile-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12); --chat-actions-popover-mobile-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12);

18
tailwind.config.js
View File

@ -21,10 +21,6 @@ module.exports = {
'setting-title': '1.25rem', 'setting-title': '1.25rem',
'setting-items': '1rem', 'setting-items': '1rem',
}, },
fontWeight: {
'setting-title': '700',
'setting-card-title': '600',
},
fontFamily: { fontFamily: {
'common': ['Satoshi Variable', "SF Pro Text", "SF Pro Icons", "Helvetica Neue", 'Helvetica', 'Arial', 'sans-serif'], 'common': ['Satoshi Variable', "SF Pro Text", "SF Pro Icons", "Helvetica Neue", 'Helvetica', 'Arial', 'sans-serif'],
'time': ['Hind', "SF Pro Text", "SF Pro Icons", "Helvetica Neue", 'Helvetica', 'Arial', 'sans-serif'], 'time': ['Hind', "SF Pro Text", "SF Pro Icons", "Helvetica Neue", 'Helvetica', 'Arial', 'sans-serif'],
@ -71,7 +67,7 @@ module.exports = {
'page': 'calc(100% - var(--menu-width))', 'page': 'calc(100% - var(--menu-width))',
'thumbnail': '5rem', 'thumbnail': '5rem',
'actions-popover': '203px', 'actions-popover': '203px',
'switch': '2.25rem', 'switch': '2rem',
'modal-modal-type': '26.25rem', 'modal-modal-type': '26.25rem',
'modal-modal-type-mobile': 'calc(100vw - 2 * 44px)', 'modal-modal-type-mobile': 'calc(100vw - 2 * 44px)',
}, },
@ -87,6 +83,7 @@ module.exports = {
}, },
backgroundColor: { backgroundColor: {
'global': 'var(--global-bg)', 'global': 'var(--global-bg)',
'global-mobile': 'var(--global-mobile-bg)',
'actions-bar-btn-default': 'var(--actions-bar-btn-default-bg)', 'actions-bar-btn-default': 'var(--actions-bar-btn-default-bg)',
'primary-btn': 'var(--primary-btn-bg)', 'primary-btn': 'var(--primary-btn-bg)',
'primary-btn-disabled': 'var(--primary-btn-disabled-bg)', 'primary-btn-disabled': 'var(--primary-btn-disabled-bg)',
@ -122,7 +119,9 @@ module.exports = {
'chat-panel': 'var(--chat-panel-bg)', 'chat-panel': 'var(--chat-panel-bg)',
'chat-panel-message-clear-divider': 'var(--chat-panel-message-clear-divider-bg)', 'chat-panel-message-clear-divider': 'var(--chat-panel-message-clear-divider-bg)',
'chat-menu-session-selected': 'var(--chat-menu-session-selected-bg)', 'chat-menu-session-selected': 'var(--chat-menu-session-selected-bg)',
'chat-menu-session-selected-mobile': 'var(--chat-menu-session-selected-mobile-bg)',
'chat-menu-session-unselected': 'var(--chat-menu-session-unselected-bg)', 'chat-menu-session-unselected': 'var(--chat-menu-session-unselected-bg)',
'chat-menu-session-unselected-mobile': 'var(--chat-menu-session-unselected-mobile-bg)',
'chat-menu-session-hovered': 'var(--chat-menu-session-hovered-bg)', 'chat-menu-session-hovered': 'var(--chat-menu-session-hovered-bg)',
'settings-menu-mobile': 'var(--settings-menu-mobile-bg)', 'settings-menu-mobile': 'var(--settings-menu-mobile-bg)',
'settings-menu-item-mobile': 'var(--settings-menu-item-mobile-bg)', 'settings-menu-item-mobile': 'var(--settings-menu-item-mobile-bg)',
@ -133,7 +132,7 @@ module.exports = {
'sidebar-btn-hovered': 'var(--sidebar-btn-hovered-bg)', 'sidebar-btn-hovered': 'var(--sidebar-btn-hovered-bg)',
'delete-chat-popover-panel': 'var(--delete-chat-popover-panel-bg)', 'delete-chat-popover-panel': 'var(--delete-chat-popover-panel-bg)',
'modal-mask': 'var(--modal-mask-bg)', 'modal-mask': 'var(--modal-mask-bg)',
'moda-panel': 'var(--moda-panel-bg)', 'moda-panel': 'var(--modal-panel-bg)',
'delete-chat-ok-btn': 'var(--delete-chat-ok-btn-bg)', 'delete-chat-ok-btn': 'var(--delete-chat-ok-btn-bg)',
'delete-chat-cancel-btn': 'var(--delete-chat-cancel-btn-bg)', 'delete-chat-cancel-btn': 'var(--delete-chat-cancel-btn-bg)',
'menu-dragger': 'var(--menu-dragger-bg)', 'menu-dragger': 'var(--menu-dragger-bg)',
@ -155,7 +154,7 @@ module.exports = {
}, },
maxWidth: { maxWidth: {
'message-width': 'var(--max-message-width)', 'message-width': 'var(--max-message-width)',
'chat-actions-select-model': '82px', 'chat-actions-select-model': '282px',
}, },
boxShadow: { boxShadow: {
'btn': 'var(--btn-shadow)', 'btn': 'var(--btn-shadow)',
@ -176,12 +175,14 @@ module.exports = {
'chat-input-top': 'var(--chat-input-top-border)', 'chat-input-top': 'var(--chat-input-top-border)',
'chat-input-hood': 'var(--chat-input-hood-border)', 'chat-input-hood': 'var(--chat-input-hood-border)',
'chat-input-hood-focus': 'var(--chat-input-hood-focus-border)', 'chat-input-hood-focus': 'var(--chat-input-hood-focus-border)',
'chat-menu-session-selected': 'var(--chat-menu-session-selected-border)',
'settings-menu-item-selected': 'var(--settings-menu-item-selected-border)', 'settings-menu-item-selected': 'var(--settings-menu-item-selected-border)',
'settings-header': 'var(--settings-header-border)', 'settings-header': 'var(--settings-header-border)',
'delete-chat-popover': 'var(--delete-chat-popover-border)', 'delete-chat-popover': 'var(--delete-chat-popover-border)',
'delete-chat-cancel-btn': 'var(--delete-chat-cancel-btn-border)', 'delete-chat-cancel-btn': 'var(--delete-chat-cancel-btn-border)',
'chat-menu-session-selected': 'var(--chat-menu-session-selected-border)',
'chat-menu-session-selected-mobile': 'var(--chat-menu-session-selected-mobile-border)',
'chat-menu-session-unselected': 'var(--chat-menu-session-unselected-border)', 'chat-menu-session-unselected': 'var(--chat-menu-session-unselected-border)',
'chat-menu-session-unselected-mobile': 'var(--chat-menu-session-unselected-mobile-border)',
'chat-menu-session-hovered': 'var(--chat-menu-session-hovered-border)', 'chat-menu-session-hovered': 'var(--chat-menu-session-hovered-border)',
'modal-header-bottom': 'var(--modal-header-bottom-border)', 'modal-header-bottom': 'var(--modal-header-bottom-border)',
@ -204,6 +205,7 @@ module.exports = {
'text-chat-panel-message-clear-revert': 'var(--chat-panel-message-clear-revert-text)', 'text-chat-panel-message-clear-revert': 'var(--chat-panel-message-clear-revert-text)',
'text-chat-menu-item-title': 'var(--chat-menu-item-title-text)', 'text-chat-menu-item-title': 'var(--chat-menu-item-title-text)',
'text-chat-menu-item-time': 'var(--chat-menu-item-time-text)', 'text-chat-menu-item-time': 'var(--chat-menu-item-time-text)',
'text-chat-menu-item-delete': 'var(--chat-menu-item-delete-text)',
'text-chat-menu-item-description': 'var(--chat-menu-item-description-text)', 'text-chat-menu-item-description': 'var(--chat-menu-item-description-text)',
'text-settings-menu-title': 'var(--settings-menu-title-text)', 'text-settings-menu-title': 'var(--settings-menu-title-text)',
'text-settings-menu-item-title': 'var(--settings-menu-item-title-text)', 'text-settings-menu-item-title': 'var(--settings-menu-item-title-text)',