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

🎨 style(chatMessage): refactor chat message component styles to improve readability and remove unnecessary code

Browse source 
✨ feat(formModal): add accordion component to display form keys and memory keys in the chat form modal
This commit is contained in:
Lucas Oliveira 2023-06-27 18:46:13 -03:00
commit bbdcb7c6b6
2 changed files with 43 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/frontend/src/modals/formModal/chatMessage/index.tsx
View file

@ -29,18 +29,12 @@ export default function ChatMessage({
}, [chat.message]);
const [hidden, setHidden] = useState(true);
return (
<div
className={classNames(
"w-full flex",
chat.isSend ? "justify-end" : "justify-start"
)}
>
<div
className={classNames(
"w-3/4 py-2 px-2 mb-4 flex",
"w-full py-2 px-2 pl-4 flex",
chat.isSend
? "bg-input pl-4 flex-row-reverse rounded-xl rounded-tr-none dark:bg-gray-900 "
: "bg-foreground pr-4 rounded-xl rounded-tl-none dark:bg-gray-800"
? "bg-input dark:bg-gray-900 "
: " dark:bg-gray-800"
)}
>
<div
@ -72,7 +66,7 @@ export default function ChatMessage({
</div>
{!chat.isSend ? (
<div className="w-full text-start flex items-center">
<div className="w-full relative text-start inline-block text-background text-sm font-normal">
<div className="w-full relative text-start inline-block text-primary text-sm font-normal">
{hidden && chat.thought && chat.thought !== "" && (
<div
onClick={() => setHidden((prev) => !prev)}
@ -84,7 +78,7 @@ export default function ChatMessage({
{chat.thought && chat.thought !== "" && !hidden && (
<div
onClick={() => setHidden((prev) => !prev)}
className=" text-start inline-block rounded-md text-background h-full border border-gray-300 dark:border-gray-500
className=" text-start inline-block rounded-md text-primary h-full border border-gray-300 dark:border-gray-500
bg-muted dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
dangerouslySetInnerHTML={{
__html: convert.toHtml(chat.thought),
@ -98,7 +92,7 @@ export default function ChatMessage({
<ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]}
className="markdown prose dark:prose-invert text-background"
className="markdown prose dark:prose-invert text-primary"
components={{
code({ node, inline, className, children, ...props }) {
if (children.length) {
@ -168,6 +162,5 @@ export default function ChatMessage({
</div>
)}
</div>
</div>
);
}

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

@ -27,6 +27,16 @@ import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";
import { Label } from "../../components/ui/label";
import { TabsContext } from "../../contexts/tabsContext";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "../../components/ui/accordion";
import { AccordionHeader } from "@radix-ui/react-accordion";
import { Textarea } from "../../components/ui/textarea";
import { Badge } from "../../components/ui/badge";
import { Separator } from "../../components/ui/separator";
export default function FormModal({
flow,
@ -334,7 +344,7 @@ export default function FormModal({
return (
<Dialog open={open} onOpenChange={setModalOpen}>
<DialogTrigger className="hidden"></DialogTrigger>
<DialogContent className="min-w-[1000px]">
<DialogContent className="min-w-[95vw]">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Chat Form</span>
@ -345,11 +355,31 @@ export default function FormModal({
</DialogTitle>
</DialogHeader>
<div className="flex h-[600px] w-full mt-2">
<div className="w-96 h-full flex flex-col justify-start">
<div className="flex h-[80vh] w-full mt-2">
<div className="w-2/5 h-full flex flex-col justify-start mr-6">
<Accordion type="single" collapsible className="w-full">
{tabsState[id.current].formKeysData.input_keys.map((i, k) => (
<AccordionItem key={k} value={i}>
<AccordionTrigger>{i}</AccordionTrigger>
<AccordionContent>
<div className="p-1">
<Textarea placeholder="Enter text..."></Textarea>
</div>
</AccordionContent>
</AccordionItem>
))}
{tabsState[id.current].formKeysData.memory_keys.map((i, k) => (
<AccordionItem key={k} value={i}>
<div className="flex flex-1 items-center justify-between py-4 font-medium transition-all group">
<div className="group-hover:underline">{i}</div>
<Badge>Message Key</Badge>
</div>
</AccordionItem>
))}
</Accordion>
</div>
<div className="w-full pl-6">
<div className="flex flex-col rounded-md w-full h-full">
<div className="w-full ">
<div className="flex flex-col rounded-md border w-full h-full">
<div
ref={messagesRef}
className="w-full h-full flex-col flex items-center overflow-scroll scrollbar-hide"
@ -385,8 +415,8 @@ export default function FormModal({
)}
<div ref={ref}></div>
</div>
<div className="w-full bg-background flex-col flex items-center justify-between">
<div className="relative w-full mt-1 rounded-md shadow-sm">
<div className="w-full p-2 flex-col flex items-center justify-between">
<div className="relative w-full rounded-md shadow-sm">
<ChatInput
chatValue={chatValue}
lockChat={lockChat}