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

Fixed chat message size

Browse source
This commit is contained in:
Lucas Oliveira 2023-08-04 12:47:21 -03:00 • committed by Gabriel Luiz Freitas Almeida
commit a35445ec28
3 changed files with 27 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/frontend/src/components/codeTabsComponent/index.tsx
View file

@ -132,21 +132,25 @@ export default function CodeTabsComponent({
}} }}
> >
<div className="api-modal-tablist-div"> <div className="api-modal-tablist-div">
<TabsList> {tabs.length > 0 && tabs[0].name !== "" ? (
{tabs.map((tab, index) => ( <TabsList>
<TabsTrigger {tabs.map((tab, index) => (
className={ <TabsTrigger
isMessage ? "data-[state=active]:bg-primary-foreground" : "" className={
} isMessage ? "data-[state=active]:bg-primary-foreground" : ""
key={index} }
value={index.toString()} key={index}
> value={index.toString()}
{tab.name} >
</TabsTrigger> {tab.name}
))} </TabsTrigger>
</TabsList> ))}
</TabsList>
) : (
<div></div>
)}
{Number(activeTab) < 4 && ( {Number(activeTab) < 4 && (
<div className="float-right mx-1 flex gap-2"> <div className="float-right mx-1 mb-1 mt-2 flex gap-2">
<button <button
className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300" className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
onClick={copyToClipboard} onClick={copyToClipboard}

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

@ -88,8 +88,8 @@ export default function ChatMessage({
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]} remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]} rehypePlugins={[rehypeMathjax]}
className="markdown prose inline-block text-primary word-break-break-word dark:prose-invert className="markdown prose min-w-full text-primary word-break-break-word
sm:w-[30vw] sm:max-w-[30vw] lg:w-[40vw] lg:max-w-[40vw]" dark:prose-invert"
components={{ components={{
pre({ node, ...props }) { pre({ node, ...props }) {
return <>{props.children}</>; return <>{props.children}</>;
@ -187,7 +187,7 @@ export default function ChatMessage({
} }
/> />
</button> </button>
<span className="prose inline-block text-primary word-break-break-word dark:prose-invert"> <span className="prose text-primary word-break-break-word dark:prose-invert">
{promptOpen {promptOpen
? template?.split("\n")?.map((line, index) => { ? template?.split("\n")?.map((line, index) => {
const regex = /{([^}]+)}/g; const regex = /{([^}]+)}/g;

12
src/frontend/src/style/applies.css
View file

@ -336,7 +336,7 @@
@apply flex h-7 w-7 items-center justify-center rounded-full text-2xl; @apply flex h-7 w-7 items-center justify-center rounded-full text-2xl;
} }
.card-component-title-size { .card-component-title-size {
@apply inline-block w-full flex-1 word-break-break-word truncate-doubleline; @apply w-full flex-1 word-break-break-word truncate-doubleline;
} }
.card-component-delete-button { .card-component-delete-button {
@apply flex self-start; @apply flex self-start;
@ -544,7 +544,7 @@
@apply focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1; @apply focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1;
} }
.toggle-component-span { .toggle-component-span {
@apply pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out; @apply pointer-events-none relative h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out;
} }
.toggle-component-second-span { .toggle-component-second-span {
@apply absolute inset-0 flex h-full w-full items-center justify-center transition-opacity; @apply absolute inset-0 flex h-full w-full items-center justify-center transition-opacity;
@ -590,13 +590,13 @@
@apply flex-max-width items-center text-start; @apply flex-max-width items-center text-start;
} }
.chat-message-modal-text { .chat-message-modal-text {
@apply relative inline-block w-full text-start text-sm font-normal text-muted-foreground; @apply relative w-full text-start text-sm font-normal text-muted-foreground;
} }
.chat-message-modal-icon-div { .chat-message-modal-icon-div {
@apply absolute -left-2 -top-1 cursor-pointer; @apply absolute -left-2 -top-1 cursor-pointer;
} }
.chat-message-modal-thought { .chat-message-modal-thought {
@apply chat-message-modal-thought-cursor ml-3 inline-block h-full w-[95%] rounded-md border border-ring bg-muted px-2 pb-3 pt-3 text-start text-muted-foreground; @apply chat-message-modal-thought-cursor ml-3 h-full w-[95%] rounded-md border border-ring bg-muted px-2 pb-3 pt-3 text-start text-muted-foreground;
} }
.chat-message-modal-thought-cursor { .chat-message-modal-thought-cursor {
@apply cursor-pointer overflow-scroll scrollbar-hide; @apply cursor-pointer overflow-scroll scrollbar-hide;
@ -608,7 +608,7 @@
@apply mt-1 animate-pulse cursor-default; @apply mt-1 animate-pulse cursor-default;
} }
.chat-message-modal-alert { .chat-message-modal-alert {
@apply inline-block px-3 text-start text-muted-foreground; @apply px-3 text-start text-muted-foreground;
} }
.file-card-modal-image-div { .file-card-modal-image-div {
@ -913,7 +913,7 @@
@apply rounded-md border border-ring/60; @apply rounded-md border border-ring/60;
} }
.form-modal-chat-thought-size { .form-modal-chat-thought-size {
@apply inline-block h-full w-[95%]; @apply h-full w-[95%];
} }
.form-modal-chat-thought { .form-modal-chat-thought {
@apply form-modal-chat-thought-border form-modal-chat-thought-size cursor-pointer overflow-scroll bg-background px-2 py-2 text-start text-primary scrollbar-hide; @apply form-modal-chat-thought-border form-modal-chat-thought-size cursor-pointer overflow-scroll bg-background px-2 py-2 text-start text-primary scrollbar-hide;