feat: complete the missing UI

This commit is contained in:
butterfly 2024-04-30 12:37:28 +08:00
parent 996537d262
commit c3d91bf0cd
21 changed files with 381 additions and 284 deletions

View File

@ -5,6 +5,7 @@ export type ButtonType = "primary" | "danger" | null;
export interface BtnProps {
onClick?: () => void;
icon?: JSX.Element;
prefixIcon?: JSX.Element;
type?: ButtonType;
text?: React.ReactNode;
bordered?: boolean;
@ -27,6 +28,7 @@ export default function Btn(props: BtnProps) {
disabled,
tabIndex,
autoFocus,
prefixIcon,
} = props;
let btnClassName;
@ -61,6 +63,9 @@ export default function Btn(props: BtnProps) {
tabIndex={tabIndex}
autoFocus={autoFocus}
>
{prefixIcon && (
<div className={`flex items-center justify-center`}>{prefixIcon}</div>
)}
{text && (
<div className={`font-common text-sm-title leading-4 line-clamp-1`}>
{text}

View File

@ -8,7 +8,7 @@ import {
useLayoutEffect,
useState,
} from "react";
import List from "@/app/components/List";
import List, { ListContext } from "@/app/components/List";
export interface CommonInputProps
extends Omit<
@ -45,6 +45,8 @@ export default function Input(props: CommonInputProps & InputProps) {
const { value, type = "text", onChange, className, ...rest } = props;
const [show, setShow] = useState(false);
const { inputClassName } = useContext(ListContext);
const internalType = (show && "text") || type;
const { update } = useContext(List.ListContext);
@ -55,7 +57,7 @@ export default function Input(props: CommonInputProps & InputProps) {
return (
<div
className={` group/input w-[100%] rounded-chat-input bg-input flex gap-3 items-center px-3 py-2 ${className} hover:bg-select-hover`}
className={` group/input w-[100%] rounded-chat-input bg-input flex gap-3 items-center px-3 py-2 ${className} hover:bg-select-hover ${inputClassName}`}
>
<input
{...rest}

View File

@ -215,7 +215,18 @@ const Modal = (props: ModalProps) => {
</div>
)}
</div>
{type === "modal" && <div className="flex-1">&nbsp;</div>}
{type === "modal" && (
<div
className="flex-1"
onClick={() => {
if (maskCloseble) {
handleClose();
}
}}
>
&nbsp;
</div>
)}
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>

View File

@ -74,7 +74,7 @@ export default function SlideRange(props: SlideRangeProps) {
&nbsp;
</div>
<div
className="cursor-pointer absolute z-1 w-[30px] top-[50%] translate-y-[-50%] left-[var(--slide-value-size)] translate-x-[-50%] h-slide-btn leading-slide-btn text-sm-mobile text-center rounded-slide border border-slider-block bg-slider-block"
className="cursor-pointer absolute z-1 w-[30px] top-[50%] translate-y-[-50%] left-[var(--slide-value-size)] translate-x-[-50%] h-slide-btn leading-slide-btn text-sm-mobile text-center rounded-slide border border-slider-block bg-slider-block hover:bg-slider-block-hover"
// onPointerDown={onPointerDown}
>
{value}

View File

@ -47,7 +47,7 @@ export default function Settings(props: MenuWrapperInspectProps) {
const clientConfig = useMemo(() => getClientConfig(), []);
const cardClassName = "mb-6 md:max-w-setting-list md:mb-8";
const cardClassName = "mb-6 md:max-w-setting-list md:mb-8 last:mb-0";
return (
<div
@ -63,9 +63,17 @@ export default function Settings(props: MenuWrapperInspectProps) {
/>
<div
className={`
!overflow-x-hidden
max-md:gap-5 max-md:w-[100%] px-4 py-5
max-md:w-[100%]
px-4 py-5
md:px-6 md:py-8
flex items-start justify-center
overflow-y-auto
`}
>
<div
className={`
!overflow-x-hidden
overflow-y-auto
`}
>
<Card className={cardClassName} title={Locale.Settings.Basic.Title}>
@ -80,13 +88,19 @@ export default function Settings(props: MenuWrapperInspectProps) {
<Card className={cardClassName} title={Locale.Settings.Prompt.Title}>
<PromptSetting />
</Card>
<Card className={cardClassName}>
<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-lg",
selectClassName: "min-w-select-mobile md:min-w-select",
inputClassName: "md:min-w-select",
rangeClassName: "md:min-w-select",
rangeNextLine: isMobileScreen,
}}
>
@ -105,5 +119,6 @@ export default function Settings(props: MenuWrapperInspectProps) {
</Card>
</div>
</div>
</div>
);
}

View File

@ -63,6 +63,8 @@ export default function AppSetting(props: AppSettingProps) {
<List
widgetStyle={{
selectClassName: "min-w-select-mobile md:min-w-select",
inputClassName: "md:min-w-select",
rangeClassName: "md:min-w-select",
rangeNextLine: isMobileScreen,
}}
>

View File

@ -71,6 +71,9 @@ export default function DangerItems() {
return (
<List
widgetStyle={{
selectClassName: "min-w-select-mobile md:min-w-select",
inputClassName: "md:min-w-select",
rangeClassName: "md:min-w-select",
rangeNextLine: isMobileScreen,
inputNextLine: isMobileScreen,
}}

View File

@ -8,6 +8,8 @@ import { SearchService, usePromptStore } from "@/app/store/prompt";
import Switch from "@/app/components/Switch";
import Btn from "@/app/components/Btn";
import EditIcon from "@/app/icons/editIcon.svg";
export interface PromptSettingProps {}
export default function PromptSetting(props: PromptSettingProps) {
@ -48,6 +50,7 @@ export default function PromptSetting(props: PromptSettingProps) {
text={
<span className={textStyle}>{Locale.Settings.Prompt.Edit}</span>
}
prefixIcon={config.isMobileScreen ? undefined : <EditIcon />}
></Btn>
</div>
</ListItem>

View File

@ -26,6 +26,9 @@ export default function ProviderSetting() {
<List
id={SlotID.CustomModel}
widgetStyle={{
selectClassName: "min-w-select-mobile md:min-w-select",
inputClassName: "md:min-w-select",
rangeClassName: "md:min-w-select",
inputNextLine: isMobileScreen,
}}
>

View File

@ -1,3 +1,8 @@
import ConfigIcon from "@/app/icons/configIcon2.svg";
import ExportIcon from "@/app/icons/exportIcon.svg";
import ImportIcon from "@/app/icons/importIcon.svg";
import SyncIcon from "@/app/icons/syncIcon.svg";
import { showToast } from "@/app/components/ui-lib";
import { useChatStore } from "@/app/store/chat";
import { useMaskStore } from "@/app/store/mask";
@ -9,6 +14,7 @@ import Locale from "@/app/locales";
import SyncConfigModal from "./SyncConfigModal";
import List, { ListItem } from "@/app/components/List";
import Btn from "@/app/components/Btn";
import { useAppConfig } from "@/app/store";
export default function SyncItems() {
const syncStore = useSyncStore();
@ -19,6 +25,8 @@ export default function SyncItems() {
return syncStore.cloudSync();
}, [syncStore]);
const { isMobileScreen } = useAppConfig();
const [showSyncConfigModal, setShowSyncConfigModal] = useState(false);
const stateOverview = useMemo(() => {
@ -53,6 +61,7 @@ export default function SyncItems() {
setShowSyncConfigModal(true);
}}
text={<span className={textStyle}>{Locale.UI.Config}</span>}
prefixIcon={isMobileScreen ? undefined : <ConfigIcon />}
></Btn>
{couldSync && (
<Btn
@ -66,6 +75,7 @@ export default function SyncItems() {
}
}}
text={<span className={textStyle}>{Locale.UI.Sync}</span>}
prefixIcon={<SyncIcon />}
></Btn>
)}
</div>
@ -81,12 +91,14 @@ export default function SyncItems() {
syncStore.export();
}}
text={<span className={textStyle}>{Locale.UI.Export}</span>}
prefixIcon={<ExportIcon />}
></Btn>
<Btn
onClick={async () => {
syncStore.import();
}}
text={<span className={textStyle}>{Locale.UI.Import}</span>}
prefixIcon={<ImportIcon />}
></Btn>
</div>
</ListItem>

View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0667 3.33315C10.0667 3.00178 10.3353 2.73315 10.6667 2.73315H14.6667C14.998 2.73315 15.2667 3.00178 15.2667 3.33315C15.2667 3.66453 14.998 3.93315 14.6667 3.93315H10.6667C10.3353 3.93315 10.0667 3.66453 10.0667 3.33315Z" fill="#606078"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.733276 3.33315C0.733276 3.00178 1.00191 2.73315 1.33328 2.73315H3.99994C4.33131 2.73315 4.59994 3.00178 4.59994 3.33315C4.59994 3.66453 4.33131 3.93315 3.99994 3.93315H1.33328C1.00191 3.93315 0.733276 3.66453 0.733276 3.33315Z" fill="#606078"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66661 1.5999C5.70932 1.5999 4.93328 2.37594 4.93328 3.33324C4.93328 4.29053 5.70932 5.06657 6.66661 5.06657C7.6239 5.06657 8.39994 4.29053 8.39994 3.33324C8.39994 2.37594 7.6239 1.5999 6.66661 1.5999ZM3.73328 3.33324C3.73328 1.7132 5.04657 0.399902 6.66661 0.399902C8.28665 0.399902 9.59994 1.7132 9.59994 3.33324C9.59994 4.95327 8.28665 6.26657 6.66661 6.26657C5.04657 6.26657 3.73328 4.95327 3.73328 3.33324Z" fill="#606078"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3999 10.6667C11.3999 10.3353 11.6685 10.0667 11.9999 10.0667H14.6666C14.9979 10.0667 15.2666 10.3353 15.2666 10.6667C15.2666 10.998 14.9979 11.2667 14.6666 11.2667H11.9999C11.6685 11.2667 11.3999 10.998 11.3999 10.6667Z" fill="#606078"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.733276 10.6667C0.733276 10.3353 1.00191 10.0667 1.33328 10.0667H5.33328C5.66465 10.0667 5.93328 10.3353 5.93328 10.6667C5.93328 10.998 5.66465 11.2667 5.33328 11.2667H1.33328C1.00191 11.2667 0.733276 10.998 0.733276 10.6667Z" fill="#606078"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.33324 8.93315C8.37594 8.93315 7.5999 9.70919 7.5999 10.6665C7.5999 11.6238 8.37594 12.3998 9.33324 12.3998C10.2905 12.3998 11.0666 11.6238 11.0666 10.6665C11.0666 9.70919 10.2905 8.93315 9.33324 8.93315ZM6.3999 10.6665C6.3999 9.04645 7.7132 7.73315 9.33324 7.73315C10.9533 7.73315 12.2666 9.04645 12.2666 10.6665C12.2666 12.2865 10.9533 13.5998 9.33324 13.5998C7.7132 13.5998 6.3999 12.2865 6.3999 10.6665Z" fill="#606078"/>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

4
app/icons/editIcon.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1214 1.90965C10.9034 1.83288 11.6671 2.1787 12.4109 2.92251C13.1548 3.66632 13.5006 4.43004 13.4238 5.21206C13.3501 5.9626 12.8986 6.5767 12.4109 7.06437L11.6646 7.81074L11.6514 7.82388L7.15761 12.3177L7.1506 12.3246C6.99111 12.4789 6.78567 12.6113 6.59029 12.7095C6.39624 12.8071 6.16385 12.8952 5.9382 12.9274L3.93153 13.2141L3.92847 13.2145C3.40747 13.2862 2.90145 13.1445 2.54411 12.7886C2.18592 12.4318 2.04289 11.9253 2.11952 11.4009L2.1197 11.3996L2.40577 9.39719L2.40592 9.39609C2.43795 9.16779 2.52556 8.93384 2.62392 8.73816C2.72251 8.542 2.8568 8.33479 3.01575 8.17584L7.50689 3.6847C7.51292 3.6784 7.51909 3.67223 7.5254 3.66619L8.26908 2.92251C8.75676 2.43484 9.37086 1.98332 10.1214 1.90965ZM11.5624 6.21585L11.0695 6.70874C9.93554 6.28458 9.04354 5.39202 8.62403 4.26462L9.11761 3.77104C9.5366 3.35205 9.9025 3.1369 10.2386 3.10391C10.5433 3.074 10.9729 3.18152 11.5624 3.77104C12.1519 4.36056 12.2595 4.79018 12.2295 5.09483C12.1966 5.43095 11.9814 5.79686 11.5624 6.21585ZM3.86427 9.02437L7.71189 5.17676C8.23353 6.23763 9.09438 7.09733 10.1577 7.62054L6.31335 11.4649C6.26532 11.5105 6.17201 11.5767 6.05139 11.6373C5.92711 11.6998 5.82284 11.7317 5.76849 11.7395L3.76488 12.0257L3.76348 12.0259C3.5587 12.0537 3.44511 11.9923 3.39091 11.9383C3.33772 11.8853 3.27736 11.7757 3.30698 11.5739L3.30731 11.5716L3.59398 9.56496L3.59425 9.56303C3.60235 9.50501 3.63461 9.3994 3.6961 9.27706C3.75751 9.15488 3.82322 9.06543 3.86427 9.02437ZM2 14.1667C1.72386 14.1667 1.5 14.4354 1.5 14.7667C1.5 15.0981 1.72386 15.3667 2 15.3667H14C14.2761 15.3667 14.5 15.0981 14.5 14.7667C14.5 14.4354 14.2761 14.1667 14 14.1667H2Z" fill="#606078"/>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

5
app/icons/exportIcon.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.36222 4.88181C9.39065 4.55166 9.68134 4.30707 10.0115 4.3355C11.3011 4.44655 12.33 4.8449 13.0159 5.69024C13.6884 6.51901 13.94 7.66835 13.94 9.07329V9.15995C13.94 10.7093 13.6334 11.95 12.7951 12.7884C11.9568 13.6267 10.716 13.9333 9.16668 13.9333H4.82668C3.27734 13.9333 2.03659 13.6267 1.19825 12.7884C0.359908 11.95 0.0533447 10.7093 0.0533447 9.15995V9.07329C0.0533447 7.67851 0.301576 6.53628 0.963157 5.7093C1.63861 4.86499 2.65276 4.46108 3.92432 4.34254C4.25426 4.31179 4.54666 4.55432 4.57742 4.88426C4.60818 5.2142 4.36564 5.50661 4.0357 5.53736C2.94727 5.63883 2.29808 5.96159 1.9002 6.45894C1.48845 6.97363 1.25334 7.78806 1.25334 9.07329V9.15995C1.25334 10.5906 1.54345 11.4365 2.04678 11.9399C2.5501 12.4432 3.39602 12.7333 4.82668 12.7333H9.16668C10.5973 12.7333 11.4433 12.4432 11.9466 11.9399C12.4499 11.4365 12.74 10.5906 12.74 9.15995V9.07329C12.74 7.77823 12.5016 6.9609 12.0841 6.44634C11.68 5.94834 11.019 5.6267 9.90854 5.53107C9.57839 5.50265 9.33379 5.21196 9.36222 4.88181Z" fill="#606078"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00002 0.813232C7.3314 0.813232 7.60002 1.08186 7.60002 1.41323V8.9999C7.60002 9.33127 7.3314 9.5999 7.00002 9.5999C6.66865 9.5999 6.40002 9.33127 6.40002 8.9999V1.41323C6.40002 1.08186 6.66865 0.813232 7.00002 0.813232Z" fill="#606078"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5757 0.242386C6.81001 0.00807173 7.18991 0.00807173 7.42422 0.242386L9.65756 2.47572C9.89187 2.71003 9.89187 3.08993 9.65756 3.32425C9.42324 3.55856 9.04334 3.55856 8.80903 3.32425L6.99996 1.51518L5.19089 3.32425C4.95658 3.55856 4.57668 3.55856 4.34236 3.32425C4.10805 3.08993 4.10805 2.71003 4.34236 2.47572L6.5757 0.242386Z" fill="#606078"/>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

5
app/icons/importIcon.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.36222 5.88181C9.39065 5.55166 9.68134 5.30707 10.0115 5.3355C11.3011 5.44655 12.33 5.8449 13.0159 6.69024C13.6884 7.51901 13.94 8.66835 13.94 10.0733V10.16C13.94 11.7093 13.6334 12.95 12.7951 13.7884C11.9568 14.6267 10.716 14.9333 9.16668 14.9333H4.82668C3.27734 14.9333 2.03659 14.6267 1.19825 13.7884C0.359908 12.95 0.0533447 11.7093 0.0533447 10.16V10.0733C0.0533447 8.67851 0.301576 7.53628 0.963157 6.7093C1.63861 5.86499 2.65276 5.46108 3.92432 5.34254C4.25426 5.31179 4.54666 5.55432 4.57742 5.88426C4.60818 6.2142 4.36564 6.50661 4.0357 6.53736C2.94727 6.63883 2.29808 6.96159 1.9002 7.45894C1.48845 7.97363 1.25334 8.78806 1.25334 10.0733V10.16C1.25334 11.5906 1.54345 12.4365 2.04678 12.9399C2.5501 13.4432 3.39602 13.7333 4.82668 13.7333H9.16668C10.5973 13.7333 11.4433 13.4432 11.9466 12.9399C12.4499 12.4365 12.74 11.5906 12.74 10.16V10.0733C12.74 8.77823 12.5016 7.9609 12.0841 7.44634C11.68 6.94834 11.019 6.6267 9.90854 6.53107C9.57839 6.50265 9.33379 6.21196 9.36222 5.88181Z" fill="#606078"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00002 0.733398C7.3314 0.733398 7.60002 1.00203 7.60002 1.3334V9.92006C7.60002 10.2514 7.3314 10.5201 7.00002 10.5201C6.66865 10.5201 6.40002 10.2514 6.40002 9.92006V1.3334C6.40002 1.00203 6.66865 0.733398 7.00002 0.733398Z" fill="#606078"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.34236 8.00923C4.57668 7.77492 4.95658 7.77492 5.19089 8.00923L6.99996 9.8183L8.80903 8.00923C9.04334 7.77492 9.42324 7.77492 9.65756 8.00923C9.89187 8.24355 9.89187 8.62345 9.65756 8.85776L7.42422 11.0911C7.18991 11.3254 6.81001 11.3254 6.5757 11.0911L4.34236 8.85776C4.10805 8.62345 4.10805 8.24355 4.34236 8.00923Z" fill="#606078"/>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

3
app/icons/syncIcon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99994 1.9334C4.62621 1.9334 1.93328 4.64987 1.93328 8.00006C1.93328 8.33144 1.66465 8.60006 1.33328 8.60006C1.00191 8.60006 0.733276 8.33144 0.733276 8.00006C0.733276 3.99026 3.96034 0.733398 7.99994 0.733398C10.4014 0.733398 12.1994 1.73687 13.3851 2.726C13.6396 2.9383 13.8667 3.15055 14.0666 3.35312V1.70673C14.0666 1.37536 14.3352 1.10673 14.6666 1.10673C14.998 1.10673 15.2666 1.37536 15.2666 1.70673V5.04007C15.2666 5.37144 14.998 5.64007 14.6666 5.64007H11.7066C11.3752 5.64007 11.1066 5.37144 11.1066 5.04007C11.1066 4.70869 11.3752 4.44007 11.7066 4.44007H13.4438C13.22 4.1943 12.9441 3.92084 12.6164 3.64747C11.5805 2.78326 10.0451 1.9334 7.99994 1.9334ZM14.6666 7.40007C14.998 7.40007 15.2666 7.66869 15.2666 8.00006C15.2666 12.0114 12.0113 15.2667 7.99994 15.2667C5.95158 15.2667 4.33187 14.2359 3.25351 13.2578C3.04093 13.065 2.84729 12.8724 2.67328 12.6873V14.2934C2.67328 14.6248 2.40465 14.8934 2.07328 14.8934C1.74191 14.8934 1.47328 14.6248 1.47328 14.2934V10.9601C1.47328 10.6287 1.74191 10.3601 2.07328 10.3601H5.08661C5.41798 10.3601 5.68661 10.6287 5.68661 10.9601C5.68661 11.2914 5.41798 11.5601 5.08661 11.5601H3.27289C3.48883 11.8108 3.75232 12.0902 4.05971 12.369C5.02469 13.2442 6.36831 14.0667 7.99994 14.0667C11.3486 14.0667 14.0666 11.3487 14.0666 8.00006C14.0666 7.66869 14.3352 7.40007 14.6666 7.40007Z" fill="#606078"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -3,6 +3,7 @@ import "./styles/globals.scss";
import "./styles/markdown.scss";
import "./styles/highlight.scss";
import "./styles/globals.css";
import "./styles/base-new.scss";
import { getClientConfig } from "./config/client";
import { type Metadata } from "next";

View File

@ -263,6 +263,9 @@ const cn = {
Title: "编辑提示词",
},
},
Provider: {
Title: "自定义模型",
},
HistoryCount: {
Title: "附带历史消息数",
SubTitle: "每次请求携带的历史消息数",

View File

@ -268,6 +268,9 @@ const en: LocaleType = {
Title: "Edit Prompt",
},
},
Provider: {
Title: "Custom Models",
},
HistoryCount: {
Title: "Attached Messages Count",
SubTitle: "Number of sent messages attached per request",

250
app/styles/base-new.scss Normal file
View File

@ -0,0 +1,250 @@
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
font-family: PingFang, "SF Pro Text", "SF Pro Icons", "Helvetica Neue",
Helvetica, Arial, sans-serif;
}
.light-new,
.dark-new {
*:focus-visible {
outline: none;
}
* {
font-weight: 400;
}
input {
text-align: inherit;
background-color: inherit;
}
--siderbar-mobile-height: 3.125rem;
--max-message-width: calc(var(--chat-panel-max-width) * 0.6);
}
.light-new {
--global-bg: #e3e3ed;
--actions-bar-btn-default-bg: #2e42f3;
--primary-btn: #2e42f3;
--primary-btn-disabled-bg: rgba(60, 68, 255, 0.2);
--danger-btn-bg: #fff6f6;
--default-btn-bg: #f7f7f8;
--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;
--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);
--input-input-ele-hover-bg: rgba(0, 0, 0, 0);
--slider-block-hover-bg: #F7F7F8;
--select-popover-border: rgba(0, 0, 0, 0.1);
--slider-block-border: #c9c9d1;
--thumbnail-border: rgba(0, 0, 0, 0.1);
--chat-actions-popover-mobile-border: #f0f0f3;
--chat-header-bottom-border: #e2e2e6;
--chat-input-top-border: #e2e2e6;
--chat-input-hood-border: #fff;
--chat-input-hood-focus-border: #606078;
--chat-menu-session-selected-border: #c9cefc;
--settings-menu-item-selected-border: #c9cefc;
--settings-header-border: #e2e2e6;
--delete-chat-popover-border: rgba(0, 0, 0, 0.1);
--delete-chat-cancel-btn-border: #e2e2e6;
--chat-menu-session-unselected-border: #f0f0f3;
--chat-menu-session-hovered-border: #e2e2e6;
--modal-header-bottom-border: #f0f0f3;
--sidebar-tab-mobile-active-text: #2e42f3;
--sidebar-tab-mobile-inactive-text: #a5a5b3;
--btn-primary-text: #fff;
--btn-danger-text: #ff5454;
--btn-default-text: #606078;
--input-text: #18182a;
--list-subtitle-text: #a5a5b3;
--slider-block-text: #606078;
--chat-actions-btn-popover-text: #fff;
--chat-header-title-text: #18182a;
--chat-header-subtitle-text: #88889a;
--chat-input-placeholder-text: #88889a;
--chat-message-date-text: #88889a;
--chat-message-markdown-user-text: #fff;
--chat-message-markdown-bot-text: #18182a;
--chat-panel-message-clear-text: #a5a5b3;
--chat-panel-message-clear-revert-text: #3c44ff;
--chat-menu-item-title-text: #18182a;
--chat-menu-item-time-text: rgba(0, 0, 0, 0.3);
--chat-menu-item-description-text: #88889a;
--settings-menu-title-text: #18182a;
--settings-menu-item-title-text: #18182a;
--settings-panel-header-title-text: #18182a;
--modal-mask-text: #18182a;
--delete-chat-ok-btn-text: #fff;
--delete-chat-cancel-btn-text: #18182a;
--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-input-hood-focus-shadow: 0px 4px 20px 0px rgba(60, 68, 255, 0.13);
--select-popover-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12);
--message-actions-bar-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);
--prompt-hint-container-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1);
--delete-chat-popover-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08),
0px 8px 20px 0px rgba(0, 0, 0, 0.08);
--sidebar-btn-shadow: 4px 8px 16px 0px rgba(60, 68, 255, 0.2);
}
.dark-new {
--global-bg: #303030;
--actions-bar-btn-default-bg: #384cfc;
--primary-btn: #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;
--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);
--input-input-ele-hover-bg: rgba(0, 0, 0, 0);
--select-popover-border: rgba(0, 0, 0, 0.1);
--slider-block-border: #c9c9d1;
--thumbnail-border: rgba(0, 0, 0, 0.1);
--chat-actions-popover-mobile-border: #f0f0f3;
--chat-header-bottom-border: #e2e2e6;
--chat-input-top-border: #e2e2e6;
--chat-input-hood-border: #fff;
--chat-input-hood-focus-border: #606078;
--chat-menu-session-selected-border: #c9cefc;
--settings-menu-item-selected-border: #c9cefc;
--settings-header-border: #e2e2e6;
--delete-chat-popover-border: rgba(0, 0, 0, 0.1);
--delete-chat-cancel-btn-border: #e2e2e6;
--chat-menu-session-unselected-border: #f0f0f3;
--chat-menu-session-hovered-border: #e2e2e6;
--modal-header-bottom-border: #f0f0f3;
--sidebar-tab-mobile-active-text: #2e42f3;
--sidebar-tab-mobile-inactive-text: #a5a5b3;
--btn-primary-text: #fff;
--btn-danger-text: #ff5454;
--btn-default-text: #606078;
--input-text: #18182a;
--list-subtitle-text: #a5a5b3;
--slider-block-text: #606078;
--chat-actions-btn-popover-text: #fff;
--chat-header-title-text: #18182a;
--chat-header-subtitle-text: #88889a;
--chat-input-placeholder-text: #88889a;
--chat-message-date-text: #88889a;
--chat-message-markdown-user-text: #fff;
--chat-message-markdown-bot-text: #18182a;
--chat-panel-message-clear-text: #a5a5b3;
--chat-panel-message-clear-revert-text: #3c44ff;
--chat-menu-item-title-text: #18182a;
--chat-menu-item-time-text: rgba(0, 0, 0, 0.3);
--chat-menu-item-description-text: #88889a;
--settings-menu-title-text: #18182a;
--settings-menu-item-title-text: #18182a;
--settings-panel-header-title-text: #18182a;
--modal-mask-text: #18182a;
--delete-chat-ok-btn-text: #fff;
--delete-chat-cancel-btn-text: #18182a;
--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-input-hood-focus-shadow: 0px 4px 20px 0px rgba(60, 68, 255, 0.13);
--select-popover-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12);
--message-actions-bar-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);
--prompt-hint-container-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1);
--delete-chat-popover-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08),
0px 8px 20px 0px rgba(0, 0, 0, 0.08);
--sidebar-btn-shadow: 4px 8px 16px 0px rgba(60, 68, 255, 0.2);
}

View File

@ -16,245 +16,3 @@
src: url(/fonts/Roboto.woff2) format("woff2");
}
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
font-family: PingFang, "SF Pro Text", "SF Pro Icons", "Helvetica Neue",
Helvetica, Arial, sans-serif;
}
*:focus-visible {
outline: none;
}
* {
font-weight: 400;
}
.light-new {
--global-bg: #e3e3ed;
--actions-bar-btn-default-bg: #2e42f3;
--primary-btn: #2e42f3;
--primary-btn-disabled-bg: rgba(60, 68, 255, 0.2);
--danger-btn-bg: #fff6f6;
--default-btn-bg: #f7f7f8;
--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;
--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);
--input-input-ele-hover-bg: rgba(0, 0, 0, 0);
--select-popover-border: rgba(0, 0, 0, 0.1);
--slider-block-border: #c9c9d1;
--thumbnail-border: rgba(0, 0, 0, 0.1);
--chat-actions-popover-mobile-border: #f0f0f3;
--chat-header-bottom-border: #e2e2e6;
--chat-input-top-border: #e2e2e6;
--chat-input-hood-border: #fff;
--chat-input-hood-focus-border: #606078;
--chat-menu-session-selected-border: #c9cefc;
--settings-menu-item-selected-border: #c9cefc;
--settings-header-border: #e2e2e6;
--delete-chat-popover-border: rgba(0, 0, 0, 0.1);
--delete-chat-cancel-btn-border: #e2e2e6;
--chat-menu-session-unselected-border: #f0f0f3;
--chat-menu-session-hovered-border: #e2e2e6;
--modal-header-bottom-border: #f0f0f3;
--sidebar-tab-mobile-active-text: #2e42f3;
--sidebar-tab-mobile-inactive-text: #a5a5b3;
--btn-primary-text: #fff;
--danger-btn-text: #ff5454;
--btn-default-text: #606078;
--input-text: #18182a;
--list-subtitle-text: #a5a5b3;
--slider-block-text: #606078;
--chat-actions-btn-popover-text: #fff;
--chat-header-title-text: #18182a;
--chat-header-subtitle-text: #88889a;
--chat-input-placeholder-text: #88889a;
--chat-message-date-text: #88889a;
--chat-message-markdown-user-text: #fff;
--chat-message-markdown-bot-text: #18182a;
--chat-panel-message-clear-text: #a5a5b3;
--chat-panel-message-clear-revert-text: #3c44ff;
--chat-menu-item-title-text: #18182a;
--chat-menu-item-time-text: rgba(0, 0, 0, 0.3);
--chat-menu-item-description-text: #88889a;
--settings-menu-title-text: #18182a;
--settings-menu-item-title-text: #18182a;
--settings-panel-header-title-text: #18182a;
--modal-mask-text: #18182a;
--delete-chat-ok-btn-text: #fff;
--delete-chat-cancel-btn-text: #18182a;
--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-input-hood-focus-shadow: 0px 4px 20px 0px rgba(60, 68, 255, 0.13);
--select-popover-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12);
--message-actions-bar-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);
--prompt-hint-container-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1);
--delete-chat-popover-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08),
0px 8px 20px 0px rgba(0, 0, 0, 0.08);
--sidebar-btn-shadow: 4px 8px 16px 0px rgba(60, 68, 255, 0.2);
--siderbar-mobile-height: 3.125rem;
--max-message-width: calc(var(--chat-panel-max-width) * 0.6);
}
.dark-new {
--global-bg: #303030;
--actions-bar-btn-default-bg: #384cfc;
--primary-btn: #384cfc;
--primary-btn-disabled-bg: rgba(60, 68, 255, 0.2);
--danger-btn-bg: #fff6f6;
--default-btn-bg: #f7f7f8;
--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;
--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;
--select-popover-border: rgba(0, 0, 0, 0.1);
--slider-block-border: #c9c9d1;
--thumbnail-border: rgba(0, 0, 0, 0.1);
--chat-actions-popover-mobile-border: #f0f0f3;
--chat-header-bottom-border: #e2e2e6;
--chat-input-top-border: #e2e2e6;
--chat-input-hood-border: #fff;
--chat-input-hood-focus-border: #606078;
--chat-menu-session-selected-border: #c9cefc;
--settings-menu-item-selected-border: #c9cefc;
--settings-header-border: #e2e2e6;
--delete-chat-popover-border: rgba(0, 0, 0, 0.1);
--delete-chat-cancel-btn-border: #e2e2e6;
--chat-menu-session-unselected-border: #f0f0f3;
--chat-menu-session-hovered-border: #e2e2e6;
--sidebar-tab-mobile-active-text: #2e42f3;
--sidebar-tab-mobile-inactive-text: #a5a5b3;
--btn-primary-text: #fff;
--danger-btn-text: #ff5454;
--btn-default-text: #606078;
--input-text: #18182a;
--list-subtitle-text: #a5a5b3;
--slider-block-text: #606078;
--chat-actions-btn-popover-text: #fff;
--chat-header-title-text: #18182a;
--chat-header-subtitle-text: #88889a;
--chat-input-placeholder-text: #88889a;
--chat-message-date-text: #88889a;
--chat-message-markdown-user-text: #fff;
--chat-message-markdown-bot-text: #18182a;
--chat-panel-message-clear-text: #a5a5b3;
--chat-panel-message-clear-revert-text: #3c44ff;
--chat-menu-item-title-text: #18182a;
--chat-menu-item-time-text: rgba(0, 0, 0, 0.3);
--chat-menu-item-description-text: #88889a;
--settings-menu-title-text: #18182a;
--settings-menu-item-title-text: #18182a;
--settings-panel-header-title-text: #18182a;
--modal-mask-text: #18182a;
--delete-chat-ok-btn-text: #fff;
--delete-chat-cancel-btn-text: #18182a;
--primary-btn-disabled-dark-text: #fafafa;
--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-input-hood-focus-shadow: 0px 4px 20px 0px rgba(60, 68, 255, 0.13);
--select-popover-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12);
--message-actions-bar-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);
--prompt-hint-container-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1);
--delete-chat-popover-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08),
0px 8px 20px 0px rgba(0, 0, 0, 0.08);
--sidebar-btn-shadow: 4px 8px 16px 0px rgba(60, 68, 255, 0.2);
}
input {
text-align: inherit;
background-color: inherit;
}

View File

@ -103,6 +103,7 @@ module.exports = {
'slider': 'var(--slider-bg)',
'slider-slided-travel': 'var(--slider-slided-travel-bg)',
'slider-block': 'var(--slider-block-bg)',
'slider-block-hover': 'var(--slider-block-hover-bg)',
'switch-unchecked': 'var(--switch-unchecked-bg)',
'switch-checked': 'var(--switch-checked-bg)',
'switch-btn': 'var(--switch-btn-bg)',