From a3c5480442564df7030dd643b4c7f65e9eeacc5c Mon Sep 17 00:00:00 2001
From: sherifButt <90522472+sherifButt@users.noreply.github.com>
Date: Mon, 11 Mar 2024 15:57:19 +0000
Subject: [PATCH] - added checkbox for multy selection

---
 .../DynamicInput/OptionSelect/index.jsx       | 87 ++++++++++++++++---
 .../ChatContainer/DynamicInput/index.jsx      | 63 +++++++-------
 2 files changed, 108 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/OptionSelect/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/OptionSelect/index.jsx
index a2b69654..ce60d9a4 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/OptionSelect/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/OptionSelect/index.jsx
@@ -1,7 +1,10 @@
+import { PaperPlaneRight } from "@phosphor-icons/react";
 import { useEffect, useState } from "react";
 
 const OptionSelect = ({ data, settings, submit, message, setMessage }) => {
+  const [selectedOptions, setSelectedOptions] = useState([]);
   const [submitMessage, setSubmitMessage] = useState(false);
+
   useEffect(() => {
     if (submitMessage) {
       submit();
@@ -10,7 +13,20 @@ const OptionSelect = ({ data, settings, submit, message, setMessage }) => {
   }, [message]);
 
   const handleSelection = (value) => {
-    setMessage(value);
+    const currentIndex = selectedOptions.indexOf(value);
+    const newSelectedOptions = [...selectedOptions];
+
+    if (currentIndex === -1) {
+      newSelectedOptions.push(value);
+    } else {
+      newSelectedOptions.splice(currentIndex, 1);
+    }
+
+    setSelectedOptions(newSelectedOptions);
+    setMessage(newSelectedOptions.join(", "));
+  };
+
+  const handleSubmit = () => {
     setSubmitMessage(true);
   };
 
@@ -24,14 +40,19 @@ const OptionSelect = ({ data, settings, submit, message, setMessage }) => {
             <button
               key={index}
               className="group relative shadow-lg hover:shadow-sm transition-all duration-200 ease-in-out text-left p-2.5 border rounded-xl border-white/20 bg-sidebar hover:bg-sidebar/50 overflow-hidden "
-              onClick={() => handleSelection(option.value)}
+              onClick={() => {
+                {
+                  handleSelection(option.value);
+                  handleSubmit();
+                }
+              }}
             >
               <p className="truncate max-w-xl group-hover:max-w-xl group-hover:truncate-0">
-                <span style={{ color: "grey" }}>{index + 1}.</span>{" "}
+                <span className="text-white/50 mr-1">{index + 1}.</span>{" "}
                 {option.label}
               </p>
               <span className="absolute invisible group-hover:visible bg-black text-white text-xs rounded-lg p-2 left-0 bottom-full mb-2">
-                <span style={{ color: "grey" }}>{index + 1}.</span>{" "}
+                <span className="text-white/50 mr-1">{index + 1}.</span>{" "}
                 {option.label}
               </span>
             </button>
@@ -51,10 +72,16 @@ const OptionSelect = ({ data, settings, submit, message, setMessage }) => {
             key={index}
             href={option.href} // assuming `href` is available in your option object
             className="block p-2.5 border-b border-white/10 last:border-0 hover:bg-sidebar/50 cursor-pointer"
-            onClick={() => handleSelection(option.value)}
+            onClick={() => {
+              {
+                handleSelection(option.value);
+                handleSubmit();
+              }
+            }}
           >
             <p className="">
-              <span style={{ color: "grey" }}>{index + 1}.</span> {option.label}
+              <span className="text-white/50 mr-1">{index + 1}.</span>{" "}
+              {option.label}
             </p>
           </a>
         ))}
@@ -62,9 +89,45 @@ const OptionSelect = ({ data, settings, submit, message, setMessage }) => {
     );
   }
 
+  // Checkbox
+  if (settings.displayType === "checkbox") {
+    return (
+      <div className="w-full p-4 backdrop-blur-sm rounded-t-xl overflow-hidden py-4 px-6 border-l border-t border-r border-[#2f3238]">
+        <Label label={data?.label} />
+        <div className="pb-0 mt-2 grid grid-cols-1 md:grid-cols-2 gap-4 text-white/80 text-xs">
+          {data.options.map((option, index) => (
+            <label key={index} className="flex items-center space-x-2">
+              <input
+                type="checkbox"
+                value={option.value}
+                checked={selectedOptions.includes(option.value)}
+                onChange={() => {
+                  handleSelection(option.value);
+                }}
+                className="checkbox"
+              />
+              <span>{option.label}</span>
+            </label>
+          ))}
+        </div>
+        {selectedOptions.length > 0 && (
+          <button
+            className="flex items-center justify-center p-2 mt-4 text-sm  text-white/60 hover:text-white  rounded"
+            onClick={() => {
+              handleSelection(selectedOptions.join(", "));
+              handleSubmit();
+            }}
+          >
+            <PaperPlaneRight className="h-6 w-6 mr-2" /> Send
+          </button>
+        )}
+      </div>
+    );
+  }
+
   // Dropdown Menu
   return (
-    <div className="mt-5 mb-5  w-full backdrop-blur-sm rounded-t-xl overflow-hidden py-4 px-6 border-l border-t border-r border-[#2f3238]">
+    <div className="mt-5 mb-5  w-full backdrop-blur-sm rounded-t-xl  py-4 px-6 border-l border-t border-r border-[#2f3238]">
       <Label {...data} />
       <select
         name="optionSelect"
@@ -72,8 +135,11 @@ const OptionSelect = ({ data, settings, submit, message, setMessage }) => {
         multiple={settings.allowMultiple}
         required={true}
         disabled={settings.disabled}
-        className="shadow-xl bg-sidebar text-white text-xs rounded-xl p-2.5 w-full border border-white/20 focus:ring-blue-500 focus:border-blue-500"
-        onChange={(e) => handleSelection(e.target.value)}
+        className="shadow-xl mt-3 bg-sidebar text-white text-xs rounded-xl p-2.5 w-full border border-white/20 focus:ring-blue-500 focus:border-blue-500"
+        onChange={(e) => {
+          handleSelection(e.target.value);
+          handleSubmit();
+        }}
       >
         <option value="placeholder" disabled selected>
           Select an option
@@ -85,7 +151,8 @@ const OptionSelect = ({ data, settings, submit, message, setMessage }) => {
         ) : (
           data.options.map((option, index) => (
             <option key={index} value={option.value}>
-              <span style={{ color: "grey" }}>{index + 1}.</span> {option.label}
+              <span className="text-white/50 mr-1">{index + 1}.</span>{" "}
+              {option.label}
             </option>
           ))
         )}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/index.jsx
index 9e56f75f..a161d749 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/index.jsx
@@ -12,7 +12,7 @@ import PromptInput from "../PromptInput";
 // import Checkbox from './Checkbox';
 
 const inputComponents = {
-  //   text: TextInput,
+  text: PromptInput,
   options: OptionSelect,
   //   range: RangeSlider,
   //   date: DatePicker,
@@ -38,51 +38,50 @@ const DynamicInput = ({
   const [isForcedTextInput, setIsForcedTextInput] = useState(false);
 
   useEffect(() => {
-    if (inputs?.type !== "text") {
-      setIsForcedTextInput(false);
-    }
+    setIsForcedTextInput(inputs?.type === "text");
   }, [inputs]);
 
-  const InputComponent = inputComponents[inputs?.type] || null;
-  if (!InputComponent) {
-    return null; // or any fallback UI
-  }
-  const renderPromptInput = () => {
-    if (inputs?.type === "text" || inputs === undefined || isForcedTextInput) {
-      return (
-        <PromptInput
-          className={
-            inputs !== undefined ? "bottom-8 md:-bottom-5" : "-bottom-2"
-          }
-          workspace={workspace}
-          message={message}
-          submit={submit}
-          onChange={onChange}
-          inputDisabled={inputDisabled}
-          buttonDisabled={buttonDisabled}
-          sendCommand={sendCommand}
-        />
-      );
-    }
-  };
+  // Select the appropriate input component based on inputs.type or force text input
+  const InputComponent =
+    inputs && (isForcedTextInput || inputs.type === "text")
+      ? inputComponents["text"]
+      : inputComponents[inputs?.type] || null;
+
+  // Condition to show the dynamic input or the forced text input
+  const shouldShowDynamicInput =
+    isDynamicInput && inputs !== undefined && !isForcedTextInput;
+
   return (
     <div className="w-full md:px-4 fixed md:absolute bottom-10 left-0 z-10 md:z-0 flex justify-center items-center">
       <div className="w-[600px]">
-        {inputs?.type !== "text" &&
-        isDynamicInput &&
-        inputs !== undefined &&
-        !isForcedTextInput ? (
+        {shouldShowDynamicInput ? (
           <InputComponent
             submit={submit}
             setMessage={setMessage}
             message={message}
+            workspace={workspace}
+            onChange={onChange}
+            inputDisabled={inputDisabled}
+            buttonDisabled={buttonDisabled}
+            sendCommand={sendCommand}
             {...inputs}
           />
         ) : (
-          renderPromptInput()
+          <PromptInput
+            className={
+              inputs === undefined ? "-bottom-2" : "bottom-8 md:-bottom-5"
+            }
+            workspace={workspace}
+            message={message}
+            submit={submit}
+            onChange={onChange}
+            inputDisabled={inputDisabled}
+            buttonDisabled={buttonDisabled}
+            sendCommand={sendCommand}
+          />
         )}
         {isDynamicInput && inputs != undefined && (
-          <div className="w-full fixed absolute -bottom-8 left-0 z-10 md:z-0 flex justify-center items-center">
+          <div className="w-full  absolute -bottom-8 left-0 z-10 md:z-0 flex justify-center items-center">
             <button
               type="button"
               className="transition-all w-fit duration-300 px-5 py-2.5 rounded-lg text-white/40 text-xs items-center flex gap-x-2 shadow-sm hover:text-white/60 focus:ring-gray-800"