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

refactor(chatMessage/index.tsx): improve code readability and fix rendering issue

Browse source 
The code in the `ChatMessage` component has been refactored to improve code readability and fix a rendering issue.

- In line 10, the `div` element has been updated to include the `flex flex-col` class for better styling.
- In lines 16-18, the conditional rendering of the `template` has been simplified by removing unnecessary ternary operator and curly braces.
- In lines 21-34, the rendering of the `template` has been updated to correctly split the text into lines and replace placeholders with values.
- In lines 37-39, a line break element (`<br />`) has been added for better visual separation.
- In lines 41-43, the rendering of the `chat.message[chat.chatKey]` has been moved outside the `span` element for correct rendering.

These changes improve the readability of the code and fix the rendering issue in the `ChatMessage` component.
This commit is contained in:
anovazzi1 2023-07-11 16:00:56 -03:00
commit cfa13df98d
1 changed files with 31 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -150,7 +150,7 @@ export default function ChatMessage({
</div>
</div>
) : (
<div>
<div className="flex flex-col">
{template && (
<>
<button
@ -167,40 +167,40 @@ export default function ChatMessage({
/>
</button>
<span className="prose inline-block break-words text-primary dark:prose-invert">
{promptOpen
? template?.split("\n")?.map((line, index) => {
const regex = /{([^}]+)}/g;
let match;
let parts = [];
let lastIndex = 0;
while ((match = regex.exec(line)) !== null) {
// Push text up to the match
if (match.index !== lastIndex) {
parts.push(line.substring(lastIndex, match.index));
}
// Push div with matched text
if (chat.message[match[1]]) {
parts.push(
<span className="my-1 rounded-md bg-indigo-100">
{chat.message[match[1]]}
</span>
);
}
{promptOpen &&
template?.split("\n")?.map((line, index) => {
const regex = /{([^}]+)}/g;
let match;
let parts = [];
let lastIndex = 0;
while ((match = regex.exec(line)) !== null) {
// Push text up to the match
if (match.index !== lastIndex) {
parts.push(line.substring(lastIndex, match.index));
}
// Push div with matched text
if (chat.message[match[1]]) {
parts.push(
<span className="my-1 rounded-md bg-indigo-100">
{chat.message[match[1]]}
</span>
);
}
// Update last index
lastIndex = regex.lastIndex;
}
// Push text after the last match
if (lastIndex !== line.length) {
parts.push(line.substring(lastIndex));
}
return <p>{parts}</p>;
})
: chat.message[chat.chatKey]}
// Update last index
lastIndex = regex.lastIndex;
}
// Push text after the last match
if (lastIndex !== line.length) {
parts.push(line.substring(lastIndex));
}
return <p>{parts}</p>;
})}
</span>
</>
)}
{chat.message[chat.chatKey]}
<br />
<span>{chat.message[chat.chatKey]}</span>
</div>
)}
</div>