From fa2f8c66d1f385aa9b33e776d4bd5e9476f45225 Mon Sep 17 00:00:00 2001 From: Dean-YZG Date: Mon, 6 May 2024 22:23:21 +0800 Subject: [PATCH 1/3] feat: old page dark mode compatible --- app/components/MenuLayout/index.tsx | 1 + app/components/mask.tsx | 9 ++-- app/components/new-chat.tsx | 9 ++-- .../Chat/components/ModelSelect.tsx | 8 +++- app/containers/Chat/components/PromptHint.tsx | 17 ++++--- app/containers/Chat/index.module.scss | 47 +++++++++---------- app/containers/index.tsx | 26 +++++++++- app/hooks/useSwitchTheme.ts | 28 +++++++++++ 8 files changed, 98 insertions(+), 47 deletions(-) diff --git a/app/components/MenuLayout/index.tsx b/app/components/MenuLayout/index.tsx index 8145690c8..57f4c0c20 100644 --- a/app/components/MenuLayout/index.tsx +++ b/app/components/MenuLayout/index.tsx @@ -61,6 +61,7 @@ export default function MenuLayout<
diff --git a/app/components/mask.tsx b/app/components/mask.tsx index 82d980686..2a6cd3984 100644 --- a/app/components/mask.tsx +++ b/app/components/mask.tsx @@ -398,7 +398,7 @@ export function ContextPrompts(props: { ); } -export function MaskPage() { +export function MaskPage(props: { className?: string }) { const navigate = useNavigate(); const maskStore = useMaskStore(); @@ -470,9 +470,10 @@ export function MaskPage() { return ( <>
diff --git a/app/components/new-chat.tsx b/app/components/new-chat.tsx index aba3c5b1c..59a26ca32 100644 --- a/app/components/new-chat.tsx +++ b/app/components/new-chat.tsx @@ -72,7 +72,7 @@ function useMaskGroup(masks: Mask[]) { return groups; } -export function NewChat() { +export function NewChat(props: { className?: string }) { const chatStore = useChatStore(); const maskStore = useMaskStore(); @@ -115,9 +115,10 @@ export function NewChat() { return (
{ return ( {} })} + content={ +
+ {content({ close: () => {} })} +
+ } trigger="click" noArrow placement={ position?.poi.relativePosition[1] !== Orientation.bottom ? "lb" : "lt" } - popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover bg-model-select-popover-panel max-h-chat-actions-select-model-popover w-[280px]" + popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover bg-model-select-popover-panel w-[280px]" onShow={(e) => { if (e) { autoScrollToSelectedModal(); diff --git a/app/containers/Chat/components/PromptHint.tsx b/app/containers/Chat/components/PromptHint.tsx index ca7d59857..f956ebc43 100644 --- a/app/containers/Chat/components/PromptHint.tsx +++ b/app/containers/Chat/components/PromptHint.tsx @@ -67,15 +67,14 @@ export default function PromptHints(props: { return (
{internalPrompts.map((prompt, i) => (
} /> - } /> - } /> + + } + /> + + } + /> } /> } /> diff --git a/app/hooks/useSwitchTheme.ts b/app/hooks/useSwitchTheme.ts index 4fb094946..ac8132d62 100644 --- a/app/hooks/useSwitchTheme.ts +++ b/app/hooks/useSwitchTheme.ts @@ -1,5 +1,6 @@ import { useLayoutEffect } from "react"; import { Theme, useAppConfig } from "@/app/store/config"; +import { getCSSVar } from "../utils"; const DARK_CLASS = "dark-new"; const LIGHT_CLASS = "light-new"; @@ -17,4 +18,31 @@ export function useSwitchTheme() { document.body.classList.add(LIGHT_CLASS); } }, [config.theme]); + + useLayoutEffect(() => { + document.body.classList.remove("light"); + document.body.classList.remove("dark"); + + if (config.theme === "dark") { + document.body.classList.add("dark"); + } else if (config.theme === "light") { + document.body.classList.add("light"); + } + + const metaDescriptionDark = document.querySelector( + 'meta[name="theme-color"][media*="dark"]', + ); + const metaDescriptionLight = document.querySelector( + 'meta[name="theme-color"][media*="light"]', + ); + + if (config.theme === "auto") { + metaDescriptionDark?.setAttribute("content", "#151515"); + metaDescriptionLight?.setAttribute("content", "#fafafa"); + } else { + const themeColor = getCSSVar("--theme-color"); + metaDescriptionDark?.setAttribute("content", themeColor); + metaDescriptionLight?.setAttribute("content", themeColor); + } + }, [config.theme]); } From 4e4431339f90e3ca1741b356a7f31145396f767d Mon Sep 17 00:00:00 2001 From: Dean-YZG Date: Tue, 7 May 2024 11:22:17 +0800 Subject: [PATCH 2/3] feat: old page ui style optiminize --- app/components/exporter.module.scss | 3 +++ app/components/mask.module.scss | 4 ++++ app/components/mask.tsx | 2 -- app/components/new-chat.module.scss | 4 ++++ app/containers/index.tsx | 4 ++-- app/styles/globals.scss | 4 ---- 6 files changed, 13 insertions(+), 8 deletions(-) diff --git a/app/components/exporter.module.scss b/app/components/exporter.module.scss index 5e992e7fd..fe2a13329 100644 --- a/app/components/exporter.module.scss +++ b/app/components/exporter.module.scss @@ -2,6 +2,9 @@ &-body { margin-top: 20px; } + div:not(.no-dark) > svg { + filter: invert(0.5); + } } .export-content { diff --git a/app/components/mask.module.scss b/app/components/mask.module.scss index d66d98864..40c78a4d9 100644 --- a/app/components/mask.module.scss +++ b/app/components/mask.module.scss @@ -4,6 +4,10 @@ display: flex; flex-direction: column; + div:not(.no-dark) > svg { + filter: invert(0.5); + } + .mask-page-body { padding: 20px; overflow-y: auto; diff --git a/app/components/mask.tsx b/app/components/mask.tsx index 2a6cd3984..24c726a60 100644 --- a/app/components/mask.tsx +++ b/app/components/mask.tsx @@ -465,8 +465,6 @@ export function MaskPage(props: { className?: string }) { }); }; - const isMobileScreen = useMobileScreen(); - return ( <>
svg { + filter: invert(0.5); + } + .mask-header { display: flex; justify-content: space-between; diff --git a/app/containers/index.tsx b/app/containers/index.tsx index 7552d31b1..68047e7c6 100644 --- a/app/containers/index.tsx +++ b/app/containers/index.tsx @@ -117,7 +117,7 @@ export default function Home() { @@ -129,7 +129,7 @@ export default function Home() { diff --git a/app/styles/globals.scss b/app/styles/globals.scss index 8bbbbc17f..8e2c744a2 100644 --- a/app/styles/globals.scss +++ b/app/styles/globals.scss @@ -38,10 +38,6 @@ --border-in-light: 1px solid rgba(255, 255, 255, 0.192); --theme-color: var(--gray); - - div:not(.no-dark) > svg { - filter: invert(0.5); - } } .light { From 240d33000101cad4b4a81da9ee514fbe6b1156e6 Mon Sep 17 00:00:00 2001 From: Dean-YZG Date: Tue, 7 May 2024 15:05:29 +0800 Subject: [PATCH 3/3] feat: 1)add font source 2)add validator in ListItem 3)settings page ui optiminize --- app/components/Btn/index.tsx | 2 +- app/components/Input/index.tsx | 8 ++- app/components/List/index.tsx | 50 +++++++++++++++--- app/components/Select/index.tsx | 2 +- .../Chat/components/ChatInputPanel.tsx | 2 +- .../Chat/components/ChatMessagePanel.tsx | 2 +- .../Settings/components/ModelSetting.tsx | 11 +++- app/containers/Settings/index.tsx | 6 +-- app/fonts/Satoshi-Variable.ttf | Bin 0 -> 127420 bytes app/fonts/Satoshi-Variable.woff | Bin 0 -> 35160 bytes app/fonts/Satoshi-Variable.woff2 | Bin 0 -> 42588 bytes app/locales/cn.ts | 1 + app/locales/en.ts | 1 + app/styles/base-new.scss | 4 +- app/styles/globals.css | 5 +- tailwind.config.js | 2 + 16 files changed, 77 insertions(+), 19 deletions(-) create mode 100644 app/fonts/Satoshi-Variable.ttf create mode 100644 app/fonts/Satoshi-Variable.woff create mode 100644 app/fonts/Satoshi-Variable.woff2 diff --git a/app/components/Btn/index.tsx b/app/components/Btn/index.tsx index c9ba305bf..9a65a50ba 100644 --- a/app/components/Btn/index.tsx +++ b/app/components/Btn/index.tsx @@ -42,7 +42,7 @@ export default function Btn(props: BtnProps) { } text-text-btn-primary `; break; case "danger": - btnClassName = `bg-danger-btn text-text-btn-danger hover:bg-hovered-btn`; + btnClassName = `bg-danger-btn text-text-btn-danger hover:bg-hovered-danger-btn`; break; default: btnClassName = `bg-default-btn text-text-btn-default hover:bg-hovered-btn`; diff --git a/app/components/Input/index.tsx b/app/components/Input/index.tsx index 9e28e886a..79826a4b4 100644 --- a/app/components/Input/index.tsx +++ b/app/components/Input/index.tsx @@ -4,7 +4,6 @@ import { DetailedHTMLProps, InputHTMLAttributes, useContext, - useEffect, useLayoutEffect, useState, } from "react"; @@ -17,6 +16,7 @@ export interface CommonInputProps > { className?: string; } + export interface NumberInputProps { onChange?: (v: number) => void; type?: "number"; @@ -49,12 +49,16 @@ export default function Input(props: CommonInputProps & InputProps) { const internalType = (show && "text") || type; - const { update } = useContext(List.ListContext); + const { update, handleValidate } = useContext(List.ListContext); useLayoutEffect(() => { update?.({ type: "input" }); }, []); + useLayoutEffect(() => { + handleValidate?.(value); + }, [value]); + return (
void; nextline?: boolean; + validator?: (v: any) => Error | Promise; } export const ListContext = createContext< - { isMobileScreen?: boolean; update?: (m: ChildrenMeta) => void } & WidgetStyle + { + isMobileScreen?: boolean; + update?: (m: ChildrenMeta) => void; + handleValidate?: (v: any) => void; + } & WidgetStyle >({ isMobileScreen: false }); export function ListItem(props: ListItemProps) { @@ -48,6 +63,7 @@ export function ListItem(props: ListItemProps) { subTitle, children, nextline, + validator, } = props; const context = useContext(ListContext); @@ -56,9 +72,11 @@ export function ListItem(props: ListItemProps) { const { inputNextLine, rangeNextLine } = context; + const { type, error } = childrenMeta; + let internalNextLine; - switch (childrenMeta.type) { + switch (type) { case "input": internalNextLine = !!(nextline || inputNextLine); break; @@ -70,7 +88,22 @@ export function ListItem(props: ListItemProps) { } const update = useCallback((m: ChildrenMeta) => { - setMeta(m); + setMeta((pre) => ({ ...pre, ...m })); + }, []); + + const handleValidate = useCallback((v: any) => { + const insideValidator = validator || (() => {}); + + Promise.resolve(insideValidator(v)).then((result) => { + if (result && result.error) { + return update({ + error: result.message, + }); + } + update({ + error: undefined, + }); + }); }, []); return ( @@ -88,13 +121,18 @@ export function ListItem(props: ListItemProps) {
{subTitle}
)}
- +
- {children} +
{children}
+ {!!error && ( +
+
{error}
+
+ )}
diff --git a/app/components/Select/index.tsx b/app/components/Select/index.tsx index 728d97b41..640b98737 100644 --- a/app/components/Select/index.tsx +++ b/app/components/Select/index.tsx @@ -96,7 +96,7 @@ const Select = (props: SearchProps) => { className={selectClassName} >
( {!isMobileScreen && (
 
-
+
{Locale.Chat.Input(submitKey)}