@tradejs/app 1.0.6 → 1.0.9

package/src/app/components/Shared/Sidebar/AccountSettingsDrawer.tsx

@@ -17,6 +17,21 @@ import {
   Text,
 } from '@chakra-ui/react';
 import { FiEdit2, FiSettings } from 'react-icons/fi';
+import {
+  AI_RESPONSE_LANGUAGE_OPTIONS,
+  normalizeAiResponseLanguage,
+} from '@tradejs/infra/aiLanguages';
+import {
+  AI_CUSTOM_ENDPOINT_VALUE,
+  AI_ENDPOINT_OPTIONS,
+  normalizeAiEndpoint,
+} from '@tradejs/infra/aiEndpoints';
+import {
+  AI_CUSTOM_MODEL_VALUE,
+  getAiModelOptionsForEndpoint,
+  hasPresetAiModelsForEndpoint,
+  normalizeAiModel,
+} from '@tradejs/infra/aiModels';
 import { toaster } from '@UI';
 
 type SettingsResponse = {
@@ -26,13 +41,14 @@ type SettingsResponse = {
       apiKey: string;
       apiSecret: string;
     };
-    token: string;
     coinalyze: {
       apiKey: string;
     };
-    openai: {
+    ai: {
       apiKey: string;
       apiEndpoint: string;
+      model: string;
+      responseLanguage: string;
     };
     telegram: {
       botToken: string;
@@ -49,10 +65,11 @@ type SettingsViewState = {
   userName: string;
   bybitApiKey: string;
   bybitApiSecret: string;
-  token: string;
   coinalyzeApiKey: string;
-  openAIApiKey: string;
-  openAIApiEndpoint: string;
+  aiApiKey: string;
+  aiApiEndpoint: string;
+  aiModel: string;
+  aiResponseLanguage: string;
   tgBotToken: string;
   tgChatId: string;
 };
@@ -64,20 +81,15 @@ type PasswordState = {
   confirmPassword: string;
 };
 
-type SectionName =
-  | 'bybit'
-  | 'password'
-  | 'token'
-  | 'coinalyze'
-  | 'openai'
-  | 'telegram';
+type SectionName = 'bybit' | 'password' | 'coinalyze' | 'ai' | 'telegram';
 type EditableField =
   | 'bybitApiKey'
   | 'bybitApiSecret'
-  | 'token'
   | 'coinalyzeApiKey'
-  | 'openAIApiKey'
-  | 'openAIApiEndpoint'
+  | 'aiApiKey'
+  | 'aiApiEndpoint'
+  | 'aiModel'
+  | 'aiResponseLanguage'
   | 'tgBotToken'
   | 'tgChatId';
 
@@ -85,10 +97,11 @@ const EMPTY_SETTINGS: SettingsViewState = {
   userName: '',
   bybitApiKey: '',
   bybitApiSecret: '',
-  token: '',
   coinalyzeApiKey: '',
-  openAIApiKey: '',
-  openAIApiEndpoint: '',
+  aiApiKey: '',
+  aiApiEndpoint: '',
+  aiModel: '',
+  aiResponseLanguage: '',
   tgBotToken: '',
   tgChatId: '',
 };
@@ -96,10 +109,11 @@ const EMPTY_SETTINGS: SettingsViewState = {
 const EMPTY_DRAFTS: SettingsDraftState = {
   bybitApiKey: '',
   bybitApiSecret: '',
-  token: '',
   coinalyzeApiKey: '',
-  openAIApiKey: '',
-  openAIApiEndpoint: '',
+  aiApiKey: '',
+  aiApiEndpoint: '',
+  aiModel: '',
+  aiResponseLanguage: '',
   tgBotToken: '',
   tgChatId: '',
 };
@@ -112,10 +126,11 @@ const EMPTY_PASSWORDS: PasswordState = {
 const EMPTY_EDITING: Record<EditableField, boolean> = {
   bybitApiKey: false,
   bybitApiSecret: false,
-  token: false,
   coinalyzeApiKey: false,
-  openAIApiKey: false,
-  openAIApiEndpoint: false,
+  aiApiKey: false,
+  aiApiEndpoint: false,
+  aiModel: false,
+  aiResponseLanguage: false,
   tgBotToken: false,
   tgChatId: false,
 };
@@ -125,18 +140,16 @@ const SECTION_FIELDS: Record<
   EditableField[]
 > = {
   bybit: ['bybitApiKey', 'bybitApiSecret'],
-  token: ['token'],
   coinalyze: ['coinalyzeApiKey'],
-  openai: ['openAIApiKey', 'openAIApiEndpoint'],
+  ai: ['aiApiKey', 'aiApiEndpoint', 'aiModel', 'aiResponseLanguage'],
   telegram: ['tgBotToken', 'tgChatId'],
 };
 
 const MASKED_FIELDS = new Set<EditableField>([
   'bybitApiKey',
   'bybitApiSecret',
-  'token',
   'coinalyzeApiKey',
-  'openAIApiKey',
+  'aiApiKey',
   'tgBotToken',
 ]);
 
@@ -144,17 +157,31 @@ const toViewState = (payload: SettingsResponse): SettingsViewState => ({
   userName: payload.userName,
   bybitApiKey: payload.settings.bybit.apiKey || '',
   bybitApiSecret: payload.settings.bybit.apiSecret || '',
-  token: payload.settings.token || '',
   coinalyzeApiKey: payload.settings.coinalyze.apiKey || '',
-  openAIApiKey: payload.settings.openai.apiKey || '',
-  openAIApiEndpoint: payload.settings.openai.apiEndpoint || '',
+  aiApiKey: payload.settings.ai.apiKey || '',
+  aiApiEndpoint:
+    normalizeAiEndpoint(payload.settings.ai.apiEndpoint) ||
+    AI_ENDPOINT_OPTIONS[0].value,
+  aiModel:
+    normalizeAiModel(
+      payload.settings.ai.model,
+      normalizeAiEndpoint(payload.settings.ai.apiEndpoint) ||
+        AI_ENDPOINT_OPTIONS[0].value,
+    ) ||
+    payload.settings.ai.model ||
+    '',
+  aiResponseLanguage: normalizeAiResponseLanguage(
+    payload.settings.ai.responseLanguage,
+  ),
   tgBotToken: payload.settings.telegram.botToken || '',
   tgChatId: payload.settings.telegram.chatId || '',
 });
 
 const toDraftState = (view: SettingsViewState): SettingsDraftState => ({
   ...EMPTY_DRAFTS,
-  openAIApiEndpoint: view.openAIApiEndpoint,
+  aiApiEndpoint: view.aiApiEndpoint,
+  aiModel: view.aiModel,
+  aiResponseLanguage: view.aiResponseLanguage,
   tgChatId: view.tgChatId,
 });
 
@@ -171,6 +198,39 @@ const getErrorMessage = (
     ? payload.error
     : fallback;
 
+const getDraftAiEndpoint = (drafts: SettingsDraftState) =>
+  normalizeAiEndpoint(drafts.aiApiEndpoint) || drafts.aiApiEndpoint.trim();
+
+const getSelectedAiModelOption = (aiModel: string, aiEndpoint: string) => {
+  const trimmedModel = aiModel.trim();
+
+  return getAiModelOptionsForEndpoint(aiEndpoint).some(
+    (option) => option.value === trimmedModel,
+  )
+    ? trimmedModel
+    : AI_CUSTOM_MODEL_VALUE;
+};
+
+const DRAWER_SELECT_STYLE = {
+  width: '100%',
+  height: '40px',
+  paddingLeft: '12px',
+  paddingRight: '48px',
+  borderWidth: '1px',
+  borderColor: 'rgba(255, 255, 255, 0.16)',
+  borderRadius: '0.375rem',
+  background: 'rgba(0, 0, 0, 0.32)',
+  appearance: 'none',
+  WebkitAppearance: 'none',
+  MozAppearance: 'none',
+  backgroundImage:
+    "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%23E5E7EB' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")",
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'right 16px center',
+  backgroundSize: '14px 9px',
+  color: 'rgb(229, 231, 235)',
+} as const;
+
 export const AccountSettingsDrawer = () => {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -246,10 +306,13 @@ export const AccountSettingsDrawer = () => {
         return Boolean(passwords.password || passwords.confirmPassword);
       }
 
-      if (section === 'openai') {
+      if (section === 'ai') {
+        const draftAiEndpoint = getDraftAiEndpoint(drafts);
         return (
-          Boolean(drafts.openAIApiKey.trim()) ||
-          drafts.openAIApiEndpoint !== settings.openAIApiEndpoint
+          Boolean(drafts.aiApiKey.trim()) ||
+          draftAiEndpoint !== settings.aiApiEndpoint ||
+          drafts.aiModel.trim() !== settings.aiModel ||
+          drafts.aiResponseLanguage !== settings.aiResponseLanguage
         );
       }
 
@@ -360,46 +423,41 @@ export const AccountSettingsDrawer = () => {
                 apiSecret: getSecretUpdateValue('bybitApiSecret'),
               },
             }
-          : section === 'token'
+          : section === 'coinalyze'
             ? {
                 section,
                 data: {
-                  token: getSecretUpdateValue('token'),
+                  apiKey: getSecretUpdateValue('coinalyzeApiKey'),
                 },
               }
-            : section === 'coinalyze'
+            : section === 'ai'
               ? {
                   section,
                   data: {
-                    apiKey: getSecretUpdateValue('coinalyzeApiKey'),
+                    apiKey: getSecretUpdateValue('aiApiKey'),
+                    apiEndpoint: drafts.aiApiEndpoint,
+                    model: drafts.aiModel.trim(),
+                    responseLanguage: drafts.aiResponseLanguage,
                   },
                 }
-              : section === 'openai'
+              : section === 'telegram'
                 ? {
                     section,
                     data: {
-                      apiKey: getSecretUpdateValue('openAIApiKey'),
-                      apiEndpoint: getSecretUpdateValue('openAIApiEndpoint'),
+                      botToken: getSecretUpdateValue('tgBotToken'),
+                      chatId:
+                        drafts.tgChatId !== settings.tgChatId
+                          ? drafts.tgChatId.trim()
+                          : undefined,
                     },
                   }
-                : section === 'telegram'
-                  ? {
-                      section,
-                      data: {
-                        botToken: getSecretUpdateValue('tgBotToken'),
-                        chatId:
-                          drafts.tgChatId !== settings.tgChatId
-                            ? drafts.tgChatId.trim()
-                            : undefined,
-                      },
-                    }
-                  : {
-                      section,
-                      data: {
-                        password: passwords.password,
-                        confirmPassword: passwords.confirmPassword,
-                      },
-                    };
+                : {
+                    section,
+                    data: {
+                      password: passwords.password,
+                      confirmPassword: passwords.confirmPassword,
+                    },
+                  };
 
       const response = await fetch('/api/user/settings', {
         method: 'PATCH',
@@ -441,6 +499,19 @@ export const AccountSettingsDrawer = () => {
     }
   };
 
+  const selectedAiEndpointOption = AI_ENDPOINT_OPTIONS.some(
+    (option) => option.value === drafts.aiApiEndpoint,
+  )
+    ? drafts.aiApiEndpoint
+    : AI_CUSTOM_ENDPOINT_VALUE;
+  const effectiveAiEndpoint = getDraftAiEndpoint(drafts);
+  const hasPresetAiModels = hasPresetAiModelsForEndpoint(effectiveAiEndpoint);
+  const aiModelOptions = getAiModelOptionsForEndpoint(effectiveAiEndpoint);
+  const selectedAiModelOption = getSelectedAiModelOption(
+    drafts.aiModel,
+    effectiveAiEndpoint,
+  );
+
   const renderEditableField = ({
     label,
     field,
@@ -553,14 +624,17 @@ export const AccountSettingsDrawer = () => {
                 </Flex>
               ) : (
                 <Stack gap={5}>
-                  <Box>
-                    <Text fontSize="sm" color="gray.400">
-                      Signed in as
-                    </Text>
-                    <Text fontSize="lg" fontWeight="600">
+                  <Text fontSize="sm" color="gray.400">
+                    Signed in as{' '}
+                    <Text
+                      as="span"
+                      fontSize="sm"
+                      fontWeight="600"
+                      color="gray.100"
+                    >
                       {settings.userName || 'Unknown user'}
                     </Text>
-                  </Box>
+                  </Text>
 
                   <Box
                     borderWidth="1px"
@@ -608,27 +682,124 @@ export const AccountSettingsDrawer = () => {
                   >
                     <Stack gap={4}>
                       <Box>
-                        <Text fontWeight="600">OpenAI / LLM</Text>
+                        <Text fontWeight="600">AI / LLM</Text>
                         <Text fontSize="sm" color="gray.400">
-                          Stored in the user profile and used for AI analysis.
+                          Stored in the user profile and used for AI analysis
+                          and user-facing AI replies.
                         </Text>
                       </Box>
+                      <Field.Root>
+                        <Field.Label>AI_API_ENDPOINT</Field.Label>
+                        <select
+                          value={selectedAiEndpointOption}
+                          onChange={(event) => {
+                            const nextValue = event.target.value;
+                            setDrafts((current) => ({
+                              ...current,
+                              aiApiEndpoint:
+                                nextValue === AI_CUSTOM_ENDPOINT_VALUE
+                                  ? ''
+                                  : nextValue,
+                              aiModel:
+                                nextValue === AI_CUSTOM_ENDPOINT_VALUE
+                                  ? ''
+                                  : normalizeAiModel('', nextValue),
+                            }));
+                          }}
+                          style={DRAWER_SELECT_STYLE}
+                        >
+                          {AI_ENDPOINT_OPTIONS.map((option) => (
+                            <option key={option.value} value={option.value}>
+                              {option.label}
+                            </option>
+                          ))}
+                        </select>
+                        <Text mt="2" fontSize="sm" color="gray.400">
+                          {effectiveAiEndpoint || 'Endpoint is not set yet.'}
+                        </Text>
+                      </Field.Root>
+                      {selectedAiEndpointOption === AI_CUSTOM_ENDPOINT_VALUE ? (
+                        <Field.Root>
+                          <Field.Label>Custom AI API endpoint URL</Field.Label>
+                          <Input
+                            value={drafts.aiApiEndpoint}
+                            placeholder="https://your-openai-compatible-endpoint/v1"
+                            onChange={(event) =>
+                              updateDraft('aiApiEndpoint', event.target.value)
+                            }
+                          />
+                        </Field.Root>
+                      ) : null}
                       {renderEditableField({
-                        label: 'OPENAI_API_ENDPOINT',
-                        field: 'openAIApiEndpoint',
-                        placeholder: 'Enter a new OpenAI API endpoint',
-                      })}
-                      {renderEditableField({
-                        label: 'OPENAI_API_KEY',
-                        field: 'openAIApiKey',
-                        placeholder: 'Enter a new OpenAI API key',
+                        label: 'AI_API_KEY',
+                        field: 'aiApiKey',
+                        placeholder: 'Enter a new AI API key',
                       })}
+                      {hasPresetAiModels ? (
+                        <Field.Root>
+                          <Field.Label>AI_MODEL</Field.Label>
+                          <select
+                            value={selectedAiModelOption}
+                            onChange={(event) => {
+                              const nextValue = event.target.value;
+                              if (nextValue === AI_CUSTOM_MODEL_VALUE) {
+                                updateDraft('aiModel', '');
+                                return;
+                              }
+
+                              updateDraft('aiModel', nextValue);
+                            }}
+                            style={DRAWER_SELECT_STYLE}
+                          >
+                            {aiModelOptions.map((option) => (
+                              <option key={option.value} value={option.value}>
+                                {option.label}
+                              </option>
+                            ))}
+                            <option value={AI_CUSTOM_MODEL_VALUE}>
+                              Custom model
+                            </option>
+                          </select>
+                        </Field.Root>
+                      ) : null}
+                      {!hasPresetAiModels ||
+                      selectedAiModelOption === AI_CUSTOM_MODEL_VALUE ? (
+                        <Field.Root>
+                          <Field.Label>Custom AI model name</Field.Label>
+                          <Input
+                            value={drafts.aiModel}
+                            placeholder="Enter an OpenAI-compatible model name"
+                            onChange={(event) =>
+                              updateDraft('aiModel', event.target.value)
+                            }
+                          />
+                        </Field.Root>
+                      ) : null}
+                      <Field.Root>
+                        <Field.Label>AI_RESPONSE_LANGUAGE</Field.Label>
+                        <select
+                          value={drafts.aiResponseLanguage}
+                          onChange={(event) =>
+                            updateDraft(
+                              'aiResponseLanguage',
+                              event.target.value,
+                            )
+                          }
+                          style={DRAWER_SELECT_STYLE}
+                        >
+                          {AI_RESPONSE_LANGUAGE_OPTIONS.map((option) => (
+                            <option key={option.value} value={option.value}>
+                              {option.label}
+                            </option>
+                          ))}
+                        </select>
+                      </Field.Root>
                       <Flex justify="flex-end">
                         <Button
                           colorPalette="teal"
-                          loading={savingSection === 'openai'}
-                          disabled={!isSectionDirty('openai')}
-                          onClick={() => saveSection('openai')}
+                          loading={savingSection === 'ai'}
+                          disabled={!isSectionDirty('ai')}
+                          onClick={() => saveSection('ai')}
                         >
                           Save
                         </Button>
@@ -766,38 +937,6 @@ export const AccountSettingsDrawer = () => {
                       </Flex>
                     </Stack>
                   </Box>
-
-                  <Box
-                    borderWidth="1px"
-                    borderColor="gray.700"
-                    borderRadius="lg"
-                    p={4}
-                    bg="gray.900"
-                  >
-                    <Stack gap={4}>
-                      <Box>
-                        <Text fontWeight="600">Passwordless auth token</Text>
-                        <Text fontSize="sm" color="gray.400">
-                          Token accepted in dashboard links for instant auth.
-                        </Text>
-                      </Box>
-                      {renderEditableField({
-                        label: 'TOKEN',
-                        field: 'token',
-                        placeholder: 'Enter a new passwordless token',
-                      })}
-                      <Flex justify="flex-end">
-                        <Button
-                          colorPalette="teal"
-                          loading={savingSection === 'token'}
-                          disabled={!isSectionDirty('token')}
-                          onClick={() => saveSection('token')}
-                        >
-                          Save
-                        </Button>
-                      </Flex>
-                    </Stack>
-                  </Box>
                 </Stack>
               )}
             </Drawer.Body>

package/src/app/components/UI/ColorMode/index.tsx

@@ -8,18 +8,9 @@ import {
   type IconButtonProps,
   type SpanProps,
 } from '@chakra-ui/react';
-import { ThemeProvider, useTheme, type ThemeProviderProps } from 'next-themes';
 import * as React from 'react';
 import { LuMoon, LuSun } from 'react-icons/lu';
 
-export interface ColorModeProviderProps extends ThemeProviderProps {}
-
-export function ColorModeProvider(props: ColorModeProviderProps) {
-  return (
-    <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
-  );
-}
-
 export type ColorMode = 'light' | 'dark';
 
 export interface UseColorModeReturn {
@@ -28,16 +19,72 @@ export interface UseColorModeReturn {
   toggleColorMode: () => void;
 }
 
-export function useColorMode(): UseColorModeReturn {
-  const { resolvedTheme, setTheme } = useTheme();
+export interface ColorModeProviderProps {
+  children: React.ReactNode;
+  forcedTheme?: ColorMode;
+}
+
+const ColorModeContext = React.createContext<UseColorModeReturn | null>(null);
+
+export function ColorModeProvider({
+  children,
+  forcedTheme,
+}: ColorModeProviderProps) {
+  const [colorMode, setColorModeState] = React.useState<ColorMode>(
+    forcedTheme ?? 'dark',
+  );
+
+  React.useEffect(() => {
+    if (!forcedTheme) {
+      return;
+    }
+
+    setColorModeState(forcedTheme);
+  }, [forcedTheme]);
+
+  React.useEffect(() => {
+    const root = document.documentElement;
+    const nextColorMode = forcedTheme ?? colorMode;
+    const previousColorMode = nextColorMode === 'dark' ? 'light' : 'dark';
+
+    root.classList.remove(previousColorMode);
+    root.classList.add(nextColorMode);
+    root.style.colorScheme = nextColorMode;
+  }, [colorMode, forcedTheme]);
+
+  const setColorMode = (nextColorMode: ColorMode) => {
+    if (forcedTheme) {
+      return;
+    }
+
+    setColorModeState(nextColorMode);
+  };
+
   const toggleColorMode = () => {
-    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+    setColorMode(colorMode === 'dark' ? 'light' : 'dark');
   };
-  return {
-    colorMode: resolvedTheme as ColorMode,
-    setColorMode: setTheme,
+
+  const value: UseColorModeReturn = {
+    colorMode: forcedTheme ?? colorMode,
+    setColorMode,
     toggleColorMode,
   };
+
+  return (
+    <ColorModeContext.Provider value={value}>
+      {children}
+    </ColorModeContext.Provider>
+  );
+}
+
+export function useColorMode(): UseColorModeReturn {
+  return (
+    React.useContext(ColorModeContext) ?? {
+      colorMode: 'dark',
+      setColorMode: () => {},
+      toggleColorMode: () => {},
+    }
+  );
 }
 
 export function useColorModeValue<T>(light: T, dark: T) {

package/src/app/components/UI/Select/index.tsx

@@ -19,6 +19,7 @@ interface SelectProps {
   multiple?: boolean;
   size?: 'xs' | 'sm' | 'md' | 'lg';
   onChange?: (value: string[]) => void;
+  onOpenChange?: (open: boolean) => void;
 }
 
 export const Select = ({
@@ -30,6 +31,7 @@ export const Select = ({
   width = '320px',
   size = 'sm',
   onChange,
+  onOpenChange,
 }: SelectProps) => {
   const collection = useMemo(
     () =>
@@ -44,6 +46,7 @@ export const Select = ({
       collection={collection}
       {...(value ? { value } : { defaultValue })}
       onValueChange={(details) => onChange?.(details.value)}
+      onOpenChange={(details) => onOpenChange?.(details.open)}
       size={size}
       multiple={multiple}
       width={width}

package/src/app/components/UI/SelectWithSearch/index.tsx

@@ -23,6 +23,7 @@ interface SelectWithSearchProps {
   multiple?: boolean;
   size?: 'xs' | 'sm' | 'md' | 'lg';
   onChange?: (value: string[]) => void;
+  onOpenChange?: (open: boolean) => void;
 }
 
 export const SelectWithSearch = ({
@@ -35,6 +36,7 @@ export const SelectWithSearch = ({
   width = '320px',
   size = 'sm',
   onChange,
+  onOpenChange,
 }: SelectWithSearchProps) => {
   const { contains } = useFilter({ sensitivity: 'base' });
   const [inputValue, setInputValue] = useState(
@@ -61,6 +63,7 @@ export const SelectWithSearch = ({
         setInputValue(e.inputValue);
       }}
       onOpenChange={(details) => {
+        onOpenChange?.(details.open);
         if (details.open) {
           filter('');
           setInputValue('');