Add back chat queue info (LAION-AI#3023)

Look not good, I have no idea about a better UI ![image](https://user-images.githubusercontent.com/33456881/235862661-a551807f-65e4-4e4f-9455-3d5ed5ed9a17.png)
ruoniw · May 5, 2023 · 40b9dc8 · 40b9dc8
1 parent d46d2ea
commit 40b9dc8
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 26 deletions.
diff --git a/website/src/components/Chat/ChatConversation.tsx b/website/src/components/Chat/ChatConversation.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Box, CircularProgress, useBoolean, useToast } from "@chakra-ui/react";
+import { Badge, Box, CircularProgress, useBoolean, useToast } from "@chakra-ui/react";
+import { useTranslation } from "next-i18next";
 import { KeyboardEvent, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { UseFormGetValues } from "react-hook-form";
-import { useChatContext } from "src/components/Chat/ChatContext";
 import SimpleBar from "simplebar-react";
 import { useMessageVote } from "src/hooks/chat/useMessageVote";
 import { get, post } from "src/lib/api";
@@ -30,6 +30,7 @@ interface ChatConversationProps {
 }
 
 export const ChatConversation = memo(function ChatConversation({ chatId, getConfigValues }: ChatConversationProps) {
+  const { t } = useTranslation("chat");
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [messages, setMessages] = useState<InferenceMessage[]>([]);
 
@@ -260,27 +261,35 @@ export const ChatConversation = memo(function ChatConversation({ chatId, getConf
         bg: "blackAlpha.300",
       }}
     >
-      {isLoadingMessages && <CircularProgress isIndeterminate size="20px" mx="auto" />}
-      <SimpleBar
-        onMouseDown={updateEnableAutoScroll}
-        scrollableNodeProps={scrollableNodeProps}
-        style={{ maxHeight: "100%", height: "100%", minHeight: "0" }}
-        classNames={{
-          contentEl: "space-y-4 mx-4 flex flex-col overflow-y-auto items-center",
-        }}
-      >
-        <ChatConversationTree
-          messages={messages}
-          onVote={handleOnVote}
-          onRetry={handleOnRetry}
-          isSending={isSending}
-          retryingParentId={retryingParentId}
-          onEditPromtp={handleEditPrompt}
-        ></ChatConversationTree>
-        {isSending && streamedResponse && <PendingMessageEntry isAssistant content={streamedResponse} />}
-        <div ref={messagesEndRef} style={{ height: 0 }}></div>
-      </SimpleBar>
-      <ChatForm ref={inputRef} isSending={isSending} onSubmit={sendPrompterMessage} queueInfo={queueInfo}></ChatForm>
+      <Box height="full" minH={0} position="relative">
+        {isLoadingMessages && <CircularProgress isIndeterminate size="20px" mx="auto" />}
+        <SimpleBar
+          onMouseDown={updateEnableAutoScroll}
+          scrollableNodeProps={scrollableNodeProps}
+          style={{ maxHeight: "100%", height: "100%", minHeight: "0", paddingBottom: "1rem" }}
+          classNames={{
+            contentEl: "space-y-4 mx-4 flex flex-col overflow-y-auto items-center",
+          }}
+        >
+          <ChatConversationTree
+            messages={messages}
+            onVote={handleOnVote}
+            onRetry={handleOnRetry}
+            isSending={isSending}
+            retryingParentId={retryingParentId}
+            onEditPromtp={handleEditPrompt}
+          ></ChatConversationTree>
+          {isSending && streamedResponse && <PendingMessageEntry isAssistant content={streamedResponse} />}
+          <div ref={messagesEndRef} style={{ height: 0 }}></div>
+        </SimpleBar>
+
+        {queueInfo && (
+          <Badge position="absolute" bottom="0" left="50%" transform="translate(-50%)">
+            {t("queue_info", queueInfo)}
+          </Badge>
+        )}
+      </Box>
+      <ChatForm ref={inputRef} isSending={isSending} onSubmit={sendPrompterMessage}></ChatForm>
       <ChatWarning />
     </Box>
   );

diff --git a/website/src/components/Chat/ChatForm.tsx b/website/src/components/Chat/ChatForm.tsx
@@ -4,19 +4,18 @@ import { useTranslation } from "next-i18next";
 import { forwardRef, KeyboardEvent, SyntheticEvent, useCallback, useEffect } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { useFallbackRef } from "src/hooks/ui/useFallbackRef";
-import { QueueInfo } from "src/lib/chat_stream";
+
 import { ChatConfigDrawer } from "./ChatConfigMobile";
 import { ChatInputIconButton } from "./ChatInputIconButton";
 
 type ChatFormProps = {
   isSending: boolean;
   onSubmit: () => void;
-  queueInfo: QueueInfo | null;
 };
 
 // eslint-disable-next-line react/display-name
 export const ChatForm = forwardRef<HTMLTextAreaElement, ChatFormProps>((props, forwardedRef) => {
-  const { isSending, onSubmit: onSubmit, queueInfo } = props;
+  const { isSending, onSubmit: onSubmit } = props;
   const { t } = useTranslation("chat");
   const handleSubmit = useCallback(
     (e: SyntheticEvent) => {