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 && (
<div
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
ml-3

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

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

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

@ -1,4 +1,3 @@
import { useNavigate } from "react-router-dom";
import {
DEFAULT_SIDEBAR_WIDTH,
MAX_SIDEBAR_WIDTH,
@ -9,13 +8,13 @@ import useDrag from "@/app/hooks/useDrag";
import useMobileScreen from "@/app/hooks/useMobileScreen";
import { updateGlobalCSSVars } from "@/app/utils/client";
import { ComponentType, useRef, useState } from "react";
import DragIcon from "@/app/icons/drag.svg";
import { useAppConfig } from "@/app/store/config";
export interface MenuWrapperInspectProps {
setExternalProps?: (v: Record<string, any>) => void;
setShowPanel?: (v: boolean) => void;
showPanel?: boolean;
[k: string]: any;
}
export default function MenuLayout<
@ -27,8 +26,7 @@ export default function MenuLayout<
) {
return function MenuHood(props: ListComponentProps & PanelComponentProps) {
const [showPanel, setShowPanel] = useState(false);
const navigate = useNavigate();
const [externalProps, setExternalProps] = useState({});
const config = useAppConfig();
const isMobileScreen = useMobileScreen();
@ -62,38 +60,34 @@ export default function MenuLayout<
return (
<div
className={`
h-[100%] w-[100%] relative bg-center
md:flex
`}
w-[100%] relative bg-center
md:flex md:my-2.5
`}
>
<div
className={`
flex flex-col px-6
h-[100%]
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
{...props}
setShowPanel={setShowPanel}
setExternalProps={setExternalProps}
showPanel={showPanel}
/>
</div>
{!isMobileScreen && (
<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) => {
startDragWidth.current = config.sidebarWidth;
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;
</div>
</div>
@ -108,7 +102,9 @@ export default function MenuLayout<
>
<PanelComponent
{...props}
{...externalProps}
setShowPanel={setShowPanel}
setExternalProps={setExternalProps}
showPanel={showPanel}
/>
</div>

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

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

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

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

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

@ -15,11 +15,15 @@ export default function Switch(props: SwitchProps) {
<RadixSwitch.Root
checked={value}
onCheckedChange={onChange}
className={` cursor-pointer flex w-switch h-switch p-0.5 box-content rounded-md ${switchClassName} ${
value
? "bg-switch-checked justify-end"
: "bg-switch-unchecked justify-start"
}`}
className={`
cursor-pointer flex w-switch h-switch p-0.5 box-content rounded-md
${switchClassName}
${
value
? "bg-switch-checked justify-end"
: "bg-switch-unchecked justify-start"
}
`}
>
<RadixSwitch.Thumb
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={`
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:mr-2.5 md:rounded-md
md:h-[100%] md:mr-2.5 md:rounded-md
`}
key={session.id}
>

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

@ -30,6 +30,7 @@ export interface Action {
render?: (key: string) => JSX.Element;
icon?: JSX.Element;
placement: "left" | "right";
className?: string;
}
export function ChatActions(props: {
@ -220,7 +221,11 @@ export function ChatActions(props: {
.filter((v) => v.placement === "left" && v.isShow)
.map((act, ind) => {
if (act.render) {
return act.render(act.text);
return (
<div className={`${act.className ?? ""}`} key={act.text}>
{act.render(act.text)}
</div>
);
}
return (
<Popover
@ -228,9 +233,10 @@ export function ChatActions(props: {
content={act.text}
popoverClassName={`${popoverClassName}`}
placement={ind ? "t" : "lt"}
className={`${act.className ?? ""}`}
>
<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}
>
{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 GobackIcon from "@/app/icons/goback.svg";
import ShareIcon from "@/app/icons/shareIcon.svg";
import BottomArrow from "@/app/icons/bottomArrow.svg";
import ModelSelect from "./ModelSelect";
export interface ChatHeaderProps {
@ -79,7 +78,7 @@ export default function ChatHeader(props: ChatHeaderProps) {
</div>
<div
className=" cursor-pointer"
className=" cursor-pointer hover:bg-hovered-btn p-1.5 rounded-action-btn"
onClick={() => {
setShowExport(true);
}}

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

@ -250,7 +250,7 @@ export default forwardRef<ChatInputPanelInstance, ChatInputPanelProps>(
<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
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
`}

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

@ -180,7 +180,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
)}
</div>
<div
className={`group relative flex flex ${
className={`group relative flex ${
isUser ? "flex-row-reverse" : ""
}`}
>
@ -218,7 +218,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
fontSize={fontSize}
parentRef={scrollRef}
defaultShow={i >= messages.length - 6}
className={`max-w-message-width ${
className={`leading-6 max-w-message-width ${
isUser
? " text-text-chat-message-markdown-user"
: "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 }) => (
<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) => (
<div
key={o.displayName}
@ -125,7 +127,7 @@ const ModelSelect = () => {
placement={
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) => {
if (e) {
autoScrollToSelectedModal();
@ -135,7 +137,7 @@ const ModelSelect = () => {
getPopoverPanelRef={(ref) => (contentRef.current = ref.current)}
>
<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}
>
<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 HoverPopover from "@/app/components/HoverPopover";
import Popover from "@/app/components/Popover";
export default function SessionItem(props: {
onClick?: () => void;
@ -45,12 +46,16 @@ export default function SessionItem(props: {
className={`
group/chat-menu-list relative flex p-3 items-center gap-2 self-stretch rounded-md mb-2
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 &&
(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}
@ -75,7 +80,7 @@ export default function SessionItem(props: {
{props.title}
</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)}
</div>
@ -84,39 +89,82 @@ export default function SessionItem(props: {
{Locale.ChatItem.ChatItemCount(props.count)}
</div>
</div>
<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">
{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
className={`text-text-chat-menu-item-time text-sm pl-3 block md:hidden`}
>
<div
className={`
!absolute top-[50%] translate-y-[-50%] right-3 pointer-events-none opacity-0
group-hover/chat-menu-list:pointer-events-auto
group-hover/chat-menu-list:opacity-100
hover:bg-select-hover rounded-chat-img
{getTime(props.time)}
</div>
{props.isMobileScreen ? (
<Popover
content={
<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>
</HoverPopover>
<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
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>
)}
</Draggable>

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

@ -18,7 +18,7 @@ import ProviderSetting from "./components/ProviderSetting";
import ModelConfigList from "./components/ModelSetting";
export default function Settings(props: MenuWrapperInspectProps) {
const { setShowPanel } = props;
const { setShowPanel, id } = props;
const navigate = useNavigate();
const accessStore = useAccessStore();
@ -49,12 +49,63 @@ export default function Settings(props: MenuWrapperInspectProps) {
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 (
<div
className={`
flex flex-col overflow-hidden bg-settings-panel
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
@ -78,47 +129,7 @@ export default function Settings(props: MenuWrapperInspectProps) {
overflow-y-auto
`}
>
<Card className={cardClassName} title={Locale.Settings.Basic.Title}>
<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>
{itemMap[id] || null}
</div>
</div>
</div>

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

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

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

@ -1,3 +1,4 @@
"use client";
import Locale from "@/app/locales";
import MenuLayout from "@/app/components/MenuLayout";
@ -5,24 +6,38 @@ import Panel from "./SettingPanel";
import GotoIcon from "@/app/icons/goto.svg";
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) {
const { setShowPanel } = props;
const { setShowPanel, setExternalProps } = props;
const config = useAppConfig();
const { isMobileScreen } = config;
const list = [
{
id: Locale.Settings.GeneralSettings,
title: Locale.Settings.GeneralSettings,
icon: null,
},
];
const [selected, setSelected] = useState(list[0].id);
useEffect(() => {
setExternalProps?.(list[0]);
}, []);
return (
<div
className={`
@ -39,28 +54,28 @@ export default MenuLayout(function SettingList(props) {
`}
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}
</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) => (
<div
key={i.id}
className={`
p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title
cursor-pointer
cursor-pointer
border
rounded-md
bg-chat-menu-session-unselected border-chat-menu-session-unselected
${
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`
}
@ -70,6 +85,8 @@ export default MenuLayout(function SettingList(props) {
`}
onClick={() => {
setShowPanel?.(true);
setExternalProps?.(i);
setSelected(i.id);
}}
>
{i.title}

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

@ -115,7 +115,7 @@ export function SideBar(props: { className?: string }) {
}}
selected={selectedTab}
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
`}
/>

2
app/locales/cn.ts
View File

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

2
app/locales/en.ts
View File

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

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

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

18
tailwind.config.js
View File

@ -21,10 +21,6 @@ module.exports = {
'setting-title': '1.25rem',
'setting-items': '1rem',
},
fontWeight: {
'setting-title': '700',
'setting-card-title': '600',
},
fontFamily: {
'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'],
@ -71,7 +67,7 @@ module.exports = {
'page': 'calc(100% - var(--menu-width))',
'thumbnail': '5rem',
'actions-popover': '203px',
'switch': '2.25rem',
'switch': '2rem',
'modal-modal-type': '26.25rem',
'modal-modal-type-mobile': 'calc(100vw - 2 * 44px)',
},
@ -87,6 +83,7 @@ module.exports = {
},
backgroundColor: {
'global': 'var(--global-bg)',
'global-mobile': 'var(--global-mobile-bg)',
'actions-bar-btn-default': 'var(--actions-bar-btn-default-bg)',
'primary-btn': 'var(--primary-btn-bg)',
'primary-btn-disabled': 'var(--primary-btn-disabled-bg)',
@ -122,7 +119,9 @@ module.exports = {
'chat-panel': 'var(--chat-panel-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-mobile': 'var(--chat-menu-session-selected-mobile-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)',
'settings-menu-mobile': 'var(--settings-menu-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)',
'delete-chat-popover-panel': 'var(--delete-chat-popover-panel-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-cancel-btn': 'var(--delete-chat-cancel-btn-bg)',
'menu-dragger': 'var(--menu-dragger-bg)',
@ -155,7 +154,7 @@ module.exports = {
},
maxWidth: {
'message-width': 'var(--max-message-width)',
'chat-actions-select-model': '82px',
'chat-actions-select-model': '282px',
},
boxShadow: {
'btn': 'var(--btn-shadow)',
@ -176,12 +175,14 @@ module.exports = {
'chat-input-top': 'var(--chat-input-top-border)',
'chat-input-hood': 'var(--chat-input-hood-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-header': 'var(--settings-header-border)',
'delete-chat-popover': 'var(--delete-chat-popover-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-mobile': 'var(--chat-menu-session-unselected-mobile-border)',
'chat-menu-session-hovered': 'var(--chat-menu-session-hovered-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-menu-item-title': 'var(--chat-menu-item-title-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-settings-menu-title': 'var(--settings-menu-title-text)',
'text-settings-menu-item-title': 'var(--settings-menu-item-title-text)',