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

🐛 fix(chatInput): adjust padding-right value to align input field properly

Browse source 
🐛 fix(chatMessage): set max-width to prevent overflow of markdown content
🐛 fix(formModal): remove unnecessary badge for handle keys in accordion item
This commit is contained in:
Lucas Oliveira 2023-06-29 22:32:56 -03:00
commit 8229bf4b4e
3 changed files with 8 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/src/modals/formModal/chatInput/index.tsx
View file

@ -53,7 +53,7 @@ export default function ChatInput({
lockChat lockChat
? " bg-input text-black dark:bg-gray-700 dark:text-gray-300" ? " bg-input text-black dark:bg-gray-700 dark:text-gray-300"
: " bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300", : " bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300",
"p-4 form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-12 sm:text-sm" + "p-4 form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-16 sm:text-sm" +
INPUT_STYLE INPUT_STYLE
)} )}
placeholder={"Send a message..."} placeholder={"Send a message..."}
@ -62,7 +62,7 @@ export default function ChatInput({
<button className={classNames("p-2 px-1 transition-all duration-300 rounded-md",chatValue == "" ? "text-primary" : " bg-indigo-600 text-background")} disabled={lockChat} onClick={() => sendMessage()}> <button className={classNames("p-2 px-1 transition-all duration-300 rounded-md",chatValue == "" ? "text-primary" : " bg-indigo-600 text-background")} disabled={lockChat} onClick={() => sendMessage()}>
{lockChat ? ( {lockChat ? (
<Lock <Lock
className="h-5 w-5 ml-1 mr-11 animate-pulse" className="h-5 w-5 ml-1 mr-1 animate-pulse"
aria-hidden="true" aria-hidden="true"
/> />
) : ( ) : (

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

@ -92,7 +92,7 @@ export default function ChatMessage({
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]} remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]} rehypePlugins={[rehypeMathjax]}
className="markdown prose dark:prose-invert text-primary" className="markdown prose dark:prose-invert text-primary max-w-full"
components={{ components={{
code({ node, inline, className, children, ...props }) { code({ node, inline, className, children, ...props }) {
if (children.length) { if (children.length) {

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

@ -382,8 +382,8 @@ export default function FormModal({
<DialogDescription>{CHAT_FORM_DIALOG_SUBTITLE}</DialogDescription> <DialogDescription>{CHAT_FORM_DIALOG_SUBTITLE}</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex h-[80vh] w-full mt-2"> <div className="flex h-[80vh] w-full mt-2 ">
<div className="w-1/4 h-full flex flex-col justify-start mr-6"> <div className="w-1/4 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6">
<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">
@ -393,9 +393,10 @@ export default function FormModal({
<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((i, k) => (
<AccordionItem key={k} value={i}> <AccordionItem key={k} value={i}>
<AccordionTrigger className="flex gap-2"><Badge variant="gray" size="md">{i}</Badge>{tabsState[id.current].formKeysData.handle_keys.some((t) => t === i) && <Badge size="md" variant="secondary">Handle</Badge>}</AccordionTrigger> <AccordionTrigger className="flex gap-2"><Badge variant="gray" size="md">{i}</Badge></AccordionTrigger>
<AccordionContent> <AccordionContent>
<div className="p-1 flex flex-col gap-2"> <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> :
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Label htmlFor="airplane-mode" className="-mt-1">From Chat</Label> <Label htmlFor="airplane-mode" className="-mt-1">From Chat</Label>
<ToggleShadComponent <ToggleShadComponent
@ -407,6 +408,7 @@ export default function FormModal({
disabled={false} disabled={false}
/> />
</div> </div>
}
<Textarea <Textarea
value={tabsState[id.current].formKeysData.input_keys[i]} value={tabsState[id.current].formKeysData.input_keys[i]}
onChange={(e) => onChange={(e) =>