feat: update chat ui

web/src/components/auth.jsx

@@ -15,8 +15,8 @@ import {
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { upperFirst, useToggle } from "@mantine/hooks";
-import { notifications } from "@mantine/notifications";
 import { useState } from "react";
+import { toastInfo } from "../libs/alert";
 import { AuthApi } from "../sdk/index";
 
 export function AuthenticationForm() {
@@ -47,13 +47,10 @@ export function AuthenticationForm() {
         request: form.values,
       });
       console.log(user);
-      notifications.show({
-        title: "Registration successful",
-        message: "You have successfully registered: " + user.email + "!",
-        color: "green",
-        positions: "top-right",
-        autoClose: 1000,
-      });
+      toastInfo(
+        "You have successfully registered: " + user.email + "!",
+        "Registration successful",
+      );
       // redirect to home page
       window.location.href = "/";
     } catch (error) {
@@ -64,13 +61,7 @@ export function AuthenticationForm() {
   const login = async () => {
     try {
       const user = await authApi.authLoginPost({ request: form.values });
-      notifications.show({
-        title: "Login successful",
-        message: "You have successfully logged in!",
-        color: "green",
-        positions: "top-right",
-        autoClose: 1000,
-      });
+      toastInfo("You have successfully logged in!", "Login successful");
       // redirect to home page after successful login and wait for 1 second
       setTimeout(() => {
         window.location.href = "/";

web/src/components/thread.jsx

@@ -14,16 +14,17 @@ import {
   Slider,
   Stack,
   Text,
-  TextInput,
+  Textarea,
   Tooltip,
   useComputedColorScheme,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { useDisclosure } from "@mantine/hooks";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import Markdown from "react-markdown";
 import avatarImgUrl from "../assets/avatar-1.png";
+import { toastError } from "../libs/alert";
 import useStore from "../libs/store";
 import { AssistantsApi } from "../sdk/index";
 
@@ -99,6 +100,9 @@ export default function ChatWindowsComponent() {
         },
       ]);
     },
+    onError: (error) => {
+      toastError("Failed to send message: " + error.message);
+    },
   });
 
   const messageS = (id, role, text) => {
@@ -221,28 +225,32 @@ export default function ChatWindowsComponent() {
               bottom: 0,
             }}
           >
-            <TextInput
-              placeholder="Send a message"
-              variant="filled"
+            <Textarea
+              placeholder="Send a message, use Shift + Enter to send."
               radius="lg"
               leftSection={menu()}
               leftSectionWidth={42}
-              disabled={createMessage.isLoading}
+              minRows={1}
+              maxRows={5}
+              autosize
+              disabled={createMessage.isPending}
               onKeyDown={async (e) => {
-                if (e.key === "Enter") {
+                // Shift + Enter to send
+                if (e.key === "Enter" && e.shiftKey === true) {
                   await sendMessage(e.currentTarget.value);
                 }
               }}
               rightSection={
                 <ActionIcon
                   variant="transparent"
                   aria-label="Settings"
-                  disabled={createMessage.isLoading}
-                  onClick={async (e) => {
-                    await sendMessage(newText);
+                  onClick={async () => {
+                    const text = newText;
+                    setNewText("");
+                    await sendMessage(text);
                   }}
                 >
-                  {createMessage.isLoading ? (
+                  {createMessage.isPending ? (
                     <Icon icon="svg-spinners:180-ring" />
                   ) : (
                     <Icon icon="tabler:send"></Icon>
@@ -251,7 +259,7 @@ export default function ChatWindowsComponent() {
               }
               value={newText}
               onChange={(e) => setNewText(e.currentTarget.value)}
-            ></TextInput>
+            ></Textarea>
           </Container>
         </Flex>
 

web/src/libs/alert.js

@@ -0,0 +1,31 @@
+import { notifications } from "@mantine/notifications";
+
+export function toastInfo(message, title = "Success") {
+  notifications.show({
+    title: title,
+    message: message,
+    color: "green",
+    positions: "top-right",
+    autoClose: 1000,
+  });
+}
+
+export function toastWarning(message, title = "Attention !") {
+  notifications.show({
+    title: title,
+    message: message,
+    color: "yellow",
+    positions: "top-right",
+    autoClose: 1000,
+  });
+}
+
+export function toastError(message, title = "Error !!!") {
+  notifications.show({
+    title: title,
+    message: message,
+    color: "red",
+    positions: "top-right",
+    autoClose: 3000,
+  });
+}

web/src/libs/api.js

@@ -4,7 +4,8 @@ import { AssistantsApi, AuthApi, Configuration, ToolsApi } from "../sdk/index";
 export const queryClient = new QueryClient();
 
 const config = new Configuration({
-    credentials: "include",
+  basePath: "/api/v1",
+  credentials: "include",
 });
 
 export const assistantAPI = new AssistantsApi(config);