add dropdown menu selection filling input box

Damianofds · Oct 23, 2024 · 6c1783c · 6c1783c
1 parent fd93dda
commit 6c1783c
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 8 deletions.
diff --git a/lib/TalkyUI.tsx b/lib/TalkyUI.tsx
@@ -43,6 +43,7 @@ const TalkyUI: React.FC<TalkUIProps> = ({
     >(createCircularStack(10));
     const [currentTalkURL, setCurrentTalkURL] = useState(initTalkURL);
     const [isTalkSwitched, setTalkSwitched] = useState<boolean>(false);
+    const [questionFromUI, setQuestionFromUI] = useState('');
 
     if (chatMessage?.type == "user-text") {
         if (get(chatMessageUserHistory, 0) != chatMessage.text) {
@@ -62,6 +63,7 @@ const TalkyUI: React.FC<TalkUIProps> = ({
             <BotTalkContext.Provider
                 value={{
                     switchBotTalk: switchTalk,
+                    setInputBoxQuestion: setQuestionFromUI,
                 }}>
                 <ConfigurationContext.Provider
                     value={{
@@ -87,6 +89,7 @@ const TalkyUI: React.FC<TalkUIProps> = ({
                         qaRouteKeyword="gogodb"
                         themeColor={themeColor}
                         fontSize={fontSize}
+                        questionFromUI={questionFromUI}
                     />
                     <br />
                 </ConfigurationContext.Provider>

diff --git a/lib/components/BotTalkContext.tsx b/lib/components/BotTalkContext.tsx
@@ -2,8 +2,10 @@ import { createContext } from "react";
 
 interface BotTalkContextType {
     switchBotTalk: (newTalkUrl: string) => void;
+    setInputBoxQuestion: (newQuestion: string) => void;
 }
 
 export const BotTalkContext = createContext<BotTalkContextType>({
     switchBotTalk: () => {},
+    setInputBoxQuestion: () => {},
 });
diff --git a/lib/components/InputBox.tsx b/lib/components/InputBox.tsx
@@ -17,6 +17,7 @@ interface InputBoxProps {
     fontSize?: string;
     themeColor?: string;
     inputBoxHistory: CirclularStack<string>;
+    questionFromUI: string;
 }
 
 const InputBox: React.FC<InputBoxProps> = ({
@@ -27,6 +28,7 @@ const InputBox: React.FC<InputBoxProps> = ({
     fontSize,
     themeColor = "#000000",
     inputBoxHistory,
+    questionFromUI,
 }) => {
     const [showBinarySubmitButtons, setShowBinarySubmitButtons] =
         useState(true);
@@ -42,7 +44,8 @@ const InputBox: React.FC<InputBoxProps> = ({
                 themeColor={themeColor}
                 showBinarySubmitButtons={
                     setShowBinarySubmitButtons
-                }></MessageSubmit>
+                }
+                questionFromUI={questionFromUI}></MessageSubmit>
             {showBinarySubmitButtons && (
                 <>
                     <AudioSubmit

diff --git a/lib/components/chatbox-entries/BotDropdownEntry.tsx b/lib/components/chatbox-entries/BotDropdownEntry.tsx
@@ -1,10 +1,21 @@
+import { useContext } from "react";
+import { BotTalkContext } from "../BotTalkContext";
+
 interface BotDropdownEntryProps {
     id: string;
 }
 
+export const NEW_NOTE_PLACEHOLDER = "NEW_NOTE_PLACEHOLDER";
+
 const BotDropdownEntry: React.FC<BotDropdownEntryProps> = ({
 
 }) => {
+    const { setInputBoxQuestion: setInputBoxQuestion } = useContext(BotTalkContext);
+
+    const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const question = (event.target.value.includes("create new note")) ? NEW_NOTE_PLACEHOLDER : event.target.value;
+        setInputBoxQuestion(question);
+    };
 
     return (
         <select
@@ -20,9 +31,9 @@ const BotDropdownEntry: React.FC<BotDropdownEntryProps> = ({
                 marginRight: "1vw",
                 border: `2px solid gray`,
                 transition: "border-color 0.3s ease-in-out",
-                content: '▼',
-            }}>
-            <option>&gt; create new note&lt;</option>
+            }}
+            onChange={handleChange}>
+            <option>🆕 create new note</option>
             <option>trip berlin</option>
             <option>office equipment</option>
             <option>party</option>

diff --git a/lib/components/inputbox-submits/MessageSubmit.tsx b/lib/components/inputbox-submits/MessageSubmit.tsx
@@ -1,9 +1,11 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import useRouteInputBoxValue from "../../../lib/hooks/useUserMessageSubmit";
 import { CirclularStack, get } from "../utils/CircularStack";
 import { ChatEntryState } from "../chatbox-entries/ChatEntryState";
 import SandClock from "../icons/SandClockIcon";
 import Send from "../icons/SendIcon";
+import { BotTalkContext } from "../BotTalkContext";
+import { NEW_NOTE_PLACEHOLDER } from "../chatbox-entries/BotDropdownEntry";
 
 interface MessageSubmitProps {
     inputRetriever: (answer: ChatEntryState) => void;
@@ -13,6 +15,7 @@ interface MessageSubmitProps {
     fontSize?: string;
     themeColor?: string;
     inputBoxHistory: CirclularStack<string>;
+    questionFromUI: string;
 }
 
 const MessageSubmit: React.FC<MessageSubmitProps> = ({
@@ -23,7 +26,9 @@ const MessageSubmit: React.FC<MessageSubmitProps> = ({
     fontSize,
     themeColor = "#000000",
     inputBoxHistory,
+    questionFromUI,
 }) => {
+    const { setInputBoxQuestion: setInputBoxQuestion } = useContext(BotTalkContext);
     const [inputValue, setInputValue] = useState("");
     const [input, setInput] = useState("");
     const [isLoading, setIsLoading] = useState(false);
@@ -32,6 +37,7 @@ const MessageSubmit: React.FC<MessageSubmitProps> = ({
         useState(0);
 
     const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setInputBoxQuestion("");
         setInputValue(event.target.value);
         showBinarySubmitButtons(!!!event.target.value);
     };
@@ -107,15 +113,28 @@ const MessageSubmit: React.FC<MessageSubmitProps> = ({
         }
     }, [isLoading]);
 
+    useEffect(() => {
+        if(questionFromUI){
+            showBinarySubmitButtons(false);
+        }
+    }, [questionFromUI]);
+
+    let placeholderFromUI ='Type your question!';
+    if(questionFromUI == NEW_NOTE_PLACEHOLDER){
+        questionFromUI = '';
+        placeholderFromUI = 'Write the new note name...';
+    }
+    placeholderFromUI = isLoading ? "waiting for response..." : placeholderFromUI;
+
     return (
         <>
             <input
                 type="text"
-                value={inputValue}
+                value={questionFromUI || inputValue}
                 onChange={handleInputChange}
                 onFocus={handleOnFocus}
                 disabled={isLoading}
-                placeholder={isLoading ? "waiting for response..." : "Type your question!"}
+                placeholder={placeholderFromUI}
                 onKeyDown={handleKeyPressed}
                 style={{
                     border: "3px solid #ccc",
@@ -132,7 +151,7 @@ const MessageSubmit: React.FC<MessageSubmitProps> = ({
                     paddingLeft: "20px",
                 }}
             />
-            {(inputValue || isLoading) && (
+            {(inputValue || questionFromUI || isLoading) && (
                 <div style={{ position: "relative", width: "50px" }}>
                     <button
                         onClick={processInput}