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

🐛 fix(chatMessage/index.tsx): remove unnecessary class name "bg-border" to fix styling issue

Browse source 
✨ feat(chatMessage/index.tsx): add labels for chatbot and user avatars to improve accessibility and user experience
🐛 fix(chatMessage/index.tsx): adjust styling of chat message content to prevent overflow and improve readability
🐛 fix(chatMessage/index.tsx): adjust button background color to match the background color of the chat message container
This commit is contained in:
Lucas Oliveira 2023-07-07 12:46:56 -03:00
commit dc415e22f5
1 changed files with 16 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -36,22 +36,28 @@ export default function ChatMessage({
<div <div
className={classNames( className={classNames(
"flex w-full px-2 py-6 pl-4 pr-9", "flex w-full px-2 py-6 pl-4 pr-9",
chat.isSend ? " bg-border" : " " chat.isSend ? "" : " "
)} )}
> >
<div className={classNames("mb-3 ml-3 mr-6 mt-1 ")}> <div className={classNames("mb-3 mr-3 mt-1 w-20 ")}>
{!chat.isSend ? ( {!chat.isSend ? (
<div className="flex flex-col items-center gap-1">
<div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#afe6ef] p-5 text-2xl "> <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#afe6ef] p-5 text-2xl ">
🤖 🤖
</div> </div>
<span className="text-xs">Chatbot</span>
</div>
) : ( ) : (
<div className="flex flex-col items-center gap-1">
<div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#aface9] p-5 text-2xl "> <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#aface9] p-5 text-2xl ">
👨‍💻 👨‍💻
</div> </div>
<span className="text-xs">User</span>
</div>
)} )}
</div> </div>
{!chat.isSend ? ( {!chat.isSend ? (
<div className="flex w-full items-center text-start"> <div className="flex w-full flex-1 items-center text-start">
<div className="relative inline-block w-full text-start text-sm font-normal text-primary"> <div className="relative inline-block w-full text-start text-sm font-normal text-primary">
{hidden && chat.thought && chat.thought !== "" && ( {hidden && chat.thought && chat.thought !== "" && (
<div <div
@ -78,7 +84,8 @@ export default function ChatMessage({
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]} remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]} rehypePlugins={[rehypeMathjax]}
className="markdown prose max-w-full text-primary dark:prose-invert" className="markdown prose inline-block break-words text-primary
dark:prose-invert"
components={{ components={{
code({ node, inline, className, children, ...props }) { code({ node, inline, className, children, ...props }) {
if (children.length) { if (children.length) {
@ -138,7 +145,7 @@ export default function ChatMessage({
) : ( ) : (
<div> <div>
<button <button
className="mb-2 flex items-center gap-4 rounded-md border border-ring/60 bg-muted px-4 py-3 text-base font-semibold" className="mb-2 flex items-center gap-4 rounded-md border border-ring/60 bg-background px-4 py-3 text-base font-semibold"
onClick={() => { onClick={() => {
setPromptOpen((old) => !old); setPromptOpen((old) => !old);
}} }}