github/OpenHands
1
1
Fork 0
mirror of https://github.com/All-Hands-AI/OpenHands.git synced 2026-04-29 03:00:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): Add Typing Indicator for Agent Response using Tailwind CSS (#2630)

Browse Source 
* feat(frontend): Add Typing Indicator for Agent Response

* finetuning and linting

* evil lil linter

* TailwindCSS styles now

* improve bounce

* merge fix

* merge fix 2

* one more fix

* poetry.lock fix

---------

Co-authored-by: tobitege <tobitege@gmx.de>
This commit is contained in:
PierrunoYT
2024-06-26 04:15:04 +02:00
committed by GitHub
parent 7ff746250e
commit fcbf1f8242
2 changed files with 45 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/components/chat/ChatInterface.tsx
View File

@@ -1,3 +1,4 @@
// frontend/src/components/chat/ChatInterface.tsx
import React, { useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { IoMdChatbubbles } from "react-icons/io";
@@ -8,6 +9,7 @@ import { FaRegThumbsDown, FaRegThumbsUp } from "react-icons/fa";
import { useDisclosure } from "@nextui-org/react";
import ChatInput from "./ChatInput";
import Chat from "./Chat";
import TypingIndicator from "./TypingIndicator";
import { RootState } from "#/store";
import AgentState from "#/types/AgentState";
import { sendChatMessage } from "#/services/chatService";
@@ -127,19 +129,27 @@ function ChatInterface() {
<div className="relative">
<div className="absolute bottom-2 left-0 right-0 flex items-center justify-center">
{!hitBottom &&
ScrollButton({
onClick: scrollDomToBottom,
icon: <VscArrowDown className="inline mr-2 w-3 h-3" />,
label: t(I18nKey.CHAT_INTERFACE$TO_BOTTOM),
})}
{curAgentState === AgentState.AWAITING_USER_INPUT &&
hitBottom &&
ScrollButton({
onClick: handleSendContinueMsg,
icon: <RiArrowRightDoubleLine className="inline mr-2 w-3 h-3" />,
label: t(I18nKey.CHAT_INTERFACE$INPUT_CONTINUE_MESSAGE),
})}
{!hitBottom && (
<ScrollButton
onClick={scrollDomToBottom}
icon={<VscArrowDown className="inline mr-2 w-3 h-3" />}
label={t(I18nKey.CHAT_INTERFACE$TO_BOTTOM)}
/>
)}
{hitBottom && (
<>
{curAgentState === AgentState.AWAITING_USER_INPUT && (
<ScrollButton
onClick={handleSendContinueMsg}
icon={
<RiArrowRightDoubleLine className="inline mr-2 w-3 h-3" />
}
label={t(I18nKey.CHAT_INTERFACE$INPUT_CONTINUE_MESSAGE)}
/>
)}
{curAgentState === AgentState.RUNNING && <TypingIndicator />}
</>
)}
</div>
{feedbackShared !== messages.length && messages.length > 3 && (

22
frontend/src/components/chat/TypingIndicator.tsx Normal file
View File

@@ -0,0 +1,22 @@
import React from "react";
function TypingIndicator(): React.ReactElement {
return (
<div className="flex items-center space-x-1.5 bg-neutral-700 px-3 py-1.5 rounded-full">
<span
className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-[bounce_0.5s_infinite] translate-y-[-2px]"
style={{ animationDelay: "0ms" }}
/>
<span
className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-[bounce_0.5s_infinite] translate-y-[-2px]"
style={{ animationDelay: "75ms" }}
/>
<span
className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-[bounce_0.5s_infinite] translate-y-[-2px]"
style={{ animationDelay: "150ms" }}
/>
</div>
);
}
export default TypingIndicator;