feat: 1)add font source 2)add validator in ListItem 3)settings page u…

…i optiminize
ChatGPTNextWeb · May 7, 2024 · 240d330 · 240d330
1 parent 4e44313
commit 240d330
Show file tree

Hide file tree

Showing 16 changed files with 77 additions and 19 deletions.
diff --git 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
@@ -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 (
     <div
       className={` group/input w-[100%] rounded-chat-input bg-input transition-colors duration-300 ease-in-out flex gap-3 items-center px-3 py-2 ${className} hover:bg-select-hover ${inputClassName}`}

diff --git a/app/components/List/index.tsx b/app/components/List/index.tsx
@@ -17,6 +17,7 @@ interface WidgetStyle {
 
 interface ChildrenMeta {
   type?: "unknown" | "input" | "range";
+  error?: string;
 }
 
 export interface ListProps {
@@ -27,17 +28,31 @@ export interface ListProps {
   widgetStyle?: WidgetStyle;
 }
 
+type Error =
+  | {
+      error: true;
+      message: string;
+    }
+  | {
+      error: false;
+    };
+
 export interface ListItemProps {
   title: string;
   subTitle?: string;
   children?: JSX.Element | JSX.Element[];
   className?: string;
   onClick?: () => void;
   nextline?: boolean;
+  validator?: (v: any) => Error | Promise<Error>;
 }
 
 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) {
           <div className={` text-sm text-text-list-subtitle`}>{subTitle}</div>
         )}
       </div>
-      <ListContext.Provider value={{ ...context, update }}>
+      <ListContext.Provider value={{ ...context, update, handleValidate }}>
         <div
           className={`${
             internalNextLine ? "mt-[0.625rem]" : "max-w-[70%]"
-          } flex items-center justify-center`}
+          } flex flex-col items-center justify-center`}
         >
-          {children}
+          <div>{children}</div>
+          {!!error && (
+            <div className="text-text-btn-danger text-sm-mobile-tab mt-[0.3125rem] flex items-start w-[100%]">
+              <div className="">{error}</div>
+            </div>
+          )}
         </div>
       </ListContext.Provider>
     </div>

diff --git a/app/components/Select/index.tsx b/app/components/Select/index.tsx
@@ -96,7 +96,7 @@ const Select = <Value extends number | string>(props: SearchProps<Value>) => {
       className={selectClassName}
     >
       <div
-        className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-time text-sm-title  cursor-pointer hover:bg-select-hover transition duration-300 ease-in-out`}
+        className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-common text-sm-title  cursor-pointer hover:bg-select-hover transition duration-300 ease-in-out`}
         ref={contentRef}
       >
         <div

diff --git a/app/containers/Chat/components/ChatInputPanel.tsx b/app/containers/Chat/components/ChatInputPanel.tsx
@@ -301,7 +301,7 @@ export default forwardRef<ChatInputPanelInstance, ChatInputPanelProps>(
             {!isMobileScreen && (
               <div className="flex items-center justify-center text-sm gap-3">
                 <div className="flex-1">&nbsp;</div>
-                <div className="text-text-chat-input-placeholder text-time line-clamp-1">
+                <div className="text-text-chat-input-placeholder font-common line-clamp-1">
                   {Locale.Chat.Input(submitKey)}
                 </div>
                 <Btn

diff --git a/app/containers/Chat/components/ChatMessagePanel.tsx b/app/containers/Chat/components/ChatMessagePanel.tsx
@@ -185,7 +185,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
                 }`}
               >
                 <div
-                  className={` pointer-events-none  text-text-chat-message-date text-right text-time whitespace-nowrap transition-all duration-500 text-sm absolute z-1 ${
+                  className={` pointer-events-none  text-text-chat-message-date text-right font-common whitespace-nowrap transition-all duration-500 text-sm absolute z-1 ${
                     isUser ? "right-0" : "left-0"
                   } bottom-[100%] hidden group-hover:block`}
                 >

diff --git a/app/containers/Settings/components/ModelSetting.tsx b/app/containers/Settings/components/ModelSetting.tsx
@@ -153,14 +153,23 @@ export default function ModelSetting(props: {
             title={Locale.Settings.InputTemplate.Title}
             subTitle={Locale.Settings.InputTemplate.SubTitle}
             nextline={isMobileScreen}
+            validator={(v: string) => {
+              if (!v.includes("{{input}}")) {
+                return {
+                  error: true,
+                  message: Locale.Settings.InputTemplate.Error,
+                };
+              }
+
+              return { error: false };
+            }}
           >
             <Input
               type="text"
               value={props.modelConfig.template}
               onChange={(e = "") =>
                 props.updateConfig((config) => (config.template = e))
               }
-              className="text-center"
             ></Input>
           </ListItem>
         </>

diff --git a/app/containers/Settings/index.tsx b/app/containers/Settings/index.tsx
@@ -71,15 +71,13 @@ export default MenuLayout(function SettingList(props) {
               cursor-pointer
               border 
               rounded-md
-
-              bg-chat-menu-session-unselected border-chat-menu-session-unselected
+              border-transparent
               ${
                 selected === i.id && !isMobileScreen
                   ? `!bg-chat-menu-session-selected !border-chat-menu-session-selected !font-medium`
-                  : `hover:bg-chat-menu-session-hovered hover:chat-menu-session-hovered`
+                  : `hover:bg-chat-menu-session-unselected hover:border-chat-menu-session-unselected`
               }
 
-              hover:border-opacity-100 hover:font-semibold hover:bg-settings-menu-item-selected 
               flex justify-between items-center
               max-md:bg-settings-menu-item-mobile
             `}

diff --git a/app/fonts/Satoshi-Variable.ttf b/app/fonts/Satoshi-Variable.ttf
diff --git a/app/fonts/Satoshi-Variable.woff b/app/fonts/Satoshi-Variable.woff
diff --git a/app/fonts/Satoshi-Variable.woff2 b/app/fonts/Satoshi-Variable.woff2
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
@@ -170,6 +170,7 @@ const cn = {
     InputTemplate: {
       Title: "用户输入预处理",
       SubTitle: "用户最新的一条消息会填充到此模板",
+      Error: "模板中必须携带占位符{{input}}",
     },
 
     Update: {

diff --git a/app/locales/en.ts b/app/locales/en.ts
@@ -174,6 +174,7 @@ const en: LocaleType = {
     InputTemplate: {
       Title: "Input Template",
       SubTitle: "Newest message will be filled to this template",
+      Error: "Placeholder {{input}} must be included in the template",
     },
 
     Update: {

diff --git a/app/styles/base-new.scss b/app/styles/base-new.scss
@@ -64,6 +64,7 @@ body {
   --danger-btn-bg: #fff6f6;
   --default-btn-bg: #f7f7f8;
   --hovered-btn-bg: rgba(0, 0, 0, 0.05);
+  --hovered-danger-btn-bg: #FFE7E7;
   --card-bg: #fff;
   --input-bg: #f7f7f8;
   --list-item-divider-bg: #f0f0f3;
@@ -191,6 +192,7 @@ body {
   --danger-btn-bg: #20131A;
   --default-btn-bg: #1D1D1D;
   --hovered-btn-bg: #303030;
+  --hovered-danger-btn-bg:#303030;
   --card-bg: #111;
   --input-bg: #1D1D1D;
   --list-item-divider-bg: #303030;
@@ -216,7 +218,7 @@ body {
   --chat-panel-message-mobile-bg: #303030;
   --chat-message-actions-btn-hovered-bg: rgba(255, 255, 255, 0.05);
   --chat-panel-bg: #1D1D1D;
-  --chat-panel-message-clear-divider-bg: #e2e2e6; //////////
+  --chat-panel-message-clear-divider-bg: #a5a5b3;
   --chat-menu-session-selected-bg: #182455;
   --chat-menu-session-unselected-bg: #303030;
   --chat-menu-session-hovered-bg: #404040;

diff --git a/app/styles/globals.css b/app/styles/globals.css
@@ -13,6 +13,9 @@
     font-feature-settings:
       "clig" off,
       "liga" off;
-    src: url(/fonts/Roboto.woff2) format("woff2");
+    src:
+      url("../fonts/Satoshi-Variable.woff2") format("woff2"),
+      url("../fonts/Satoshi-Variable.woff") format("woff"),
+      url("../fonts/Satoshi-Variable.ttf") format("truetype");
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -90,6 +90,7 @@ module.exports = {
         'danger-btn': 'var(--danger-btn-bg)',
         'default-btn': 'var(--default-btn-bg)',
         'hovered-btn': 'var(--hovered-btn-bg)',
+        'hovered-danger-btn': 'var(--hovered-danger-btn-bg)',
         'card': 'var(--card-bg)',
         'input': 'var(--input-bg)',
         'list-item-divider': 'var(--list-item-divider-bg)',
@@ -186,6 +187,7 @@ module.exports = {
         'chat-menu-session-unselected-mobile': 'var(--chat-menu-session-unselected-mobile-border)',
         'chat-menu-session-hovered': 'var(--chat-menu-session-hovered-border)',
         'modal-header-bottom': 'var(--modal-header-bottom-border)',
+        'transparent': 'transparent',
 
         'text-sidebar-tab-mobile-active': 'var(--sidebar-tab-mobile-active-text)',
         'text-sidebar-tab-mobile-inactive': 'var(--sidebar-tab-mobile-inactive-text)',