From 6570ed0e57d77f9bb8e3671633399e4a0d6faae0 Mon Sep 17 00:00:00 2001 From: sherifButt <90522472+sherifButt@users.noreply.github.com> Date: Sat, 9 Mar 2024 14:46:11 +0000 Subject: [PATCH] - refactored chatContainer to handle both promptInput and dyanamicInput - added toggle button between text promptInput and dynamicInput - added options sellect with 3 redering types, List, dropdown, buttons - styled OptionSelect component to match anythingllm buttons theme --- .../DynamicInput/OptionSelect/index.jsx | 79 +++++++++++++++++++ .../ChatContainer/DynamicInput/index.jsx | 63 +++++++++++++++ .../ChatContainer/PromptInput/index.jsx | 2 +- .../WorkspaceChat/ChatContainer/index.jsx | 69 +++++++++++++--- .../src/components/WorkspaceChat/index.jsx | 14 +++- 5 files changed, 211 insertions(+), 16 deletions(-) create mode 100644 frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/OptionSelect/index.jsx create mode 100644 frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/index.jsx diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/OptionSelect/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/OptionSelect/index.jsx new file mode 100644 index 00000000..f8b4d7ef --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/OptionSelect/index.jsx @@ -0,0 +1,79 @@ +const OptionSelect = ({ data, settings }) => { + const handleSelection = (value) => { + // Implement your logic to handle selection + console.log(value); + }; + + // Grid of Buttons + if (settings.displayType === "buttons") { + return ( +
+ {data.options.map((option, index) => ( + + ))} +
+ ); + } + + // Normal List with Hyperlinks + if (settings.displayType === "list") { + return ( +
+ {data.options.map((option, index) => ( + +

{option.label}

+ + ))} +
+ ); + } + + // Dropdown Menu + return ( +
+
+ +

+ {data?.description} +

+
+ +
+ ); +}; + +export default OptionSelect; diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/index.jsx new file mode 100644 index 00000000..fbebab6c --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/index.jsx @@ -0,0 +1,63 @@ +import React from "react"; +// import TextInput from './TextInput'; +import OptionSelect from "@/components/WorkspaceChat/ChatContainer/DynamicInput/OptionSelect"; +import { ArrowUUpLeft, Keyboard } from "@phosphor-icons/react"; +// import RangeSlider from './RangeSlider'; +// import DatePicker from './DatePicker'; +// import TimePicker from './TimePicker'; +// import DateTimePicker from './DateTimePicker'; +// import FileUpload from './FileUpload'; +// import Rating from './Rating'; +// import Checkbox from './Checkbox'; + +const inputComponents = { + // text: TextInput, + options: OptionSelect, + // range: RangeSlider, + // date: DatePicker, + // time: TimePicker, + // datetime: DateTimePicker, + // file: FileUpload, + // rating: Rating, + // checkbox: Checkbox +}; + +const DynamicInput = ({ + inputs, + isDynamicInput, + isForcedTextInput, + setIsForcedTextInput, +}) => { + const InputComponent = inputComponents[inputs?.type] || null; + if (!InputComponent) { + return null; // or any fallback UI + } + return ( +
+
+ + {isDynamicInput && inputs != undefined && ( +
+ +
+ )} +
+
+ ); +}; + +export default DynamicInput; diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx index 2b9c5ca4..f545d692 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx @@ -52,7 +52,7 @@ export default function PromptInput({ const watchForSlash = debounce(checkForSlash, 300); return ( -
+
{ setMessage(event.target.value); }; @@ -123,6 +130,31 @@ export default function ChatContainer({ workspace, knownHistory = [], isDynamicI loadingResponse === true && fetchReply(); }, [loadingResponse, chatHistory, workspace]); + const renderInputComponent = () => { + if ( + !isDynamicInput || + currentInputMeta?.inputs?.type === "text" || + currentInputMeta?.inputs === undefined || + isForcedTextInput + ) { + return ( + + ); + } + + if (currentInputMeta?.inputs?.type !== "text") { + return ; + } + }; + return (
- + {renderInputComponent()} + {isDynamicInput && currentInputMeta?.inputs != undefined && ( +
+ +
+ )}
); diff --git a/frontend/src/components/WorkspaceChat/index.jsx b/frontend/src/components/WorkspaceChat/index.jsx index 964b6319..dbbd9370 100644 --- a/frontend/src/components/WorkspaceChat/index.jsx +++ b/frontend/src/components/WorkspaceChat/index.jsx @@ -11,8 +11,9 @@ export default function WorkspaceChat({ loading, workspace }) { const { threadSlug = null } = useParams(); const [history, setHistory] = useState([]); const [loadingHistory, setLoadingHistory] = useState(true); + const [currentInputMeta, setCurrentInputMeta] = useState(null); - const isDynamicInput = false; + const isDynamicInput = true; useEffect(() => { async function getHistory() { @@ -34,6 +35,7 @@ export default function WorkspaceChat({ loading, workspace }) { const { remainingText, metaData } = extractMetaData( message.content ); + setCurrentInputMeta(metaData); return { ...message, content: remainingText, metaData }; } return message; @@ -79,7 +81,15 @@ export default function WorkspaceChat({ loading, workspace }) { } setEventDelegatorForCodeSnippets(); - return ; + return ( + + ); } // Enables us to safely markdown and sanitize all responses without risk of injection