Style updates to chat UI

website/src/components/Chat/ChatConversation.tsx

@@ -203,9 +203,13 @@ const ChatMessageEntry = memo(function ChatMessageEntry({
     <PendingMessageEntry isAssistant={isAssistant} content={children!}>
       {isAssistant && (
         <MessageInlineEmojiRow>
-          {state === "pending" && <CircularProgress isIndeterminate size="20px" title={state} />}
+          {(state === "pending" || state === "in_progress") && (
+            <CircularProgress isIndeterminate size="20px" title={state} />
+          )}
           {(state === "aborted_by_worker" || state === "cancelled" || state === "timeout") && (
-            <Icon as={XCircle} color="red" />
+            <div title={state}>
+              <Icon as={XCircle} color="red" />
+            </div>
           )}
           <MessageEmojiButton
             emoji={{ name: "+1", count: 0 }}
@@ -236,22 +240,24 @@ type PendingMessageEntryProps = {
 };
 
 const PendingMessageEntry = ({ content, isAssistant, children }: PendingMessageEntryProps) => {
-  const bgUser = useColorModeValue("gray.100", "gray.700");
-  const bgAssistant = useColorModeValue("#DFE8F1", "#42536B");
+  const bgAssistant = useColorModeValue("gray.100", "gray.800");
+  const bgUser = useColorModeValue("#f1f8ff", "#42536B");
   const { data: session } = useSession();
   const image = session?.user?.image;
 
   const avatarProps = useMemo(
-    () => ({
-      src: isAssistant ? `/images/logos/logo.png` : image ?? "/images/temp-avatars/av1.jpg",
-    }),
+    () => ({ src: isAssistant ? `/images/logos/logo.png` : image ?? "/images/temp-avatars/av1.jpg" }),
     [isAssistant, image]
   );
 
   return (
     <BaseMessageEntry
       avatarProps={avatarProps}
       bg={isAssistant ? bgAssistant : bgUser}
+      stackProps={{
+        alignSelf: isAssistant ? "start" : "end",
+        flexDirection: isAssistant ? "row" : "row-reverse",
+      }}
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       content={content!}
     >

website/src/components/Messages/BaseMessageEntry.tsx

@@ -1,16 +1,26 @@
-import { Avatar, AvatarProps, Box, BoxProps, HStack, useBreakpointValue, useColorModeValue } from "@chakra-ui/react";
+import {
+  Avatar,
+  AvatarProps,
+  Box,
+  BoxProps,
+  HStack,
+  StackProps,
+  useBreakpointValue,
+  useColorModeValue,
+} from "@chakra-ui/react";
 import { forwardRef, lazy, Suspense, useMemo } from "react";
 
 const RenderedMarkdown = lazy(() => import("./RenderedMarkdown"));
 
 export type BaseMessageEntryProps = BoxProps & {
   content: string;
   avatarProps: Pick<AvatarProps, "name" | "src">;
+  stackProps?: StackProps;
 };
 
 // eslint-disable-next-line react/display-name
 export const BaseMessageEntry = forwardRef<HTMLDivElement, BaseMessageEntryProps>(
-  ({ content, avatarProps, children, ...props }, ref) => {
+  ({ content, avatarProps, stackProps, children, ...props }, ref) => {
     const inlineAvatar = useBreakpointValue({ base: true, md: false });
     const borderColor = useColorModeValue("blackAlpha.200", "whiteAlpha.200");
     const bg = useColorModeValue("#DFE8F1", "#42536B");
@@ -32,17 +42,18 @@ export const BaseMessageEntry = forwardRef<HTMLDivElement, BaseMessageEntryProps
       <HStack
         ref={ref}
         w={["full", "full", "full", "fit-content"]}
-        gap={0.5}
+        gap={1}
         alignItems="start"
         maxW="full"
         position="relative"
+        {...stackProps}
       >
         {!inlineAvatar && avatar}
         <Box
           width={["full", "full", "full", "fit-content"]}
           maxWidth={["full", "full", "full", "2xl"]}
           p={[3, 4]}
-          borderRadius="18px"
+          borderRadius="lg"
           bg={bg}
           overflowX="auto"
           {...props}

website/src/lib/oasst_inference_client.ts

@@ -25,6 +25,17 @@ export class OasstInferenceClient {
     return data;
   }
 
+  // note: maybe check if the token is still valid
+  // when creating JWT?
+  async check_auth(): Promise<boolean> {
+    try {
+      await this.request("/auth/check");
+      return true;
+    } catch (err) {
+      return false;
+    }
+  }
+
   get_my_chats(): Promise<ChatItem[]> {
     return this.request("/chats");
   }

website/src/pages/chat/[id].tsx

@@ -28,16 +28,14 @@ const Chat = ({ id, modelInfos }: ChatProps) => {
       </Head>
 
       <ChatContextProvider modelInfos={modelInfos}>
-        <Card>
-          <CardBody>
-            <Flex direction="column" gap="2">
-              <Link href="/chat">
-                <Button leftIcon={<List />} size="lg">
-                  {t("chat:back_to_chat_list")}
-                </Button>
-              </Link>
-              <ChatSection chatId={id} />
-            </Flex>
+        <Card className="max-w-5xl mx-auto">
+          <CardBody display="flex" flexDirection="column" gap="2">
+            <Link href="/chat">
+              <Button leftIcon={<List />} size="lg">
+                {t("chat:back_to_chat_list")}
+              </Button>
+            </Link>
+            <ChatSection chatId={id} />
           </CardBody>
         </Card>
       </ChatContextProvider>

website/src/pages/chat/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Divider, Flex, Progress, Text } from "@chakra-ui/react";
+import { Box, Button, Divider, Flex, Progress, Text } from "@chakra-ui/react";
 import { GetServerSideProps } from "next";
 import Head from "next/head";
 import Link from "next/link";
@@ -58,14 +58,16 @@ const Chat = ({ inferenceHost }: { inferenceHost: string }) => {
           <Divider />
           {data.chats.map(({ id, modified_at, title }) => (
             <Link key={id} href={`/chat/${id}`}>
-              <Flex as={Button} bg="inherit" py={2} w="full" borderRadius="sm" gap={6} justifyContent="start">
+              <Flex as={Button} bg="inherit" py={2} w="full" borderRadius="sm" gap={6} justifyContent="space-between">
+                <Text overflowX="hidden" textOverflow="ellipsis">
+                  {title ?? t("chat:empty")}
+                </Text>
                 <Text>
                   {t("chat:chat_date", {
                     val: new Date(modified_at),
                     formatParams: { val: { dateStyle: "short", timeStyle: "short" } },
                   })}
                 </Text>
-                <Text>{title ?? t("chat:empty")}</Text>
               </Flex>
             </Link>
           ))}
@@ -83,8 +85,10 @@ const Chat = ({ inferenceHost }: { inferenceHost: string }) => {
       <Head>
         <title>{t("chat")}</title>
       </Head>
-      {content}
-      <ChatAuth inferenceHost={inferenceHost} />
+      <Box className="max-w-5xl mx-auto">
+        {content}
+        <ChatAuth inferenceHost={inferenceHost} />
+      </Box>
     </>
   );
 };

website/src/types/Chat.ts

@@ -27,7 +27,7 @@ export interface InferenceMessage {
   id: string;
   created_at: string; //timestamp
   content: string | null;
-  state: "manual" | "pending" | "complete" | "aborted_by_worker" | "cancelled" | "timeout";
+  state: "manual" | "pending" | "in_progress" | "complete" | "aborted_by_worker" | "cancelled" | "timeout";
   role: "assistant" | "prompter";
   score: number;
   reports: any[];