diff --git a/app/components/Btn/index.tsx b/app/components/Btn/index.tsx index 75b70802c..04310c460 100644 --- a/app/components/Btn/index.tsx +++ b/app/components/Btn/index.tsx @@ -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 && ( +
{prefixIcon}
+ )} {text && (
{text} diff --git a/app/components/Input/index.tsx b/app/components/Input/index.tsx index 4ab94f4f3..04f86a826 100644 --- a/app/components/Input/index.tsx +++ b/app/components/Input/index.tsx @@ -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 (
{
)}
- {type === "modal" &&
 
} + {type === "modal" && ( +
{ + if (maskCloseble) { + handleClose(); + } + }} + > +   +
+ )} diff --git a/app/components/SlideRange/index.tsx b/app/components/SlideRange/index.tsx index 5b3162321..18df7ce89 100644 --- a/app/components/SlideRange/index.tsx +++ b/app/components/SlideRange/index.tsx @@ -74,7 +74,7 @@ export default function SlideRange(props: SlideRangeProps) {  
{value} diff --git a/app/containers/Settings/SettingPanel.tsx b/app/containers/Settings/SettingPanel.tsx index 74c30e2de..1c5dc4e62 100644 --- a/app/containers/Settings/SettingPanel.tsx +++ b/app/containers/Settings/SettingPanel.tsx @@ -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 (
- - - - - - - - - - - - - - - - - + + + + + + + + + + + + + - { - const modelConfig = { ...config.modelConfig }; - updater(modelConfig); - config.update((config) => (config.modelConfig = modelConfig)); + + + + - - - - - + > + { + const modelConfig = { ...config.modelConfig }; + updater(modelConfig); + config.update((config) => (config.modelConfig = modelConfig)); + }} + /> + + + + + +
); diff --git a/app/containers/Settings/components/AppSetting.tsx b/app/containers/Settings/components/AppSetting.tsx index 20e37854e..07f100df7 100644 --- a/app/containers/Settings/components/AppSetting.tsx +++ b/app/containers/Settings/components/AppSetting.tsx @@ -63,6 +63,8 @@ export default function AppSetting(props: AppSettingProps) { diff --git a/app/containers/Settings/components/DangerItems.tsx b/app/containers/Settings/components/DangerItems.tsx index ee57f079e..9e726b707 100644 --- a/app/containers/Settings/components/DangerItems.tsx +++ b/app/containers/Settings/components/DangerItems.tsx @@ -71,6 +71,9 @@ export default function DangerItems() { return ( {Locale.Settings.Prompt.Edit} } + prefixIcon={config.isMobileScreen ? undefined : } > diff --git a/app/containers/Settings/components/ProviderSetting.tsx b/app/containers/Settings/components/ProviderSetting.tsx index 7f29f0ff7..6ae206f4b 100644 --- a/app/containers/Settings/components/ProviderSetting.tsx +++ b/app/containers/Settings/components/ProviderSetting.tsx @@ -26,6 +26,9 @@ export default function ProviderSetting() { diff --git a/app/containers/Settings/components/SyncItems.tsx b/app/containers/Settings/components/SyncItems.tsx index f923d93ab..090af3db5 100644 --- a/app/containers/Settings/components/SyncItems.tsx +++ b/app/containers/Settings/components/SyncItems.tsx @@ -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={{Locale.UI.Config}} + prefixIcon={isMobileScreen ? undefined : } > {couldSync && ( {Locale.UI.Sync}} + prefixIcon={} > )} @@ -81,12 +91,14 @@ export default function SyncItems() { syncStore.export(); }} text={{Locale.UI.Export}} + prefixIcon={} > { syncStore.import(); }} text={{Locale.UI.Import}} + prefixIcon={} > diff --git a/app/icons/configIcon2.svg b/app/icons/configIcon2.svg new file mode 100644 index 000000000..79a2b7e34 --- /dev/null +++ b/app/icons/configIcon2.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/app/icons/editIcon.svg b/app/icons/editIcon.svg new file mode 100644 index 000000000..375e0abf9 --- /dev/null +++ b/app/icons/editIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/icons/exportIcon.svg b/app/icons/exportIcon.svg new file mode 100644 index 000000000..908d27c89 --- /dev/null +++ b/app/icons/exportIcon.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/app/icons/importIcon.svg b/app/icons/importIcon.svg new file mode 100644 index 000000000..7627cdb70 --- /dev/null +++ b/app/icons/importIcon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/icons/syncIcon.svg b/app/icons/syncIcon.svg new file mode 100644 index 000000000..d977da240 --- /dev/null +++ b/app/icons/syncIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/layout.tsx b/app/layout.tsx index 203ea3823..5c52ab79a 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -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"; diff --git a/app/locales/cn.ts b/app/locales/cn.ts index e2b07e285..caa07a333 100644 --- a/app/locales/cn.ts +++ b/app/locales/cn.ts @@ -263,6 +263,9 @@ const cn = { Title: "编辑提示词", }, }, + Provider: { + Title: "自定义模型", + }, HistoryCount: { Title: "附带历史消息数", SubTitle: "每次请求携带的历史消息数", diff --git a/app/locales/en.ts b/app/locales/en.ts index 11c6e3493..738ebcb21 100644 --- a/app/locales/en.ts +++ b/app/locales/en.ts @@ -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", diff --git a/app/styles/base-new.scss b/app/styles/base-new.scss new file mode 100644 index 000000000..0cb2b88f1 --- /dev/null +++ b/app/styles/base-new.scss @@ -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); +} \ No newline at end of file diff --git a/app/styles/globals.css b/app/styles/globals.css index cacf4208a..baeb586f4 100644 --- a/app/styles/globals.css +++ b/app/styles/globals.css @@ -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; -} diff --git a/tailwind.config.js b/tailwind.config.js index 21dd120e5..08162d55f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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)',