jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

🎨 style(constants.tsx): add CHAT_FORM_DIALOG_SUBTITLE constant to improve code readability

Browse source 
✨ feat(formModal): add Input Variables section to Chat Form modal to allow users to input variables
🎨 style(formModal): adjust width of Chat Form modal and Input Variables section to improve UI
🎨 style(formModal): adjust layout of Input Variables section to improve UI
🎨 style(formModal): adjust layout of From Chat switch to improve UI
🐛 fix(formModal): replace Switch component with custom ToggleShadComponent to fix styling issue
This commit is contained in:
Lucas Oliveira 2023-06-27 20:54:24 -03:00
commit 355b846be4
2 changed files with 27 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/frontend/src/constants.tsx
View file

@ -22,6 +22,13 @@ export const SETTINGS_DIALOG_SUBTITLE = "Edit details about your project.";
export const CODE_DIALOG_SUBTITLE =
"Export your flow to use it with this code.";
/**
* The base text for subtitle of Chat Form
* @constant
*/
export const CHAT_FORM_DIALOG_SUBTITLE =
"Export your flow to use it with this code.";
/**
* The base text for subtitle of Edit Node Dialog
* @constant

26
src/frontend/src/modals/formModal/index.tsx
View file

@ -5,7 +5,7 @@ import { alertContext } from "../../contexts/alertContext";
import { validateNodes } from "../../utils";
import { typesContext } from "../../contexts/typesContext";
import ChatMessage from "./chatMessage";
import { X, MessagesSquare, Eraser, TerminalSquare, MessageCircle, MessageSquareDashed, MessageSquare } from "lucide-react";
import { X, MessagesSquare, Eraser, TerminalSquare, MessageCircle, MessageSquareDashed, MessageSquare, Variable } from "lucide-react";
import { sendAllProps } from "../../types/api";
import { ChatMessageType } from "../../types/chat";
import ChatInput from "./chatInput";
@ -21,7 +21,7 @@ import {
DialogTrigger,
} from "../../components/ui/dialog";
import { dark } from "@mui/material/styles/createPalette";
import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants";
import { postValidateCode } from "../../controllers/API";
import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";
@ -38,6 +38,8 @@ import { Textarea } from "../../components/ui/textarea";
import { Badge } from "../../components/ui/badge";
import { Separator } from "../../components/ui/separator";
import { Switch } from "../../components/ui/switch";
import { CardTitle } from "../../components/ui/card";
import ToggleShadComponent from "../../components/toggleShadComponent";
export default function FormModal({
flow,
@ -359,19 +361,26 @@ export default function FormModal({
return (
<Dialog open={open} onOpenChange={setModalOpen}>
<DialogTrigger className="hidden"></DialogTrigger>
<DialogContent className="min-w-[95vw]">
<DialogContent className="min-w-[80vw]">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Chat Form</span>
<span className="pr-2">Chat</span>
<TerminalSquare
className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true"
/>
</DialogTitle>
<DialogDescription>{CHAT_FORM_DIALOG_SUBTITLE}</DialogDescription>
</DialogHeader>
<div className="flex h-[80vh] w-full mt-2">
<div className="w-2/5 h-full flex flex-col justify-start mr-6">
<div className="w-1/4 h-full flex flex-col justify-start mr-6">
<div className="flex py-2">
<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">
Input Variables
</span>
</div>
<Accordion type="single" collapsible className="w-full">
{tabsState[id.current].formKeysData.input_keys.map((i, k) => (
<AccordionItem key={k} value={i}>
@ -379,8 +388,13 @@ export default function FormModal({
<AccordionContent>
<div className="p-1 flex flex-col gap-4">
<div className="flex items-center space-x-2">
<Switch id="airplane-mode" checked={chatKey === k } onCheckedChange={(value) => handleOnCheckedChange(value, k)}/>
<Label htmlFor="airplane-mode">From Chat</Label>
<ToggleShadComponent
enabled={chatKey === k }
setEnabled={(value) => handleOnCheckedChange(value, k)}
size="small"
disabled={false}
/>
</div>
<Textarea value={keysValue[k]} onChange={(e) => setKeysValue({...keysValue, [k]: e.target.value})} disabled={chatKey === k} placeholder="Enter text..."></Textarea>
</div>