@tradejs/app 1.0.6 → 1.0.8

package/src/app/components/Dashboard/AiDrawer/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   Button,
   CloseButton,
@@ -12,74 +12,42 @@ import {
   HStack,
   Stack,
   Text,
+  Alert,
   SkeletonCircle,
   SkeletonText,
 } from '@chakra-ui/react';
-import { AIChatMessage, AIChatHistory } from '@tradejs/types';
 import { GiArtificialHive } from 'react-icons/gi';
-import { useFilters } from '@store';
-import { sendMessage, getHistory } from '@actions/ai';
+import { useAiChatStore, useFilters } from '@store';
 import { Message } from './Message';
 
 export const AiDrawer = () => {
   const [open, setOpen] = useState(false);
-  const [loading, setLoading] = useState(true);
   const [input, setInput] = useState('');
-  const [messages, setMessages] = useState<AIChatHistory>([]);
   const { filters } = useFilters();
-
-  const loadHistory = useCallback(async () => {
-    setLoading(true);
-
-    const history = await getHistory(filters.symbol);
-
-    setMessages(history);
-
-    setLoading(false);
-  }, [filters.symbol]);
+  const getChat = useAiChatStore((s) => s.getChat);
+  const loadHistory = useAiChatStore((s) => s.loadHistory);
+  const sendPrompt = useAiChatStore((s) => s.sendPrompt);
+  const sendQuickCommand = useAiChatStore((s) => s.sendQuickCommand);
+  const chat = getChat(filters.symbol);
+  const { loading, sending, error, messages } = chat;
+  const isBusy = loading || sending;
+  const canSend = useMemo(
+    () => input.trim().length > 0 && !sending,
+    [input, sending],
+  );
 
   useEffect(() => {
-    void loadHistory();
-  }, [loadHistory]);
+    void loadHistory(filters.symbol);
+  }, [filters.symbol, loadHistory]);
 
   const handleSend = async () => {
     if (!input.trim()) return;
-
-    const message = {
-      from: 'user',
-      text: input,
-      command: 'prompt',
-    } as AIChatMessage;
-
-    setMessages((state) => [...state, message]);
-
-    const response = await sendMessage({ message, filters });
-
-    setMessages((state) => [...state, response]);
-
+    await sendPrompt(filters, input);
     setInput('');
   };
 
   const handleQuick = async (command: string) => {
-    let message: AIChatMessage | null = null;
-
-    if (command === '/line') {
-      message = {
-        from: 'user',
-        text: 'Какие наклонные линии можно построить на данном графике',
-        command,
-      };
-    }
-
-    if (!message) {
-      return;
-    }
-
-    setMessages((state) => [...state, message as AIChatMessage]);
-
-    const response = await sendMessage({ message, filters });
-
-    setMessages((state) => [...state, response]);
+    await sendQuickCommand(filters, command);
   };
 
   return (
@@ -106,6 +74,15 @@ export const AiDrawer = () => {
             </Drawer.Header>
 
             <Drawer.Body overflowY="auto" flex="1">
+              {error ? (
+                <Alert.Root status="error" mb={4}>
+                  <Alert.Indicator />
+                  <Alert.Content>
+                    <Alert.Title>AI chat error</Alert.Title>
+                    <Alert.Description>{error}</Alert.Description>
+                  </Alert.Content>
+                </Alert.Root>
+              ) : null}
               {loading ? (
                 <Stack gap="4" maxW="xs">
                   <HStack width="full">
@@ -128,6 +105,7 @@ export const AiDrawer = () => {
                 <Button
                   size="sm"
                   variant="outline"
+                  disabled={isBusy}
                   onClick={() => handleQuick('/line')}
                 >
                   /line
@@ -135,6 +113,7 @@ export const AiDrawer = () => {
                 <Button
                   size="sm"
                   variant="outline"
+                  disabled={isBusy}
                   onClick={() => handleQuick('/analyze')}
                 >
                   /analyze
@@ -148,10 +127,18 @@ export const AiDrawer = () => {
                 rows={3}
                 maxH="15lh"
                 value={input}
+                disabled={sending}
                 onChange={(e) => setInput(e.target.value)}
               />
 
-              <Button mt={2} size={'sm'} variant="subtle" onClick={handleSend}>
+              <Button
+                mt={2}
+                size={'sm'}
+                variant="subtle"
+                disabled={!canSend}
+                loading={sending}
+                onClick={handleSend}
+              >
                 Send
               </Button>
             </Drawer.Footer>

package/src/app/components/Shared/Filters/Backtest/index.tsx

@@ -6,7 +6,8 @@ import { Select } from '@UI';
 import { useFiltersContext } from '../context';
 
 export const SelectBacktest = () => {
-  const { filters, backtestFiles, onChangeFilters } = useFiltersContext();
+  const { filters, backtestFiles, onChangeFilters, ensureBacktestsLoaded } =
+    useFiltersContext();
   const STORAGE_KEY = 'backtest-strategy';
 
   const tests = useMemo(
@@ -127,10 +128,6 @@ export const SelectBacktest = () => {
     }
   };
 
-  if (_.isEmpty(tests) || _.isEmpty(strategyItems) || !selectedStrategy) {
-    return null;
-  }
-
   const strategyTests = tests.filter(
     (test) => test.data?.strategyName === selectedStrategy,
   );
@@ -142,6 +139,11 @@ export const SelectBacktest = () => {
         defaultValue={[selectedStrategy]}
         value={[selectedStrategy]}
         onChange={onChangeStrategy}
+        onOpenChange={(open) => {
+          if (open) {
+            void ensureBacktestsLoaded?.();
+          }
+        }}
         items={strategyItems}
         width="220px"
       />
@@ -150,6 +152,11 @@ export const SelectBacktest = () => {
         defaultValue={[filters.backtestId || '']}
         value={[filters.backtestId || '']}
         onChange={onChange}
+        onOpenChange={(open) => {
+          if (open) {
+            void ensureBacktestsLoaded?.();
+          }
+        }}
         items={[
           {
             label: 'Not selected',

package/src/app/components/Shared/Filters/Root/index.tsx

@@ -9,6 +9,8 @@ interface RootProps {
   backtestFiles: Items;
   filters: UIFilters;
   onChangeFilters?: OnChangeFilters;
+  ensureTickersLoaded?: () => void | Promise<unknown>;
+  ensureBacktestsLoaded?: () => void | Promise<unknown>;
 }
 
 export const Root = ({
@@ -16,11 +18,20 @@ export const Root = ({
   tickers,
   backtestFiles,
   onChangeFilters,
+  ensureTickersLoaded,
+  ensureBacktestsLoaded,
   children,
 }: PropsWithChildren<RootProps>) => {
   return (
     <FiltersContext.Provider
-      value={{ filters, tickers, backtestFiles, onChangeFilters }}
+      value={{
+        filters,
+        tickers,
+        backtestFiles,
+        onChangeFilters,
+        ensureTickersLoaded,
+        ensureBacktestsLoaded,
+      }}
     >
       {children}
     </FiltersContext.Provider>

package/src/app/components/Shared/Filters/Symbol/index.tsx

@@ -2,14 +2,13 @@
 
 import _ from 'lodash';
 import { SelectWithSearch } from '@UI';
-import { SkeletonText, Stack, Show } from '@chakra-ui/react';
 import { useFiltersContext } from '../context';
 
 interface SelectSymbolProps {}
 
 export const SelectSymbol = ({}: SelectSymbolProps) => {
-  const { filters, tickers, onChangeFilters } = useFiltersContext();
-  const loading = _.isEmpty(tickers);
+  const { filters, tickers, onChangeFilters, ensureTickersLoaded } =
+    useFiltersContext();
   const defaultInputValue =
     tickers.find(({ value }) => value === filters.symbol)?.label ||
     filters.symbol;
@@ -29,21 +28,17 @@ export const SelectSymbol = ({}: SelectSymbolProps) => {
   };
 
   return (
-    <Show
-      when={!loading}
-      fallback={
-        <Stack width="240px">
-          <SkeletonText height={8} noOfLines={1} />
-        </Stack>
-      }
-    >
-      <SelectWithSearch
-        defaultValue={[filters.symbol]}
-        defaultInputValue={defaultInputValue}
-        onChange={onChange}
-        items={tickers}
-        width="240px"
-      />
-    </Show>
+    <SelectWithSearch
+      defaultValue={[filters.symbol]}
+      defaultInputValue={defaultInputValue}
+      onChange={onChange}
+      onOpenChange={(open) => {
+        if (open) {
+          void ensureTickersLoaded?.();
+        }
+      }}
+      items={tickers}
+      width="240px"
+    />
   );
 };

package/src/app/components/Shared/Filters/context.ts

@@ -6,6 +6,8 @@ interface FiltersContextProps {
   tickers: Items;
   backtestFiles: Items;
   onChangeFilters?: OnChangeFilters;
+  ensureTickersLoaded?: () => void | Promise<unknown>;
+  ensureBacktestsLoaded?: () => void | Promise<unknown>;
 }
 
 export const FiltersContext = createContext<FiltersContextProps>(