根据使用习惯微调一下UI

ChatGPTNextWeb · Jun 6, 2024 · c5925ab · c5925ab
1 parent f139d6a
commit c5925ab
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 35 deletions.
diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss
@@ -87,6 +87,14 @@
       }
     }
 
+    &[data-expanded="true"] {
+      width: var(--full-width) !important; /* 始终保持展开状态 */
+      .text {
+        opacity: 1;
+        transform: translate(0);
+      }
+    }
+
     .text,
     .icon {
       display: flex;
@@ -458,7 +466,7 @@
     width: $calc-image-width;
     height: $calc-image-width;
   }
-  
+
   .chat-message-item-image {
     max-width: calc(100vw/3*2);
   }
@@ -624,4 +632,4 @@
   .chat-input-send {
     bottom: 30px;
   }
-}
+}
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
@@ -341,6 +341,7 @@ function ChatAction(props: {
   text: string;
   icon: JSX.Element;
   onClick: () => void;
+  isExpanded?: boolean;
 }) {
   const iconRef = useRef<HTMLDivElement>(null);
   const textRef = useRef<HTMLDivElement>(null);
@@ -360,6 +361,9 @@ function ChatAction(props: {
     });
   }
 
+  useEffect(() => {
+    updateWidth();
+  }, [props.icon, props.text]);
   return (
     <div
       className={`${styles["chat-input-action"]} clickable`}
@@ -375,6 +379,7 @@ function ChatAction(props: {
           "--full-width": `${width.full}px`,
         } as React.CSSProperties
       }
+      data-expanded={props.isExpanded} // 使用 data 属性来控制样式
     >
       <div ref={iconRef} className={styles["icon"]}>
         {props.icon}
@@ -520,21 +525,21 @@ export function ChatActions(props: {
           icon={props.uploading ? <LoadingButtonIcon /> : <ImageIcon />}
         />
       )}
-      <ChatAction
-        onClick={nextTheme}
-        text={Locale.Chat.InputActions.Theme[theme]}
-        icon={
-          <>
-            {theme === Theme.Auto ? (
-              <AutoIcon />
-            ) : theme === Theme.Light ? (
-              <LightIcon />
-            ) : theme === Theme.Dark ? (
-              <DarkIcon />
-            ) : null}
-          </>
-        }
-      />
+      {/*<ChatAction*/}
+      {/*  onClick={nextTheme}*/}
+      {/*  text={Locale.Chat.InputActions.Theme[theme]}*/}
+      {/*  icon={*/}
+      {/*    <>*/}
+      {/*      {theme === Theme.Auto ? (*/}
+      {/*        <AutoIcon />*/}
+      {/*      ) : theme === Theme.Light ? (*/}
+      {/*        <LightIcon />*/}
+      {/*      ) : theme === Theme.Dark ? (*/}
+      {/*        <DarkIcon />*/}
+      {/*      ) : null}*/}
+      {/*    </>*/}
+      {/*  }*/}
+      {/*/>*/}
 
       <ChatAction
         onClick={props.showPromptHints}
@@ -551,25 +556,28 @@ export function ChatActions(props: {
       />
 
       <ChatAction
-        text={Locale.Chat.InputActions.Clear}
-        icon={<BreakIcon />}
-        onClick={() => {
-          chatStore.updateCurrentSession((session) => {
-            if (session.clearContextIndex === session.messages.length) {
-              session.clearContextIndex = undefined;
-            } else {
-              session.clearContextIndex = session.messages.length;
-              session.memoryPrompt = ""; // will clear memory
-            }
-          });
-        }}
-      />
-
-      <ChatAction
+        isExpanded={true}
         onClick={() => setShowModelSelector(true)}
         text={currentModel}
         icon={<RobotIcon />}
       />
+      <div style={{ marginLeft: "auto" }}>
+        <ChatAction
+          isExpanded={true}
+          text={Locale.Chat.InputActions.Clear}
+          icon={<BreakIcon />}
+          onClick={() => {
+            chatStore.updateCurrentSession((session) => {
+              if (session.clearContextIndex === session.messages.length) {
+                session.clearContextIndex = undefined;
+              } else {
+                session.clearContextIndex = session.messages.length;
+                session.memoryPrompt = ""; // will clear memory
+              }
+            });
+          }}
+        />
+      </div>
 
       {showModelSelector && (
         <Selector

diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
@@ -158,7 +158,7 @@ export function SideBar(props: { className?: string }) {
           NextChat
         </div>
         <div className={styles["sidebar-sub-title"]}>
-          Build your own AI assistant.
+          Build your own AI assistant. (by chenzhen)
         </div>
         <div className={styles["sidebar-logo"] + " no-dark"}>
           <ChatGptIcon />

diff --git a/app/constant.ts b/app/constant.ts
@@ -1,4 +1,4 @@
-export const OWNER = "Yidadaa";
+export const OWNER = "imaiya";
 export const REPO = "ChatGPT-Next-Web";
 export const REPO_URL = `https://github.com/${OWNER}/${REPO}`;
 export const ISSUE_URL = `https://github.com/${OWNER}/${REPO}/issues`;
@@ -149,7 +149,7 @@ const openaiModels = [
   "gpt-4o",
   "gpt-4o-2024-05-13",
   "gpt-4-vision-preview",
-  "gpt-4-turbo-2024-04-09"
+  "gpt-4-turbo-2024-04-09",
 ];
 
 const googleModels = [