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 <AccordionPrimitive.Trigger
ref={ref} ref={ref}
className={cn( 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 className
)} )}
{...props} {...props}

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

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