From c34b8ab919ca1f14a7102f0c95ece2292d38f839 Mon Sep 17 00:00:00 2001 From: butterfly Date: Sun, 28 Apr 2024 19:58:59 +0800 Subject: [PATCH] feat: ui optiminize --- app/components/ActionsBar/index.tsx | 2 +- app/components/Btn/index.tsx | 4 +- app/components/MenuLayout/index.tsx | 26 +- app/components/Popover/index.tsx | 2 +- app/components/Screen/index.tsx | 6 +- app/components/Select/index.tsx | 5 +- app/containers/Chat/ChatPanel.tsx | 2 +- .../Chat/components/ChatActions.tsx | 59 ++-- app/containers/Chat/index.tsx | 2 +- app/containers/Settings/SettingPanel.tsx | 2 +- app/containers/Settings/index.tsx | 2 +- app/hooks/useSwitchTheme.ts | 14 +- app/icons/comandIcon.svg | 3 + app/icons/configIcon.svg | 8 + app/icons/downArrowLgIcon.svg | 5 + app/icons/eraserIcon.svg | 5 + app/icons/maskIcon.svg | 11 + app/icons/uploadImgIcon.svg | 3 + app/styles/globals.css | 269 +++++++++++++----- tailwind.config.js | 144 +++++----- 20 files changed, 381 insertions(+), 193 deletions(-) create mode 100644 app/icons/comandIcon.svg create mode 100644 app/icons/configIcon.svg create mode 100644 app/icons/downArrowLgIcon.svg create mode 100644 app/icons/eraserIcon.svg create mode 100644 app/icons/maskIcon.svg create mode 100644 app/icons/uploadImgIcon.svg diff --git a/app/components/ActionsBar/index.tsx b/app/components/ActionsBar/index.tsx index 03699a5b5..608fc379b 100644 --- a/app/components/ActionsBar/index.tsx +++ b/app/components/ActionsBar/index.tsx @@ -79,7 +79,7 @@ export default function ActionsBar(props: ActionsBarProps) { key={action.id} className={` cursor-pointer shrink-1 grow-0 basis-[${ (100 - 1) / arr.length - }%] flex flex-col items-center justify-center gap-0.5 + }%] flex flex-col items-center justify-around gap-0.5 py-1.5 ${ selected === action.id ? "text-text-sidebar-tab-mobile-active" diff --git a/app/components/Btn/index.tsx b/app/components/Btn/index.tsx index 9f86866d9..bb3898adb 100644 --- a/app/components/Btn/index.tsx +++ b/app/components/Btn/index.tsx @@ -32,7 +32,9 @@ export default function Btn(props: { switch (type) { case "primary": btnClassName = `${ - disabled ? "bg-primary-btn-disabled" : "bg-primary-btn shadow-btn" + disabled + ? "bg-primary-btn-disabled dark:opacity-30 dark:text-primary-btn-disabled-dark" + : "bg-primary-btn shadow-btn" } text-text-btn-primary `; break; case "danger": diff --git a/app/components/MenuLayout/index.tsx b/app/components/MenuLayout/index.tsx index 1a6b6e3fc..7c9afd2f0 100644 --- a/app/components/MenuLayout/index.tsx +++ b/app/components/MenuLayout/index.tsx @@ -84,20 +84,20 @@ export default function MenuLayout< setShowPanel={setShowPanel} showPanel={showPanel} /> - {!isMobileScreen && ( -
{ - startDragWidth.current = config.sidebarWidth; - onDragStart(e as any); - }} - > -
- -
-
- )} + {!isMobileScreen && ( +
{ + startDragWidth.current = config.sidebarWidth; + onDragStart(e as any); + }} + > +
+   +
+
+ )}
(props: SearchProps) => { placement={ position?.poi.relativePosition[1] !== Orientation.bottom ? "rb" : "rt" } - popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover bg-select-popover-panel dark:bg-select-popover-panel-dark" + popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover bg-select-popover-panel" onShow={(e) => { getRelativePosition(contentRef.current!, ""); }} + className={selectClassName} >
diff --git a/app/containers/Chat/ChatPanel.tsx b/app/containers/Chat/ChatPanel.tsx index ed46d4da8..5d4839c15 100644 --- a/app/containers/Chat/ChatPanel.tsx +++ b/app/containers/Chat/ChatPanel.tsx @@ -278,7 +278,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:ml-1 md:mr-2.5 md:rounded-md + md:h-[calc(100%-1.25rem)] md:my-2.5 md:mr-2.5 md:rounded-md `} key={session.id} > diff --git a/app/containers/Chat/components/ChatActions.tsx b/app/containers/Chat/components/ChatActions.tsx index 52172c271..2ec9a8c53 100644 --- a/app/containers/Chat/components/ChatActions.tsx +++ b/app/containers/Chat/components/ChatActions.tsx @@ -12,17 +12,26 @@ import { Path } from "@/app/constant"; import BottomIcon from "@/app/icons/bottom.svg"; import StopIcon from "@/app/icons/pause.svg"; -import RobotIcon from "@/app/icons/robot.svg"; import LoadingButtonIcon from "@/app/icons/loading.svg"; -import PromptIcon from "@/app/icons/prompt.svg"; -import MaskIcon from "@/app/icons/mask.svg"; -import BreakIcon from "@/app/icons/break.svg"; -import SettingsIcon from "@/app/icons/chat-settings.svg"; -import ImageIcon from "@/app/icons/image.svg"; +import PromptIcon from "@/app/icons/comandIcon.svg"; +import MaskIcon from "@/app/icons/maskIcon.svg"; +import BreakIcon from "@/app/icons/eraserIcon.svg"; +import SettingsIcon from "@/app/icons/configIcon.svg"; +import ImageIcon from "@/app/icons/uploadImgIcon.svg"; import AddCircleIcon from "@/app/icons/addCircle.svg"; +import BottomArrow from "@/app/icons/downArrowLgIcon.svg"; import Popover from "@/app/components/Popover"; +export interface Action { + onClick: () => void; + text: string; + isShow: boolean; + pcRender?: () => JSX.Element; + icon?: JSX.Element; + placement: "left" | "right"; +} + export function ChatActions(props: { uploadImage: () => void; setAttachImages: (images: string[]) => void; @@ -83,7 +92,7 @@ export function ChatActions(props: { } }, [chatStore, currentModel, models]); - const actions = [ + const actions: Action[] = [ { onClick: stopAll, text: Locale.Chat.InputActions.Stop, @@ -91,6 +100,18 @@ export function ChatActions(props: { icon: , placement: "left", }, + { + onClick: () => props.showModelSelector(true), + text: currentModel, + isShow: true, + pcRender: () => ( +
+ {currentModel} + +
+ ), + placement: "left", + }, { onClick: props.scrollToBottom, text: Locale.Chat.InputActions.ToBottom, @@ -98,13 +119,6 @@ export function ChatActions(props: { icon: , placement: "left", }, - { - onClick: props.showChatSetting, - text: Locale.Chat.InputActions.Settings, - isShow: true, - icon: , - placement: "right", - }, { onClick: props.uploadImage, text: Locale.Chat.InputActions.UploadImage, @@ -162,11 +176,11 @@ export function ChatActions(props: { placement: "right", }, { - onClick: () => props.showModelSelector(true), - text: currentModel, + onClick: props.showChatSetting, + text: Locale.Chat.InputActions.Settings, isShow: true, - icon: , - placement: "left", + icon: , + placement: "right", }, ] as const; @@ -174,7 +188,7 @@ export function ChatActions(props: { const content = (
{actions - .filter((v) => v.isShow) + .filter((v) => v.isShow && v.icon) .map((act) => { return (
v.placement === "left" && v.isShow) .map((act, ind) => { + if (act.pcRender) { + return ( +
+ {act.pcRender()} +
+ ); + } return (
diff --git a/app/containers/Settings/SettingPanel.tsx b/app/containers/Settings/SettingPanel.tsx index 7d9f23503..74c30e2de 100644 --- a/app/containers/Settings/SettingPanel.tsx +++ b/app/containers/Settings/SettingPanel.tsx @@ -54,7 +54,7 @@ export default function Settings(props: MenuWrapperInspectProps) { className={` flex flex-col overflow-hidden bg-settings-panel h-setting-panel-mobile - md:h-[calc(100%-1.25rem)] md:my-2.5 md:ml-1 md:mr-2.5 md:rounded-md + md:h-[calc(100%-1.25rem)] md:my-2.5 md:mr-2.5 md:rounded-md `} > diff --git a/app/hooks/useSwitchTheme.ts b/app/hooks/useSwitchTheme.ts index 71d9508fd..4fb094946 100644 --- a/app/hooks/useSwitchTheme.ts +++ b/app/hooks/useSwitchTheme.ts @@ -1,14 +1,20 @@ -import { useEffect } from "react"; +import { useLayoutEffect } from "react"; import { Theme, useAppConfig } from "@/app/store/config"; +const DARK_CLASS = "dark-new"; +const LIGHT_CLASS = "light-new"; + export function useSwitchTheme() { const config = useAppConfig(); - useEffect(() => { - document.body.classList.remove("dark"); + useLayoutEffect(() => { + document.body.classList.remove(DARK_CLASS); + document.body.classList.remove(LIGHT_CLASS); if (config.theme === Theme.Dark) { - document.body.classList.add("dark"); + document.body.classList.add(DARK_CLASS); + } else { + document.body.classList.add(LIGHT_CLASS); } }, [config.theme]); } diff --git a/app/icons/comandIcon.svg b/app/icons/comandIcon.svg new file mode 100644 index 000000000..861c63e5e --- /dev/null +++ b/app/icons/comandIcon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/icons/configIcon.svg b/app/icons/configIcon.svg new file mode 100644 index 000000000..bc5aa33f7 --- /dev/null +++ b/app/icons/configIcon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/app/icons/downArrowLgIcon.svg b/app/icons/downArrowLgIcon.svg new file mode 100644 index 000000000..ce6272319 --- /dev/null +++ b/app/icons/downArrowLgIcon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/icons/eraserIcon.svg b/app/icons/eraserIcon.svg new file mode 100644 index 000000000..212bc07ac --- /dev/null +++ b/app/icons/eraserIcon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/icons/maskIcon.svg b/app/icons/maskIcon.svg new file mode 100644 index 000000000..2e2aed516 --- /dev/null +++ b/app/icons/maskIcon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/app/icons/uploadImgIcon.svg b/app/icons/uploadImgIcon.svg new file mode 100644 index 000000000..e8fe6ccf2 --- /dev/null +++ b/app/icons/uploadImgIcon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/styles/globals.css b/app/styles/globals.css index dd94c4442..a243cde0d 100644 --- a/app/styles/globals.css +++ b/app/styles/globals.css @@ -30,101 +30,220 @@ body { outline: none; } -:root { +.light-new { --global-bg: #e3e3ed; - --actived-widget-bg: #2e42f3; + --actions-bar-btn-default-bg: #2e42f3; + --primary-btn: #2e42f3; --primary-btn-disabled-bg: rgba(60, 68, 255, 0.2); --danger-btn-bg: #fff6f6; - --default-widget-bg: #f7f7f8; - --default-container-bg: #f7f7f8; - --similar-panel-bg: #fff; - --similar-highlight-hood-bg: #fff; - --similar-widget-btn-bg: #fff; - --chat-panel-message-bot-bg: #fff; - --chat-panel-message-user-bg: #4a5cff; - --similar-line-bg: #f0f0f3; - --chat-panel-message-mobile-bg: #f0f0f3; - --chat-menu-session-unselected-bg: #f0f0f3; - --similar-btn-hovered-bg: rgba(0, 0, 0, 0.05); + --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; - --menu-item-selected-bg: #dee1fd; - --small-widget-border: rgba(0, 0, 0, 0.1); + --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; + --confirm-mask-bg: rgba(0, 0, 0, 0.7); + --confirm-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.1); + + --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; - --panel-header-border: #e2e2e6; + --chat-header-bottom-border: #e2e2e6; + --chat-input-top-border: #e2e2e6; --chat-input-hood-border: #fff; --chat-input-hood-focus-border: #606078; - --menu-item-selected-border: #c9cefc; - --sidebar-tab-mobile-active-text: #2e42f3; - --bg-contract-text: #fff; - --danger-btn-text: #ff5454; - --btn-default-text: #606078; - --weakness-text: #a5a5b3; - --key-text: #18182a; - --description-text: #88889a; - --message-clear-revert-text: #3c44ff; - --menu-item-time: rgba(0, 0, 0, 0.3); - --siderbar-mobile-height: 3.125rem; - --max-message-width: calc(var(--chat-panel-max-width) * 0.6); - --confirm-mask-bg: rgba(0, 0, 0, 0.7); - --confirm-mask-text: #18182a; - --delete-chat-ok-btn-bg: #ff5454; - --delete-chat-ok-btn-text: #fff; - --delete-chat-cancel-btn-bg: #fff; - --delete-chat-cancel-btn-text: #18182a; + --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; - --sidebar-btn-hovered-bg: rgba(0, 0, 0, 0.05); --chat-menu-session-unselected-border: #f0f0f3; --chat-menu-session-hovered-border: #e2e2e6; - --hovered-btn-bg: rgba(0, 0, 0, 0.05); -} -.dark { - --global-bg: #303030; - --actived-widget-bg: #384cfc; - --primary-btn-disabled-bg: rgba(60, 68, 255, 0.2); - --danger-btn-bg: #20131a; - --default-widget-bg: #1d1d1d; - --default-container-bg: #1d1d1d; - --similar-panel-bg: #111; - - --similar-highlight-hood-bg: #fff; - - --similar-widget-btn-bg: #fff; - --chat-panel-message-bot-bg: #fff; - --chat-panel-message-user-bg: #4a5cff; - --similar-line-bg: #f0f0f3; - --chat-panel-message-mobile-bg: #f0f0f3; - --chat-menu-session-unselected-bg: #f0f0f3; - --similar-btn-hovered-bg: rgba(0, 0, 0, 0.05); - --slider-slided-travel-bg: #88889a; - --switch-unchecked-bg: #c9c9d1; - --chat-actions-btn-popover-bg: #434360; - --chat-panel-message-clear-divider-bg: #e2e2e6; - --chat-menu-session-hovered-bg: #e2e2e6; - --menu-item-selected-bg: #dee1fd; - --small-widget-border: rgba(0, 0, 0, 0.1); - --slider-block-border: #c9c9d1; - --chat-actions-popover-mobile-border: #f0f0f3; - --panel-header-border: #e2e2e6; - --chat-input-hood-border: #fff; - --chat-input-hood-focus-border: #606078; - --menu-item-selected-border: #c9cefc; --sidebar-tab-mobile-active-text: #2e42f3; - --bg-contract-text: #fff; + --sidebar-tab-mobile-inactive-text: #a5a5b3; + --btn-primary-text: #fff; --danger-btn-text: #ff5454; --btn-default-text: #606078; - --weakness-text: #a5a5b3; - --key-text: #18182a; - --description-text: #88889a; - --message-clear-revert-text: #3c44ff; - --menu-item-time: rgba(0, 0, 0, 0.3); + --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; + --confirm-mask-text: #18182a; + --delete-chat-ok-btn-text: #fff; + --delete-chat-cancel-btn-text: #18182a; - --select-popover-panel-bg: #1d1d1d; + --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; + --confirm-mask-bg: rgba(0, 0, 0, 0.7); + --confirm-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; + --confirm-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 { diff --git a/tailwind.config.js b/tailwind.config.js index 2b74d4832..ae9bd98d7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -85,55 +85,56 @@ module.exports = { }, backgroundColor: { 'global': 'var(--global-bg)', - 'actions-bar-btn-default': 'var(--actived-widget-bg)', - 'primary-btn': 'var(--actived-widget-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)', 'danger-btn': 'var(--danger-btn-bg)', - 'default-btn': 'var(--default-widget-bg)', + 'default-btn': 'var(--default-btn-bg)', 'hovered-btn': 'var(--hovered-btn-bg)', - 'card': 'var(--similar-panel-bg)', - 'input': 'var(--default-widget-bg)', - 'list-item-divider': 'var(--similar-line-bg)', - 'menu': 'var(--default-container-bg)', - 'select-option-hovered': 'var(--similar-btn-hovered-bg)', - 'select-popover-panel': 'var(--similar-panel-bg)', - 'select-popover-panel-dark': 'var(--select-popover-panel-bg)', - 'select': 'var(--default-widget-bg)', - 'slider': 'var(--similar-line-bg)', + 'card': 'var(--card-bg)', + 'input': 'var(--input-bg)', + 'list-item-divider': 'var(--list-item-divider-bg)', + 'menu': 'var(--menu-bg)', + 'select-option-hovered': 'var(--select-option-hovered-bg)', + 'select-popover-panel': 'var(--select-popover-panel-bg)', + 'select': 'var(--select-bg)', + 'slider': 'var(--slider-bg)', 'slider-slided-travel': 'var(--slider-slided-travel-bg)', - 'slider-block': 'var(--similar-widget-btn-bg)', + 'slider-block': 'var(--slider-block-bg)', 'switch-unchecked': 'var(--switch-unchecked-bg)', - 'switch-checked': 'var(--actived-widget-bg)', - 'switch-btn': 'var(--similar-widget-btn-bg)', - 'chat-actions-popover-panel-mobile': 'var(--similar-panel-bg)', + 'switch-checked': 'var(--switch-checked-bg)', + 'switch-btn': 'var(--switch-btn-bg)', + 'chat-actions-popover-panel-mobile': 'var(--chat-actions-popover-panel-mobile-bg)', 'chat-actions-btn-popover': 'var(--chat-actions-btn-popover-bg)', - 'chat-actions-btn-hovered': 'var(--similar-btn-hovered-bg)', - 'chat-panel-header-mask': 'var(--default-container-bg)', - 'chat-panel-header-mobile': 'var(--similar-highlight-hood-bg)', - 'chat-panel-input-hood': 'var(--similar-highlight-hood-bg)', + 'chat-actions-btn-hovered': 'var(--chat-actions-btn-hovered-bg)', + 'chat-panel-header-mask': 'var(--chat-panel-header-mask-bg)', + 'chat-panel-header-mobile': 'var(--chat-panel-header-mobile-bg)', + 'chat-panel-input-hood': 'var(--chat-panel-input-hood-bg)', 'chat-panel-message-user': 'var(--chat-panel-message-user-bg)', 'chat-panel-message-bot': 'var(--chat-panel-message-bot-bg)', - 'chat-panel-message': 'var(--default-container-bg)', + 'chat-panel-message': 'var(--chat-panel-message-bg)', 'chat-panel-message-mobile': 'var(--chat-panel-message-mobile-bg)', - 'chat-message-actions': 'var(--similar-panel-bg)', - 'chat-message-actions-btn-hovered': 'var(--similar-btn-hovered-bg)', - 'chat-panel': 'var(--default-container-bg)', + 'chat-message-actions': 'var(--chat-message-actions-bg)', + 'chat-message-actions-btn-hovered': 'var(--chat-message-actions-btn-hovered-bg)', + 'chat-panel': 'var(--chat-panel-bg)', 'chat-panel-message-clear-divider': 'var(--chat-panel-message-clear-divider-bg)', - 'chat-menu-session-selected': 'var(--menu-item-selected-bg)', + 'chat-menu-session-selected': 'var(--chat-menu-session-selected-bg)', 'chat-menu-session-unselected': 'var(--chat-menu-session-unselected-bg)', 'chat-menu-session-hovered': 'var(--chat-menu-session-hovered-bg)', - 'settings-menu-mobile': 'var(--default-container-bg)', - 'settings-menu-item-mobile': 'var(--similar-highlight-hood-bg)', - 'settings-menu-item-selected': 'var(--menu-item-selected-bg)', - 'settings-header-mobile': 'var(--similar-highlight-hood-bg)', - 'settings-panel': 'var(--default-container-bg)', - 'sidebar-mobile': 'var(--similar-highlight-hood-bg)', + 'settings-menu-mobile': 'var(--settings-menu-mobile-bg)', + 'settings-menu-item-mobile': 'var(--settings-menu-item-mobile-bg)', + 'settings-menu-item-selected': 'var(--settings-menu-item-selected-bg)', + 'settings-header-mobile': 'var(--settings-header-mobile-bg)', + 'settings-panel': 'var(--settings-panel-bg)', + 'sidebar-mobile': 'var(--sidebar-mobile-bg)', 'sidebar-btn-hovered': 'var(--sidebar-btn-hovered-bg)', - 'delete-chat-popover-panel': 'var(--similar-panel-bg)', + 'delete-chat-popover-panel': 'var(--delete-chat-popover-panel-bg)', 'confirm-mask': 'var(--confirm-mask-bg)', - 'confirm-panel': 'var(--similar-panel-bg)', + 'confirm-panel': 'var(--confirm-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)', + 'chat-actions-select-model': 'var(--chat-actions-select-model-bg)', }, backgroundImage: { // 'chat-panel-message-user': 'linear-gradient(259deg, #9786FF 8.42%, #4A5CFF 90.13%)', @@ -149,57 +150,59 @@ module.exports = { 'setting-list': '710px', }, boxShadow: { - 'btn': '0px 4px 10px 0px rgba(60, 68, 255, 0.14)', - 'chat-actions-popover-mobile': '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': '0px 4px 30px 0px var(--small-widget-border)', - 'prompt-hint-container': '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.20);', + 'btn': 'var(--btn-shadow)', + 'chat-actions-popover-mobile': 'var(--chat-actions-popover-mobile-shadow)', + 'chat-input-hood-focus-shadow': 'var(--chat-input-hood-focus-shadow)', + 'select-popover-shadow': 'var(--select-popover-shadow)', + 'message-actions-bar': 'var(--message-actions-bar-shadow)', + 'prompt-hint-container': 'var(--prompt-hint-container-shadow)', + 'delete-chat-popover-shadow': 'var(--delete-chat-popover-shadow)', + 'sidebar-btn-shadow': 'var(--sidebar-btn-shadow)', }, colors: { - 'select-popover': 'var(--small-widget-border)', + 'select-popover': 'var(--select-popover-border)', 'slider-block': 'var(--slider-block-border)', - 'thumbnail': 'var(--small-widget-border)', + 'thumbnail': 'var(--thumbnail-border)', 'chat-actions-popover-mobile': 'var(--chat-actions-popover-mobile-border)', - 'chat-header-bottom': 'var(--panel-header-border)', - 'chat-input-top': 'var(--panel-header-border)', + 'chat-header-bottom': 'var(--chat-header-bottom-border)', + '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(--menu-item-selected-border)', - 'settings-menu-item-selected': 'var(--menu-item-selected-border)', - 'settings-header': 'var(--panel-header-border)', - 'delete-chat-popover': 'var(--small-widget-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-unselected': 'var(--chat-menu-session-unselected-border)', 'chat-menu-session-hovered': 'var(--chat-menu-session-hovered-border)', + 'text-sidebar-tab-mobile-active': 'var(--sidebar-tab-mobile-active-text)', - 'text-sidebar-tab-mobile-inactive': 'var(--weakness-text)', - 'text-btn-primary': 'var(--bg-contract-text)', - 'text-btn-danger': 'var(--danger-btn-text)', + 'text-sidebar-tab-mobile-inactive': 'var(--sidebar-tab-mobile-inactive-text)', + 'text-btn-primary': 'var(--btn-primary-text)', + 'text-btn-danger': 'var(--btn-danger-text)', 'text-btn-default': 'var(--btn-default-text)', - 'text-input': 'var(--key-text)', - 'text-list-subtitle': 'var(--weakness-text)', - 'text-slider-block': 'var(--btn-default-text)', - 'text-chat-actions-btn-popover': 'var(--bg-contract-text)', - 'text-chat-header-title': 'var(--key-text)', - 'text-chat-header-subtitle': 'var(--description-text)', - 'text-chat-input-placeholder': 'var(--description-text)', - 'text-chat-message-date': 'var(--description-text)', - 'text-chat-message-markdown-user': 'var(--bg-contract-text)', - 'text-chat-message-markdown-bot': 'var(--key-text)', - 'text-chat-panel-message-clear': 'var(--weakness-text)', - 'text-chat-panel-message-clear-revert': 'var(--message-clear-revert-text)', - 'text-chat-menu-item-title': 'var(--key-text)', - 'text-chat-menu-item-time': 'var(--menu-item-time)', - 'text-chat-menu-item-description': 'var(--description-text)', - 'text-settings-menu-title': 'var(--key-text)', - 'text-settings-menu-item-title': 'var(--key-text)', - 'text-settings-panel-header-title': 'var(--key-text)', + 'text-input': 'var(--input-text)', + 'text-list-subtitle': 'var(--list-subtitle-text)', + 'text-slider-block': 'var(--slider-block-text)', + 'text-chat-actions-btn-popover': 'var(--chat-actions-btn-popover-text)', + 'text-chat-header-title': 'var(--chat-header-title-text)', + 'text-chat-header-subtitle': 'var(--chat-header-subtitle-text)', + 'text-chat-input-placeholder': 'var(--chat-input-placeholder-text)', + 'text-chat-message-date': 'var(--chat-message-date-text)', + 'text-chat-message-markdown-user': 'var(--chat-message-markdown-user-text)', + 'text-chat-message-markdown-bot': 'var(--chat-message-markdown-bot-text)', + 'text-chat-panel-message-clear': 'var(--chat-panel-message-clear-text)', + 'text-chat-panel-message-clear-revert': 'var(--chat-panel-message-clear-revert-text)', + 'text-chat-menu-item-title': 'var(--chat-menu-item-title-text)', + 'text-chat-menu-item-time': 'var(--chat-menu-item-time-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)', + 'text-settings-panel-header-title': 'var(--settings-panel-header-title-text)', 'text-confirm-mask': 'var(--confirm-mask-text)', 'text-delete-chat-ok-btn': 'var(--delete-chat-ok-btn-text)', 'text-delete-chat-cancel-btn': 'var(--delete-chat-cancel-btn-text)', + 'text-primary-btn-disabled-dark': 'var(--primary-btn-disabled-dark-text)', }, keyframes: { mask: { @@ -224,6 +227,7 @@ module.exports = { 'chat-input': '0.5rem', 'chat-img': '0.5rem', 'slide': '0.625rem', + 'chat-model-select': '1.25rem', }, borderWidth: { DEFAULT: '1px',