kamp/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2024-11-16 19:30:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

- added checkbox for multy selection

Browse Source
This commit is contained in:
sherifButt 2024-03-11 15:57:19 +00:00
parent 40de9d7bd5
commit a3c5480442
2 changed files with 108 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/OptionSelect/index.jsx
View File

@ -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>
))
)}

63
frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/index.jsx
View File

@ -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"