🔨 refactor(formModal/index.tsx): organize imports and format code for better readability
✨ feat(formModal/index.tsx): add support for dropdown menu component and button component 🔧 chore(formModal/index.tsx): fix indentation and spacing issues for better code formatting 🐛 fix(formModal/index.tsx): fix type error and handle input value changes correctly 🔧 chore(formModal/index.tsx): fix indentation and spacing issues for better code formatting ✨ feat(formModal/index.tsx): add support for textarea component and handle input value changes correctly 🔧 chore(formModal/index.tsx): fix indentation and spacing issues for better code formatting ✨ feat(formModal/index.tsx): add support for toggle component and handle input value changes correctly 🔧 chore(formModal/index.tsx): fix indentation and spacing issues for better code formatting ✨ feat(formModal/index.tsx): add support for dropdown menu component and button component 🔧 chore(formModal/index.tsx): fix indentation and spacing issues for better code formatting ✨ feat(formModal/index.tsx): add support for textarea component and handle input value changes correctly 🔧 chore(formModal/index.tsx): fix indentation and spacing issues for better code formatting ✨ feat(formModal/index.tsx): add support for toggle component and handle input value changes correctly 🔧 chore(formModal/index.tsx): fix indentation and spacing issues for better code formatting ✨ feat(formModal/index.tsx): add support for dropdown menu component and button component 🔧 chore(formModal/index.tsx): fix indentation and spacing issues for better code formatting ✨ feat(formModal/index.tsx): add support for textarea component and handle input value changes correctly 🔧 chore(formModal/index.tsx): fix indentation and spacing issues for better code formatting ✨ feat(formModal/index.tsx): add support for toggle component and handle input value changes correctly 🔧 chore(formModal/index.tsx): fix indentation and spacing issues for better code formatting ✨ feat(formModal/index.tsx): add support for dropdown menu component and button component 🔧 chore(formModal/index.tsx): fix indentation and spacing issues for better code formatting ✨ feat(formModal/index.tsx): add support for textarea component and handle input value changes correctly 🔧 chore(formModal/index.tsx): fix indentation and spacing issues for better code
This commit is contained in:
Lucas Oliveira
parent
91fc931081
commit
54b5aa65da
1 changed files with 113 additions and 52 deletions
|
|
@ -30,6 +30,14 @@ import {
|
||||||
import { Textarea } from "../../components/ui/textarea";
|
import { Textarea } from "../../components/ui/textarea";
|
||||||
import { Badge } from "../../components/ui/badge";
|
import { Badge } from "../../components/ui/badge";
|
||||||
import ToggleShadComponent from "../../components/toggleShadComponent";
|
import ToggleShadComponent from "../../components/toggleShadComponent";
|
||||||
|
import Dropdown from "../../components/dropdownComponent";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "../../components/ui/dropdown-menu";
|
||||||
|
import { Button } from "../../components/ui/button";
|
||||||
|
|
||||||
export default function FormModal({
|
export default function FormModal({
|
||||||
flow,
|
flow,
|
||||||
|
|
@ -41,7 +49,13 @@ export default function FormModal({
|
||||||
flow: FlowType;
|
flow: FlowType;
|
||||||
}) {
|
}) {
|
||||||
const { tabsState, setTabsState } = useContext(TabsContext);
|
const { tabsState, setTabsState } = useContext(TabsContext);
|
||||||
const [chatValue, setChatValue] = useState(tabsState[flow.id].formKeysData.input_keys[Object.keys(tabsState[flow.id].formKeysData.input_keys).find((k) => !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k))]);
|
const [chatValue, setChatValue] = useState(
|
||||||
|
tabsState[flow.id].formKeysData.input_keys[
|
||||||
|
Object.keys(tabsState[flow.id].formKeysData.input_keys).find(
|
||||||
|
(k) => !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k)
|
||||||
|
)
|
||||||
|
]
|
||||||
|
);
|
||||||
const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
|
const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
|
||||||
const { reactFlowInstance } = useContext(typesContext);
|
const { reactFlowInstance } = useContext(typesContext);
|
||||||
const { setErrorData, setNoticeData } = useContext(alertContext);
|
const { setErrorData, setNoticeData } = useContext(alertContext);
|
||||||
|
|
@ -50,7 +64,11 @@ export default function FormModal({
|
||||||
const isOpen = useRef(open);
|
const isOpen = useRef(open);
|
||||||
const messagesRef = useRef(null);
|
const messagesRef = useRef(null);
|
||||||
const id = useRef(flow.id);
|
const id = useRef(flow.id);
|
||||||
const [chatKey, setChatKey] = useState(Object.keys(tabsState[flow.id].formKeysData.input_keys).find((k) => !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k)));
|
const [chatKey, setChatKey] = useState(
|
||||||
|
Object.keys(tabsState[flow.id].formKeysData.input_keys).find(
|
||||||
|
(k) => !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (messagesRef.current) {
|
if (messagesRef.current) {
|
||||||
|
|
@ -298,7 +316,7 @@ export default function FormModal({
|
||||||
}, [open]);
|
}, [open]);
|
||||||
function formatMessage(inputs: any): string {
|
function formatMessage(inputs: any): string {
|
||||||
if (inputs) {
|
if (inputs) {
|
||||||
if(typeof inputs == "string") return inputs;
|
if (typeof inputs == "string") return inputs;
|
||||||
// inputs is a object with the keys and values being input_keys and keysValue
|
// inputs is a object with the keys and values being input_keys and keysValue
|
||||||
// so the formated message is a string with the keys and values separated by ": "
|
// so the formated message is a string with the keys and values separated by ": "
|
||||||
let message = "";
|
let message = "";
|
||||||
|
|
@ -382,53 +400,86 @@ export default function FormModal({
|
||||||
|
|
||||||
<div className="flex h-[80vh] w-full mt-2 ">
|
<div className="flex h-[80vh] w-full mt-2 ">
|
||||||
<div className="w-2/5 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6">
|
<div className="w-2/5 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
<div className="flex py-2">
|
<div className="flex py-2">
|
||||||
<Variable className="w-6 h-6 pe-1 text-gray-700 stroke-2 dark:text-slate-200"></Variable>
|
<Variable className="w-6 h-6 pe-1 text-gray-700 stroke-2 dark:text-slate-200"></Variable>
|
||||||
<span className="text-md font-semibold text-gray-800 dark:text-white">
|
<span className="text-md font-semibold text-gray-800 dark:text-white">
|
||||||
Input Variables
|
Input Variables
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<span className="mr-7 text-sm font-semibold text-gray-800 dark:text-white">
|
||||||
|
Chat
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
<Accordion type="single" collapsible className="w-full">
|
<Accordion type="single" collapsible className="w-full">
|
||||||
{Object.keys(tabsState[id.current].formKeysData.input_keys).map((i, k) => (
|
{Object.keys(tabsState[id.current].formKeysData.input_keys).map(
|
||||||
<AccordionItem key={k} value={i}>
|
(i, k) => (
|
||||||
<AccordionTrigger className="flex gap-2"><Badge variant="gray" size="md">{i}</Badge></AccordionTrigger>
|
<div className="flex items-start gap-3">
|
||||||
<AccordionContent>
|
<AccordionItem className="w-full" key={k} value={i}>
|
||||||
<div className="p-1 flex flex-col gap-2">
|
<AccordionTrigger className="flex gap-2">
|
||||||
{tabsState[id.current].formKeysData.handle_keys.some((t) => t === i) ? <div className="font-normal text-muted-foreground ">Handle</div> :
|
<div className="flex items-center w-full justify-between">
|
||||||
<div className="flex items-center space-x-2">
|
<Badge variant="gray" size="md">
|
||||||
<Label htmlFor="airplane-mode" className="-mt-1">From Chat</Label>
|
{i}
|
||||||
<ToggleShadComponent
|
</Badge>
|
||||||
enabled={chatKey === i}
|
|
||||||
setEnabled={(value) =>
|
<div className="-mb-1">
|
||||||
handleOnCheckedChange(value, i)
|
<ToggleShadComponent
|
||||||
}
|
enabled={chatKey === i}
|
||||||
size="small"
|
setEnabled={(value) =>
|
||||||
disabled={false}
|
handleOnCheckedChange(value, i)
|
||||||
/>
|
}
|
||||||
</div>
|
size="small"
|
||||||
}
|
disabled={false}
|
||||||
<Textarea
|
/></div>
|
||||||
value={tabsState[id.current].formKeysData.input_keys[i]}
|
|
||||||
onChange={(e) => {
|
|
||||||
if(!tabsState[id.current].formKeysData.handle_keys.some((t) => t === i))
|
|
||||||
setTabsState((old) => {
|
|
||||||
let newTabsState = _.cloneDeep(old);
|
|
||||||
newTabsState[id.current].formKeysData.input_keys[i] = e.target.value;
|
|
||||||
return newTabsState;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
disabled={chatKey === i}
|
|
||||||
placeholder="Enter text..."
|
|
||||||
></Textarea>
|
|
||||||
</div>
|
</div>
|
||||||
</AccordionContent>
|
</AccordionTrigger>
|
||||||
</AccordionItem>
|
<AccordionContent>
|
||||||
))}
|
<div className="p-1 flex flex-col gap-2">
|
||||||
|
{tabsState[id.current].formKeysData.handle_keys.some(
|
||||||
|
(t) => t === i
|
||||||
|
) ? (
|
||||||
|
<div className="font-normal text-muted-foreground ">
|
||||||
|
Handle
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
<Textarea
|
||||||
|
value={
|
||||||
|
tabsState[id.current].formKeysData.input_keys[i]
|
||||||
|
}
|
||||||
|
onChange={(e) => {
|
||||||
|
if (
|
||||||
|
!tabsState[
|
||||||
|
id.current
|
||||||
|
].formKeysData.handle_keys.some((t) => t === i)
|
||||||
|
)
|
||||||
|
setTabsState((old) => {
|
||||||
|
let newTabsState = _.cloneDeep(old);
|
||||||
|
newTabsState[
|
||||||
|
id.current
|
||||||
|
].formKeysData.input_keys[i] = e.target.value;
|
||||||
|
return newTabsState;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
disabled={chatKey === i}
|
||||||
|
placeholder="Enter text..."
|
||||||
|
></Textarea>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
{tabsState[id.current].formKeysData.memory_keys.map((i, k) => (
|
{tabsState[id.current].formKeysData.memory_keys.map((i, k) => (
|
||||||
<AccordionItem key={k} value={i}>
|
<AccordionItem key={k} value={i}>
|
||||||
<div className="flex flex-1 items-center justify-between py-4 font-normal transition-all group text-muted-foreground text-sm">
|
<div className="flex flex-1 items-center justify-between py-4 font-normal transition-all group text-muted-foreground text-sm">
|
||||||
<div className="group-hover:underline"><Badge size="md" variant="gray">{i}</Badge></div>
|
<div className="group-hover:underline">
|
||||||
|
<Badge size="md" variant="gray">
|
||||||
|
{i}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
Used as Memory Key
|
Used as Memory Key
|
||||||
</div>
|
</div>
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
|
|
@ -437,14 +488,19 @@ export default function FormModal({
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="flex flex-col rounded-md border bg-muted w-full h-full relative">
|
<div className="flex flex-col rounded-md border bg-muted w-full h-full relative">
|
||||||
<div className="absolute right-3 top-3 z-50">
|
<div className="absolute right-3 top-3 z-50">
|
||||||
<button disabled={lockChat} onClick={() => clearChat()}>
|
<button disabled={lockChat} onClick={() => clearChat()}>
|
||||||
<Eraser
|
<Eraser
|
||||||
className={classNames("h-5 w-5", lockChat ? "text-primary animate-pulse" : "text-primary hover:text-gray-600")}
|
className={classNames(
|
||||||
aria-hidden="true"
|
"h-5 w-5",
|
||||||
/>
|
lockChat
|
||||||
</button>
|
? "text-primary animate-pulse"
|
||||||
</div>
|
: "text-primary hover:text-gray-600"
|
||||||
|
)}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
ref={messagesRef}
|
ref={messagesRef}
|
||||||
className="w-full h-full flex-col flex items-center overflow-scroll scrollbar-hide"
|
className="w-full h-full flex-col flex items-center overflow-scroll scrollbar-hide"
|
||||||
|
|
@ -486,11 +542,16 @@ export default function FormModal({
|
||||||
chatValue={chatValue}
|
chatValue={chatValue}
|
||||||
lockChat={lockChat}
|
lockChat={lockChat}
|
||||||
sendMessage={sendMessage}
|
sendMessage={sendMessage}
|
||||||
setChatValue={(value) => {setChatValue(value); setTabsState((old) => {
|
setChatValue={(value) => {
|
||||||
let newTabsState = _.cloneDeep(old);
|
setChatValue(value);
|
||||||
newTabsState[id.current].formKeysData.input_keys[chatKey] = chatValue;
|
setTabsState((old) => {
|
||||||
return newTabsState;
|
let newTabsState = _.cloneDeep(old);
|
||||||
});}}
|
newTabsState[id.current].formKeysData.input_keys[
|
||||||
|
chatKey
|
||||||
|
] = chatValue;
|
||||||
|
return newTabsState;
|
||||||
|
});
|
||||||
|
}}
|
||||||
inputRef={ref}
|
inputRef={ref}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue