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

🎨 style(chatInput.tsx): add padding to the chat input to improve readability and aesthetics

Browse source 
🎨 style(chatMessage.tsx): change icon from MessageCircle to MessageSquare to improve semantics
🎨 style(index.tsx): add new icons to the import statement and change MessageSquareDashed to MessageSquare to improve semantics. Add padding to the chat modal to improve aesthetics.
This commit is contained in:
Lucas Oliveira 2023-06-27 19:31:37 -03:00
commit 64fa0c0dcb
3 changed files with 7 additions and 7 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,12 +53,12 @@ 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",
"form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm" + "p-4 form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-12 sm:text-sm" +
INPUT_STYLE INPUT_STYLE
)} )}
placeholder={"Send a message..."} placeholder={"Send a message..."}
/> />
<div className="absolute bottom-0.5 right-3"> <div className="absolute bottom-2.5 right-4">
<button disabled={lockChat} onClick={() => sendMessage()}> <button disabled={lockChat} onClick={() => sendMessage()}>
{lockChat ? ( {lockChat ? (
<Lock <Lock

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

@ -10,7 +10,7 @@ import remarkGfm from "remark-gfm";
import remarkMath from "remark-math"; import remarkMath from "remark-math";
import { CodeBlock } from "./codeBlock"; import { CodeBlock } from "./codeBlock";
import Convert from "ansi-to-html"; import Convert from "ansi-to-html";
import { User2, MessageCircle } from "lucide-react"; import { User2, MessageSquare } from "lucide-react";
export default function ChatMessage({ export default function ChatMessage({
chat, chat,
@ -72,7 +72,7 @@ export default function ChatMessage({
onClick={() => setHidden((prev) => !prev)} onClick={() => setHidden((prev) => !prev)}
className="absolute -top-1 -left-2 cursor-pointer" className="absolute -top-1 -left-2 cursor-pointer"
> >
<MessageCircle className="w-5 h-5 animate-bounce dark:text-white" /> <MessageSquare className="w-5 h-5 animate-bounce dark:text-white" />
</div> </div>
)} )}
{chat.thought && chat.thought !== "" && !hidden && ( {chat.thought && chat.thought !== "" && !hidden && (

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

@ -5,7 +5,7 @@ import { alertContext } from "../../contexts/alertContext";
import { validateNodes } from "../../utils"; import { validateNodes } from "../../utils";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import ChatMessage from "./chatMessage"; import ChatMessage from "./chatMessage";
import { X, MessagesSquare, Eraser, TerminalSquare } from "lucide-react"; import { X, MessagesSquare, Eraser, TerminalSquare, MessageCircle, MessageSquareDashed, MessageSquare } from "lucide-react";
import { sendAllProps } from "../../types/api"; import { sendAllProps } from "../../types/api";
import { ChatMessageType } from "../../types/chat"; import { ChatMessageType } from "../../types/chat";
import ChatInput from "./chatInput"; import ChatInput from "./chatInput";
@ -425,7 +425,7 @@ export default function FormModal({
<span className="text-base text-gray-500"> <span className="text-base text-gray-500">
Start a conversation and click the agent’s thoughts{" "} Start a conversation and click the agent’s thoughts{" "}
<span> <span>
<MessagesSquare className="w-5 h-5 inline animate-bounce mx-1 " /> <MessageSquare className="w-5 h-5 inline animate-bounce mx-1 " />
</span>{" "} </span>{" "}
to inspect the chaining process. to inspect the chaining process.
</span> </span>
@ -434,7 +434,7 @@ export default function FormModal({
)} )}
<div ref={ref}></div> <div ref={ref}></div>
</div> </div>
<div className="w-full p-2 flex-col flex items-center justify-between"> <div className="w-full px-8 pb-6 flex-col flex items-center justify-between">
<div className="relative w-full rounded-md shadow-sm"> <div className="relative w-full rounded-md shadow-sm">
<ChatInput <ChatInput
chatValue={chatValue} chatValue={chatValue}