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

🐛 fix(accordion.tsx): remove unnecessary hover effect on AccordionTrigger to improve styling

Browse source 
🐛 fix(chatMessage/index.tsx): refactor chat message rendering to improve readability and remove unnecessary code
This commit is contained in:
Lucas Oliveira 2023-07-06 01:32:36 -03:00
commit 4f4e77838f
2 changed files with 25 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/components/ui/accordion.tsx
View file

@ -27,7 +27,7 @@ const AccordionTrigger = React.forwardRef<
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
className
)}
{...props}

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

@ -36,31 +36,15 @@ export default function ChatMessage({
chat.isSend ? " bg-border" : " "
)}
>
<div
className={classNames(
"mx-3 my-3 flex h-8 w-8 items-center justify-center overflow-hidden rounded-full"
)}
>
{!chat.isSend && (
<div className="relative h-8 w-8">
<img
className={
"absolute scale-150 transition-opacity duration-500 " +
(lockChat ? "opacity-100" : "opacity-0")
}
src={lastMessage ? AiIcon : AiIconStill}
/>
<img
className={
"absolute scale-150 transition-opacity duration-500 " +
(lockChat ? "opacity-0" : "opacity-100")
}
src={AiIconStill}
/>
<div className={classNames("my-3 ml-3 mr-6 ")}>
{!chat.isSend ? (
<div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#afe6ef] p-5 text-2xl ">
🤖
</div>
) : (
<div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#aface9] p-5 text-2xl ">
👨‍💻
</div>
)}
{chat.isSend && (
<User2 className="h-6 w-6 text-gray-800 dark:text-gray-200" />
)}
</div>
{!chat.isSend ? (
@ -150,22 +134,22 @@ export default function ChatMessage({
</div>
) : (
<div className="flex w-full items-center">
<div className="inline-block w-full text-start">
<span className="w-full break-all text-primary">
<Accordion
type="multiple"
className="my-2 w-full rounded-md bg-muted p-2"
>
{Object.keys(chat.message)
.filter((key) => key !== chat.chatKey)
.map((key) => (
<AccordionItem value={key}>
<AccordionTrigger>{key}</AccordionTrigger>
<AccordionContent className="max-h-96 overflow-auto break-all">
{chat.message[key]}
</AccordionContent>
</AccordionItem>
))}
<div className="inline-block text-start">
<span className=" break-all text-primary">
<Accordion type="single" collapsible className="mb-4">
<AccordionItem
className=" rounded-md border border-ring/60 bg-muted px-4"
value="prompt"
>
<AccordionTrigger className="flex gap-4 font-semibold">
Initial Prompt
</AccordionTrigger>
<AccordionContent className="max-h-96 overflow-auto break-all p-2">
{Object.keys(chat.message)
.filter((key) => key !== chat.chatKey)
.map((key) => chat.message[key])}
</AccordionContent>
</AccordionItem>
</Accordion>
{chat.message[chat.chatKey]}
</span>