style changed

haoxiang-xu · Feb 24, 2025 · 1acb759 · 1acb759
1 parent fb632a3
commit 1acb759
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 25 deletions.
diff --git a/src/BUILTIN_COMPONENTs/input/input.js b/src/BUILTIN_COMPONENTs/input/input.js
@@ -19,6 +19,7 @@ const Input = ({
   onSubmit,
   onFocus,
   setOnFocus,
+  setInputHeight,
   ...props
 }) => {
   const { ollamaOnTask } = useContext(StatusContexts);
@@ -53,6 +54,7 @@ const Input = ({
   useEffect(() => {
     if (inputRef.current) {
       setHeight(inputRef.current.clientHeight + 12);
+      setInputHeight(inputRef.current.clientHeight + 12);
     }
   }, [value, window.innerWidth, window.innerHeight]);
 

diff --git a/src/COMPONENTs/message_list/message_list.js b/src/COMPONENTs/message_list/message_list.js
@@ -479,6 +479,7 @@ const Model_Menu = ({ value }) => {
   const { ollamaOnTask, componentOnFocus, setComponentOnFocus } =
     useContext(StatusContexts);
   const { ollama_list_available_models } = useContext(RequestContexts);
+  const { inputHeight } = useContext(ChatSectionContexts);
 
   const [onHover, setOnHover] = useState(false);
   useEffect(() => {
@@ -498,29 +499,24 @@ const Model_Menu = ({ value }) => {
       style={{
         userSelect: "none",
         transition:
-          "left 0.12s cubic-bezier(0.72, -0.16, 0.2, 1.16)," +
-          " opacity 0.12s cubic-bezier(0.72, -0.16, 0.2, 1.16)," +
+          "bottom 0.12s cubic-bezier(0.72, -0.16, 0.2, 1.16)," +
+          "left 0.24s cubic-bezier(0.72, -0.16, 0.2, 1.16)," +
+          " opacity 0.24s cubic-bezier(0.72, -0.16, 0.2, 1.16)," +
           " border 0.12s cubic-bezier(0.72, -0.16, 0.2, 1.16)," +
+          " box-shadow 0.24s cubic-bezier(0.72, -0.16, 0.2, 1.16)," +
           " padding 0.12s cubic-bezier(0.72, -0.16, 0.2, 1.16)",
         position: "absolute",
-        bottom: 35,
-        left:
+        bottom:
           value.length !== 0 || ollamaOnTask !== null
-            ? 50 + default_padding
-            : 50,
+            ? Math.max(inputHeight + 35, 84)
+            : 35,
+        left: value.length !== 0 || ollamaOnTask !== null ? 0 : 50,
 
         fontSize: default_font_size + 2,
         fontFamily: "inherit",
         fontWeight: 500,
 
-        opacity:
-          value.length !== 0 || ollamaOnTask !== null
-            ? 0
-            : componentOnFocus === sub_component_name
-            ? 1
-            : onHover
-            ? 0.5
-            : 0.5,
+        opacity: ollamaOnTask !== null ? 0 : 1,
         padding: componentOnFocus === sub_component_name ? "5px" : "2px 6px",
 
         borderRadius: componentOnFocus === sub_component_name ? 8 : 4,
@@ -537,17 +533,16 @@ const Model_Menu = ({ value }) => {
         backgroundColor:
           componentOnFocus === sub_component_name
             ? messageList.model_menu.backgroundColor_onActive
-            : onHover
-            ? messageList.model_menu.backgroundColor_onHover
-            : `rgba(225, 225, 225, 0)`,
+            : messageList.model_menu.backgroundColor,
+
         boxShadow:
           onHover || componentOnFocus === sub_component_name
-            ? boxShadow.middle
+            ? messageList.model_menu.boxShadow_onHover
             : "none",
         cursor: "pointer",
         backdropFilter:
           componentOnFocus === sub_component_name ? "blur(16px)" : "none",
-        pointerEvents: value.length !== 0 ? "none" : "auto",
+        pointerEvents: ollamaOnTask !== null ? "none" : "auto",
       }}
       onMouseEnter={(e) => {
         setOnHover(true);
@@ -600,7 +595,7 @@ const Input_Section = ({ inputValue, setInputValue, on_input_submit }) => {
     useContext(ConfigContexts);
   const { windowWidth, componentOnFocus } = useContext(StatusContexts);
   const { force_stop_ollama } = useContext(RequestContexts);
-  const { awaitResponse } = useContext(ChatSectionContexts);
+  const { awaitResponse, setInputHeight } = useContext(ChatSectionContexts);
   const [style, setStyle] = useState({
     colorOffset: 0,
     opacity: 0,
@@ -661,6 +656,7 @@ const Input_Section = ({ inputValue, setInputValue, on_input_submit }) => {
         onSubmit={on_input_submit}
         onFocus={onFocus}
         setOnFocus={setOnFocus}
+        setInputHeight={setInputHeight}
         style={{
           transition: "height 0.16s cubic-bezier(0.72, -0.16, 0.2, 1.16)",
           position: "absolute",
@@ -787,6 +783,7 @@ const Message_List = () => {
     useContext(RequestContexts);
 
   const [inputValue, setInputValue] = useState("");
+  const [inputHeight, setInputHeight] = useState(0);
   const [awaitResponse, setAwaitResponse] = useState(null);
 
   /* { Target Address } ------------------------------------------------------------------------------ */
@@ -878,6 +875,8 @@ const Message_List = () => {
         setArrivedAtPosition,
         preLoadingCompleted,
         setPreLoadingCompleted,
+        inputHeight,
+        setInputHeight,
 
         update_message,
       }}

diff --git a/src/CONTAINERs/config/container.js b/src/CONTAINERs/config/container.js
@@ -132,13 +132,15 @@ const ConfigContainer = ({ children }) => {
       if (theme === "dark_theme") {
         return {
           model_menu: {
+            backgroundColor: `rgba(${RGB.R}, ${RGB.G}, ${RGB.B}, 1)`,
             backgroundColor_onHover: `rgba(225, 225, 225, 0.08)`,
             backgroundColor_onActive: `rgba(${RGB.R}, ${RGB.G}, ${RGB.B}, 0.64)`,
-            border: `1px solid rgba(225, 225, 225, 0.5)`,
-            border_onHover: `1px solid rgba(225, 225, 225, 0.64)`,
+            border: `1px solid rgba(225, 225, 225, 0.24)`,
+            border_onHover: `1px solid rgba(225, 225, 225, 0.32)`,
             border_onActive: `1px solid rgba(255, 255, 255, 0.12)`,
-            color: `rgba(225, 225, 225, 0.72)`,
+            color: `rgba(225, 225, 225, 0.36)`,
             color_onActive: `rgba(225, 225, 225, 0.32)`,
+            boxShadow_onHover: "0px 4px 16px rgba(0, 0, 0, 0.32)",
           },
           add_model_button: {
             backgroundColor_onHover: `rgba(${RGB.R + 30}, ${RGB.G + 30}, ${
@@ -193,15 +195,17 @@ const ConfigContainer = ({ children }) => {
       } else {
         return {
           model_menu: {
+            backgroundColor: `rgba(${RGB.R}, ${RGB.G}, ${RGB.B}, 1)`,
             backgroundColor_onHover: `rgba(225, 225, 225, 1)`,
             backgroundColor_onActive: `rgba(${RGB.R - 45}, ${RGB.G - 45}, ${
               RGB.B - 45
             }, 0.72)`,
-            border: `1px solid rgba(0, 0, 0, 0.5)`,
+            border: `1px solid rgba(0, 0, 0, 0.24)`,
             border_onHover: `1px solid rgba(0, 0, 0, 0.32)`,
             border_onActive: `1px solid rgba(0, 0, 0, 0.12)`,
-            color: `rgba(0, 0, 0, 0.72)`,
+            color: `rgba(0, 0, 0, 0.36)`,
             color_onActive: `rgba(0, 0, 0, 0.72)`,
+            boxShadow_onHover: "0px 4px 16px rgba(0, 0, 0, 0.16)",
           },
           add_model_button: {
             backgroundColor_onHover: `rgba(${RGB.R}, ${RGB.G}, ${RGB.B}, 0.5)`,