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