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

Refactor newChatView component

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2024-02-27 21:50:27 -03:00
commit cf35b42b8e
1 changed files with 26 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/frontend/src/components/newChatView/index.tsx
View file

@ -1,6 +1,10 @@
import _ from "lodash";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import IconComponent from "../../components/genericIconComponent"; import IconComponent from "../../components/genericIconComponent";
import { NOCHATOUTPUT_NOTICE_ALERT } from "../../constants/alerts_constants";
import {
chatFirstInitialText,
chatSecondInitialText,
} from "../../constants/constants";
import { deleteFlowPool } from "../../controllers/API"; import { deleteFlowPool } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
import useFlowStore from "../../stores/flowStore"; import useFlowStore from "../../stores/flowStore";
@ -14,8 +18,6 @@ import {
import { classNames } from "../../utils/utils"; import { classNames } from "../../utils/utils";
import ChatInput from "./chatInput"; import ChatInput from "./chatInput";
import ChatMessage from "./chatMessage"; import ChatMessage from "./chatMessage";
import { INFO_MISSING_ALERT, NOCHATOUTPUT_NOTICE_ALERT } from "../../constants/alerts_constants";
import { chatFirstInitialText, chatSecondInitialText } from "../../constants/constants";
export default function NewChatView({ export default function NewChatView({
sendMessage, sendMessage,
@ -34,7 +36,7 @@ export default function NewChatView({
const inputIds = inputs.map((obj) => obj.id); const inputIds = inputs.map((obj) => obj.id);
const outputIds = outputs.map((obj) => obj.id); const outputIds = outputs.map((obj) => obj.id);
const outputTypes = outputs.map((obj) => obj.type); const outputTypes = outputs.map((obj) => obj.type);
const updateFlowPool = useFlowStore((state)=>state.updateFlowPool) const updateFlowPool = useFlowStore((state) => state.updateFlowPool);
useEffect(() => { useEffect(() => {
if (!outputTypes.includes("ChatOutput")) { if (!outputTypes.includes("ChatOutput")) {
@ -73,7 +75,7 @@ export default function NewChatView({
isSend: !is_ai, isSend: !is_ai,
message: message, message: message,
sender_name, sender_name,
componentId: output.id, componentId: output.id,
stream_url: stream_url, stream_url: stream_url,
}; };
} catch (e) { } catch (e) {
@ -120,22 +122,26 @@ export default function NewChatView({
chat: ChatMessageType, chat: ChatMessageType,
message: string, message: string,
stream_url?: string stream_url?: string
) { ) {
if (message === "") return; if (message === "") return;
chat.message = message; chat.message = message;
// chat is one of the chatHistory // chat is one of the chatHistory
updateFlowPool(chat.componentId,{message,sender_name:chat.sender_name??"Bot",sender:chat.isSend?"User":"Machine"}) updateFlowPool(chat.componentId, {
message,
sender_name: chat.sender_name ?? "Bot",
sender: chat.isSend ? "User" : "Machine",
});
// setChatHistory((oldChatHistory) => { // setChatHistory((oldChatHistory) => {
// const index = oldChatHistory.findIndex((ch) => ch.id === chat.id); // const index = oldChatHistory.findIndex((ch) => ch.id === chat.id);
// if (index === -1) return oldChatHistory; // if (index === -1) return oldChatHistory;
// let newChatHistory = _.cloneDeep(oldChatHistory); // let newChatHistory = _.cloneDeep(oldChatHistory);
// newChatHistory = [ // newChatHistory = [
// ...newChatHistory.slice(0, index), // ...newChatHistory.slice(0, index),
// chat, // chat,
// ...newChatHistory.slice(index + 1), // ...newChatHistory.slice(index + 1),
// ]; // ];
// console.log("newChatHistory:", newChatHistory); // console.log("newChatHistory:", newChatHistory);
// return newChatHistory; // return newChatHistory;
// }); // });
} }
@ -160,7 +166,7 @@ export default function NewChatView({
{chatHistory?.length > 0 ? ( {chatHistory?.length > 0 ? (
chatHistory.map((chat, index) => ( chatHistory.map((chat, index) => (
<ChatMessage <ChatMessage
setLockChat={setLockChat} setLockChat={setLockChat}
lockChat={lockChat} lockChat={lockChat}
chat={chat} chat={chat}
lastMessage={chatHistory.length - 1 === index ? true : false} lastMessage={chatHistory.length - 1 === index ? true : false}