From 1acb759f7c26a87958a304c5dc8502bf0d3452e1 Mon Sep 17 00:00:00 2001 From: Haoxiang Xu Date: Sun, 23 Feb 2025 21:16:25 -0800 Subject: [PATCH] style changed --- src/BUILTIN_COMPONENTs/input/input.js | 2 ++ src/COMPONENTs/message_list/message_list.js | 39 ++++++++++----------- src/CONTAINERs/config/container.js | 14 +++++--- 3 files changed, 30 insertions(+), 25 deletions(-) diff --git a/src/BUILTIN_COMPONENTs/input/input.js b/src/BUILTIN_COMPONENTs/input/input.js index 6b35617..4708da6 100644 --- 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 index d97d7db..11ae810 100644 --- 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 index 9f6da6d..7f66f79 100644 --- 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)`,