mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-11-16 11:20:10 +01:00
- added checkbox for multy selection
This commit is contained in:
sherifButt
parent
40de9d7bd5
commit
a3c5480442
@ -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>
|
||||
))
|
||||
)}
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user