diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/StatusResponse/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/StatusResponse/index.jsx deleted file mode 100644 index c06fb35a..00000000 --- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/StatusResponse/index.jsx +++ /dev/null @@ -1,113 +0,0 @@ -import React, { useState } from "react"; -import { - CaretDown, - CircleNotch, - Check, - CheckCircle, -} from "@phosphor-icons/react"; - -export default function StatusResponse({ - messages = [], - isThinking = false, - showCheckmark = false, -}) { - const [isExpanded, setIsExpanded] = useState(false); - const currentThought = messages[messages.length - 1]; - const previousThoughts = messages.slice(0, -1); - - function handleExpandClick() { - if (!previousThoughts.length > 0) return; - setIsExpanded(!isExpanded); - } - - return ( -
-
-
- {isThinking ? ( - - ) : showCheckmark ? ( - - ) : null} -
- - {currentThought.content} - -
-
- {previousThoughts?.length > 0 && ( -
- -
- )} -
-
- - {/* Previous thoughts dropdown */} - {previousThoughts?.length > 0 && ( -
-
- {previousThoughts.map((thought, index) => ( -
-

- {index + 1}/{previousThoughts.length} -

-
- - {thought.content} - -
-
- ))} - {/* Append current thought to the end */} -
-

- {previousThoughts.length + 1}/{previousThoughts.length + 1} -

-
- - {currentThought.content} - -
-
-
-
- )} -
-
- ); -} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx index 819a6f1c..9bf8eeeb 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx +++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx @@ -1,7 +1,6 @@ -import { useEffect, useRef, useState, useMemo, useCallback } from "react"; +import React, { useEffect, useRef, useState } from "react"; import HistoricalMessage from "./HistoricalMessage"; import PromptReply from "./PromptReply"; -import StatusResponse from "./StatusResponse"; import { useManageWorkspaceModal } from "../../../Modals/ManageWorkspace"; import ManageWorkspace from "../../../Modals/ManageWorkspace"; import { ArrowDown } from "@phosphor-icons/react"; @@ -13,7 +12,6 @@ import { useParams } from "react-router-dom"; import paths from "@/utils/paths"; import Appearance from "@/models/appearance"; import useTextSize from "@/hooks/useTextSize"; -import { v4 } from "uuid"; export default function ChatHistory({ history = [], @@ -176,52 +174,63 @@ export default function ChatHistory({ ); } - const compiledHistory = useMemo( - () => - buildMessages({ - workspace, - history, - regenerateAssistantMessage, - saveEditedMessage, - forkThread, - }), - [ - workspace, - history, - regenerateAssistantMessage, - saveEditedMessage, - forkThread, - ] - ); - const lastMessageInfo = useMemo(() => getLastMessageInfo(history), [history]); - const renderStatusResponse = useCallback( - (item, index) => { - const hasSubsequentMessages = index < compiledHistory.length - 1; - return ( - - ); - }, - [compiledHistory.length, lastMessageInfo] - ); - return (
- {compiledHistory.map((item, index) => - Array.isArray(item) ? renderStatusResponse(item, index) : item - )} + {history.map((props, index) => { + const isLastBotReply = + index === history.length - 1 && props.role === "assistant"; + + if (props?.type === "statusResponse" && !!props.content) { + return ; + } + + if (props.type === "rechartVisualize" && !!props.content) { + return ( + + ); + } + + if (isLastBotReply && props.animate) { + return ( + + ); + } + + return ( + + ); + })} {showing && ( )} @@ -244,13 +253,21 @@ export default function ChatHistory({ ); } -const getLastMessageInfo = (history) => { - const lastMessage = history?.[history.length - 1] || {}; - return { - isAnimating: lastMessage?.animate, - isStatusResponse: lastMessage?.type === "statusResponse", - }; -}; +function StatusResponse({ props }) { + return ( +
+
+
+ + {props.content} + +
+
+
+ ); +} function WorkspaceChatSuggestions({ suggestions = [], sendSuggestion }) { if (suggestions.length === 0) return null; @@ -269,78 +286,3 @@ function WorkspaceChatSuggestions({ suggestions = [], sendSuggestion }) {
); } - -/** - * Builds the history of messages for the chat. - * This is mostly useful for rendering the history in a way that is easy to understand. - * as well as compensating for agent thinking and other messages that are not part of the history, but - * are still part of the chat. - * - * @param {Object} param0 - The parameters for building the messages. - * @param {Array} param0.history - The history of messages. - * @param {Object} param0.workspace - The workspace object. - * @param {Function} param0.regenerateAssistantMessage - The function to regenerate the assistant message. - * @param {Function} param0.saveEditedMessage - The function to save the edited message. - * @param {Function} param0.forkThread - The function to fork the thread. - * @returns {Array} The compiled history of messages. - */ -function buildMessages({ - history, - workspace, - regenerateAssistantMessage, - saveEditedMessage, - forkThread, -}) { - return history.reduce((acc, props, index) => { - const isLastBotReply = - index === history.length - 1 && props.role === "assistant"; - - if (props?.type === "statusResponse" && !!props.content) { - if (acc.length > 0 && Array.isArray(acc[acc.length - 1])) { - acc[acc.length - 1].push(props); - } else { - acc.push([props]); - } - return acc; - } - - if (props.type === "rechartVisualize" && !!props.content) { - acc.push( - - ); - } else if (isLastBotReply && props.animate) { - acc.push( - - ); - } else { - acc.push( - - ); - } - return acc; - }, []); -} diff --git a/frontend/src/index.css b/frontend/src/index.css index 539b5866..96d01d41 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -583,6 +583,22 @@ dialog::backdrop { animation: slideDown 0.3s ease-out forwards; } +@keyframes slideUp { + from { + max-height: 400px; + opacity: 1; + } + + to { + max-height: 0; + opacity: 0; + } +} + +.slide-up { + animation: slideUp 0.3s ease-out forwards; +} + .input-label { @apply text-[14px] font-bold text-white; } @@ -930,51 +946,3 @@ does not extend the close button beyond the viewport. */ .rti--container { @apply !bg-theme-settings-input-bg !text-white !placeholder-white !placeholder-opacity-60 !text-sm !rounded-lg !p-2.5; } - -@keyframes fadeUpIn { - 0% { - opacity: 0; - transform: translateY(5px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.animate-fadeUpIn { - animation: fadeUpIn 0.3s ease-out forwards; -} - -@keyframes bounce-subtle { - 0%, - 100% { - transform: translateY(0); - } - - 50% { - transform: translateY(-2px); - } -} - -@keyframes thoughtTransition { - 0% { - opacity: 0; - transform: translateY(10px); - } - - 30% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.animate-thoughtTransition { - animation: thoughtTransition 0.5s ease-out forwards; -} diff --git a/frontend/src/utils/chat/agent.js b/frontend/src/utils/chat/agent.js index ad1193d3..babe5560 100644 --- a/frontend/src/utils/chat/agent.js +++ b/frontend/src/utils/chat/agent.js @@ -99,7 +99,7 @@ export default function handleSocketResponse(event, setChatHistory) { sources: [], closed: true, error: null, - animate: data?.animate || false, + animate: false, pending: false, }, ]; diff --git a/frontend/src/utils/chat/index.js b/frontend/src/utils/chat/index.js index abde54fe..86c1cd42 100644 --- a/frontend/src/utils/chat/index.js +++ b/frontend/src/utils/chat/index.js @@ -17,7 +17,6 @@ export default function handleChat( sources = [], error, close, - animate = false, chatId = null, action = null, metrics = {}, @@ -35,7 +34,7 @@ export default function handleChat( sources, closed: true, error, - animate, + animate: false, pending: false, metrics, }, @@ -48,7 +47,7 @@ export default function handleChat( sources, closed: true, error, - animate, + animate: false, pending: false, metrics, }); diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 517af2ea..8ecdbcdc 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -141,10 +141,7 @@ export default { }, animation: { sweep: "sweep 0.5s ease-in-out", - "pulse-glow": "pulse-glow 1.5s infinite", - 'fade-in': 'fade-in 0.3s ease-out', - 'slide-up': 'slide-up 0.4s ease-out forwards', - 'bounce-subtle': 'bounce-subtle 2s ease-in-out infinite' + "pulse-glow": "pulse-glow 1.5s infinite" }, keyframes: { sweep: { @@ -178,18 +175,6 @@ export default { boxShadow: "0 0 0 rgba(255, 255, 255, 0.0)", backgroundColor: "rgba(255, 255, 255, 0.0)" } - }, - 'fade-in': { - '0%': { opacity: '0' }, - '100%': { opacity: '1' } - }, - 'slide-up': { - '0%': { transform: 'translateY(10px)', opacity: '0' }, - '100%': { transform: 'translateY(0)', opacity: '1' } - }, - 'bounce-subtle': { - '0%, 100%': { transform: 'translateY(0)' }, - '50%': { transform: 'translateY(-2px)' } } } }