refactor: improve style of ai chat bot style and improve user interface

Author: moonrailgun

src/client/components/ai/AIResponseItem.tsx

@@ -26,7 +26,6 @@ import {
 import { get, map } from 'lodash-es';
 
 type AskForConfirmationInput = { message: string };
-type WeatherInformationInput = { city: string };
 
 function isAskForConfirmationInput(
   input: unknown

src/client/components/ai/AIResponseMessages.tsx

@@ -2,6 +2,7 @@ import { AbstractChat, ChatStatus, UIDataTypes, UIMessage, UITools } from 'ai';
 import React from 'react';
 import { Message, MessageContent } from '../ai-elements/message';
 import { AIResponseItem } from './AIResponseItem';
+import { Spinner } from '../ui/spinner';
 
 interface AIResponseMessagesProps {
   messages: UIMessage<unknown, UIDataTypes, UITools>[];
@@ -31,6 +32,14 @@ export const AIResponseMessages: React.FC<AIResponseMessagesProps> = React.memo(
             </MessageContent>
           </Message>
         ))}
+
+        {status === 'submitted' && (
+          <Message from="assistant">
+            <MessageContent>
+              <Spinner />
+            </MessageContent>
+          </Message>
+        )}
       </>
     );
   }

src/client/hooks/useWarehouseAIChat.ts

@@ -123,8 +123,14 @@ export function useWarehouseAIChat({
       return;
     }
 
-    await handleSendWithScopes(input.trim());
+    const text = input.trim();
     setInput('');
+    try {
+      await handleSendWithScopes(text);
+    } catch (err) {
+      toast.error(String(err));
+      setInput(text);
+    }
   });
 
   // Handle suggestion click

src/client/routes/insights/warehouse/index.tsx

@@ -252,44 +252,36 @@ function PageComponent() {
                 </div>
               </div>
               <div className="border-t border-zinc-200 dark:border-zinc-800" />
-              <ScrollArea className="flex-1">
-                <Conversation>
-                  <ConversationContent>
-                    <AIResponseMessages
-                      messages={messages}
-                      status={status}
-                      onAddToolResult={addToolResult}
-                    />
-                  </ConversationContent>
-                  <ConversationScrollButton />
-                </Conversation>
 
-                {error && (
-                  <div className="p-3">
-                    <Alert variant="destructive">
-                      <LuCircleAlert className="h-4 w-4" />
-                      <AlertTitle>{t('An error occurred.')}</AlertTitle>
-                      <AlertDescription>{String(error)}</AlertDescription>
-                      <div className="mt-2 flex items-center gap-2">
-                        <Button
-                          size="sm"
-                          variant="destructive"
-                          onClick={handleReset}
-                        >
-                          {t('Retry')}
-                        </Button>
-                      </div>
-                    </Alert>
-                  </div>
-                )}
+              <Conversation>
+                <ConversationContent>
+                  <AIResponseMessages
+                    messages={messages}
+                    status={status}
+                    onAddToolResult={addToolResult}
+                  />
+                </ConversationContent>
+                <ConversationScrollButton />
+              </Conversation>
 
-                {usage && status === 'ready' && messages.length > 0 && (
-                  <div className="px-4 py-1 text-right text-xs text-opacity-40">
-                    {formatNumber(usage.inputTokens + usage.outputTokens)}{' '}
-                    tokens used
-                  </div>
-                )}
-              </ScrollArea>
+              {error && (
+                <div className="p-3">
+                  <Alert variant="destructive">
+                    <LuCircleAlert className="h-4 w-4" />
+                    <AlertTitle>{t('An error occurred.')}</AlertTitle>
+                    <AlertDescription>{String(error)}</AlertDescription>
+                    <div className="mt-2 flex items-center gap-2">
+                      <Button
+                        size="sm"
+                        variant="destructive"
+                        onClick={handleReset}
+                      >
+                        {t('Retry')}
+                      </Button>
+                    </div>
+                  </Alert>
+                </div>
+              )}
 
               {!databaseStatus.isDisabled && (
                 <Suggestions className="p-3 pb-0">
@@ -384,6 +376,15 @@ function PageComponent() {
                   )}
                 </div>
 
+                {usage && status === 'ready' && messages.length > 0 && (
+                  <div className="relative">
+                    <div className="absolute -top-8 right-0 px-4 py-1 text-right text-xs text-opacity-40">
+                      {formatNumber(usage.inputTokens + usage.outputTokens)}{' '}
+                      {t('tokens used')}
+                    </div>
+                  </div>
+                )}
+
                 <PromptInput onSubmit={handleSend}>
                   <PromptInputTextarea
                     value={input}

src/server/router/insights.ts

@@ -31,7 +31,7 @@ const openai = createOpenAI({
 });
 
 insightsRouter.post('/:workspaceId/chat', auth(), async (req, res) => {
-  if (!env.insights.warehouse.enable || !env.openai.enable) {
+  if (!env.openai.enable) {
     // only for dev now, and require shared OpenAI enabled
     res
       .status(401)
@@ -41,7 +41,7 @@ insightsRouter.post('/:workspaceId/chat', auth(), async (req, res) => {
     return;
   }
 
-  if (req.user?.id !== INIT_ADMIN_USER_ID) {
+  if (req.user?.id !== INIT_ADMIN_USER_ID && !env.isDev) {
     res.status(401).end('This feature is only for admin user');
     return;
   }

src/server/utils/env.ts

@@ -134,6 +134,9 @@ export const env = {
     },
   },
   insights: {
+    /**
+     * @deprecated
+     */
     warehouse: {
       enable: Boolean(process.env.INSIGHTS_WAREHOUSE_URL),
       url: process.env.INSIGHTS_WAREHOUSE_URL,