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

refactor: Update ChatView component to handle different message formats

Browse source
This commit is contained in:
anovazzi1 2024-06-10 18:30:56 -03:00
commit 2b6fec82bb
3 changed files with 35 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/frontend/src/modals/IOModal/components/chatView/index.tsx
View file

@ -65,10 +65,15 @@ export default function ChatView({
.filter((output) => output.data.message)
.map((output, index) => {
try {
const { sender, message, sender_name, stream_url, files } = output
.data.message as ChatOutputType;
console.log("output:", output);
const { sender, message, sender_name, stream_url, files } =
output.data.message.message !== "" ||
(output.data.message.files ?? []).length > 0
? output.data.message
: output.data.artifacts;
const is_ai = sender === "Machine" || sender === null;
const is_ai =
sender === "Machine" || sender === null || sender === undefined;
return {
isSend: !is_ai,
message: message,
@ -131,7 +136,7 @@ export default function ChatView({
function updateChat(
chat: ChatMessageType,
message: string,
stream_url?: string
stream_url?: string,
) {
// if (message === "") return;
chat.message = message;
@ -161,7 +166,7 @@ export default function ChatView({
setIsDragging,
setFiles,
currentFlowId,
setErrorData
setErrorData,
);
return (

44
src/frontend/src/modals/IOModal/index.tsx
View file

@ -36,25 +36,25 @@ export default function IOModal({
const allNodes = useFlowStore((state) => state.nodes);
const setMessages = useMessagesStore((state) => state.setMessages);
const inputs = useFlowStore((state) => state.inputs).filter(
(input) => input.type !== "ChatInput"
(input) => input.type !== "ChatInput",
);
const chatInput = useFlowStore((state) => state.inputs).find(
(input) => input.type === "ChatInput"
(input) => input.type === "ChatInput",
);
const outputs = useFlowStore((state) => state.outputs).filter(
(output) => output.type !== "ChatOutput"
(output) => output.type !== "ChatOutput",
);
const chatOutput = useFlowStore((state) => state.outputs).find(
(output) => output.type === "ChatOutput"
(output) => output.type === "ChatOutput",
);
const nodes = useFlowStore((state) => state.nodes).filter(
(node) =>
inputs.some((input) => input.id === node.id) ||
outputs.some((output) => output.id === node.id)
outputs.some((output) => output.id === node.id),
);
const haveChat = chatInput || chatOutput;
const [selectedTab, setSelectedTab] = useState(
inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0,
);
const setErrorData = useAlertStore((state) => state.setErrorData);
const setSuccessData = useAlertStore((state) => state.setSuccessData);
@ -127,7 +127,7 @@ export default function IOModal({
const { handleRemoveSession } = useRemoveSession(
setSuccessData,
setErrorData
setErrorData,
);
useEffect(() => {
@ -188,7 +188,7 @@ export default function IOModal({
<div className="flex-max-width h-full">
<div
className={cn(
"mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300"
"mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300",
)}
>
<Tabs
@ -217,11 +217,11 @@ export default function IOModal({
<TabsContent value={"1"} className="api-modal-tabs-content">
{nodes
.filter((node) =>
inputs.some((input) => input.id === node.id)
inputs.some((input) => input.id === node.id),
)
.map((node, index) => {
const input = inputs.find(
(input) => input.id === node.id
(input) => input.id === node.id,
)!;
return (
<div
@ -282,11 +282,11 @@ export default function IOModal({
<TabsContent value={"2"} className="api-modal-tabs-content">
{nodes
.filter((node) =>
outputs.some((output) => output.id === node.id)
outputs.some((output) => output.id === node.id),
)
.map((node, index) => {
const output = outputs.find(
(output) => output.id === node.id
(output) => output.id === node.id,
)!;
return (
<div
@ -355,7 +355,11 @@ export default function IOModal({
>
<div className="flex w-full items-center justify-between border-b px-2 py-1 align-middle">
<Badge variant="gray" size="md">
{session}
<span className="truncate">
{session === currentFlow?.id
? "Default Session"
: session}
</span>
</Badge>
<div className="flex items-center justify-center gap-2 align-middle">
<Button
@ -418,7 +422,7 @@ export default function IOModal({
<div
className={cn(
"flex h-full w-full flex-col items-start gap-4 pt-4",
!selectedViewField ? "hidden" : ""
!selectedViewField ? "hidden" : "",
)}
>
<div className="font-xl flex items-center justify-center gap-3 font-semibold">
@ -437,7 +441,7 @@ export default function IOModal({
</div>
<div className="h-full w-full">
{inputs.some(
(input) => input.id === selectedViewField.id
(input) => input.id === selectedViewField.id,
) && (
<IOFieldView
type={InputOutput.INPUT}
@ -447,7 +451,7 @@ export default function IOModal({
/>
)}
{outputs.some(
(output) => output.id === selectedViewField.id
(output) => output.id === selectedViewField.id,
) && (
<IOFieldView
type={InputOutput.OUTPUT}
@ -457,12 +461,12 @@ export default function IOModal({
/>
)}
{sessions.some(
(session) => session === selectedViewField.id
(session) => session === selectedViewField.id,
) && (
<SessionView
rows={messages.filter(
(message) =>
message.session_id === selectedViewField.id
message.session_id === selectedViewField.id,
)}
/>
)}
@ -472,7 +476,7 @@ export default function IOModal({
<div
className={cn(
"flex h-full w-full",
selectedViewField ? "hidden" : ""
selectedViewField ? "hidden" : "",
)}
>
{haveChat ? (
@ -504,7 +508,7 @@ export default function IOModal({
"h-4 w-4",
isBuilding
? "animate-spin"
: "fill-current text-medium-indigo"
: "fill-current text-medium-indigo",
)}
/>
),

2
src/frontend/src/types/api/index.ts
View file

@ -170,7 +170,7 @@ export type VertexDataTypeAPI = {
inactive?: boolean;
timedelta?: number;
duration?: string;
artifacts?: any;
artifacts?: any | ChatOutputType | ChatInputType;
message: ChatOutputType | ChatInputType;
};