@qlover/create-app 0.7.15 → 0.9.0

package/dist/templates/react-app/src/uikit/components/MessageBaseList.tsx

@@ -0,0 +1,240 @@
+import { useFactory, useStore } from '@brain-toolkit/react-kit';
+import { messageBaseListI18n } from '@config/i18n/messageBaseListI18n';
+import { I } from '@config/IOCIdentifier';
+import {
+  MessageSender,
+  MessagesStore,
+  MessageStatus,
+  SenderStrategyPlugin,
+  SendFailureStrategy,
+  ThreadUtil
+} from '@qlover/corekit-bridge';
+import { Button, Input } from 'antd';
+import { random } from 'lodash';
+import { useCallback, useMemo, useState } from 'react';
+import { useI18nInterface } from '../hooks/useI18nInterface';
+import { useIOC } from '../hooks/useIOC';
+import type {
+  MessageGetwayInterface,
+  MessagesStateInterface,
+  MessageStoreMsg
+} from '@qlover/corekit-bridge';
+
+interface MessageBaseMsg extends MessageStoreMsg<string, unknown> {}
+
+function createMessagesState(): MessagesStateInterface<MessageBaseMsg> {
+  return {
+    messages: []
+  };
+}
+
+class MessageBaseApi implements MessageGetwayInterface {
+  async sendMessage<M extends MessageStoreMsg<string>>(
+    message: M
+  ): Promise<unknown> {
+    const times = random(200, 1000);
+
+    await ThreadUtil.sleep(times);
+
+    const messageContent = message.content ?? '';
+    if (messageContent.includes('Failed') || messageContent.includes('error')) {
+      throw new Error('Failed to send message');
+    }
+
+    if (times % 5 === 0) {
+      throw new Error(`Network error(${times})`);
+    }
+
+    // Return object response to demonstrate formatting
+    return {
+      status: 'success',
+      timestamp: new Date().toISOString(),
+      delay: `${times}ms`,
+      echo: message.content,
+      data: {
+        message: 'Message received successfully',
+        processed: true,
+        metadata: {
+          length: message.content?.length || 0,
+          type: 'text'
+        }
+      }
+    };
+  }
+}
+
+export function MessageBaseList() {
+  const [inputValue, setInputValue] = useState('');
+  const logger = useIOC(I.Logger);
+  const tt = useI18nInterface(messageBaseListI18n);
+  const messagesStore = useFactory(
+    MessagesStore<MessageBaseMsg>,
+    createMessagesState
+  );
+  const messageBaseApi = useFactory(MessageBaseApi);
+
+  const [messagesSender] = useState(() =>
+    new MessageSender<MessageBaseMsg>(messagesStore, {
+      gateway: messageBaseApi,
+      logger
+    }).use(new SenderStrategyPlugin(SendFailureStrategy.KEEP_FAILED))
+  );
+
+  const messages = useStore(messagesStore, (state) => state.messages);
+
+  const loadingMessage = useMemo(() => {
+    return messages.find((message) => message.loading);
+  }, [messages]);
+
+  const onSend = useCallback(() => {
+    messagesSender.send({
+      content: inputValue
+    });
+    setInputValue('');
+  }, [inputValue, messagesSender]);
+
+  /**
+   * Render message result with proper formatting
+   * - For objects/arrays: display as formatted JSON
+   * - For strings: display as plain text
+   */
+  const renderResult = (result: unknown) => {
+    if (!result) return null;
+
+    // Check if result is an object or array
+    if (typeof result === 'object') {
+      try {
+        const jsonString = JSON.stringify(result, null, 2);
+        return (
+          <pre
+            data-testid="MessageResultJson"
+            className="text-xs font-mono bg-green-100 p-2 rounded mt-1 overflow-x-auto whitespace-pre-wrap"
+          >
+            {jsonString}
+          </pre>
+        );
+      } catch {
+        return String(result);
+      }
+    }
+
+    // For strings and other primitives
+    return <span data-testid="MessageResultText">{String(result)}</span>;
+  };
+
+  return (
+    <div data-testid="MessageBaseList" className="max-w-4xl mx-auto">
+      {/* Page Title */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-text mb-2">{tt.title}</h1>
+        <p className="text-sm text-text-secondary">{tt.description}</p>
+      </div>
+
+      {/* Messages Container */}
+      <div className="bg-secondary rounded-lg shadow-sm border border-primary mb-4">
+        <div
+          data-testid="MessageBaseListItems"
+          className="flex flex-col gap-3 p-4 max-h-96 min-h-64 overflow-y-auto"
+        >
+          {messages.length === 0 ? (
+            <div className="flex items-center justify-center h-full text-text-secondary">
+              <div className="text-center">
+                <p className="text-base mb-1">{tt.noMessages}</p>
+                <p className="text-sm">{tt.getStarted}</p>
+              </div>
+            </div>
+          ) : (
+            messages.map((message) => (
+              <div
+                key={message.id}
+                data-testid="MessageBaseListItem"
+                className="space-y-2"
+              >
+                {/* User Message */}
+                <div className="flex justify-end">
+                  <div className="max-w-[70%] bg-blue-500 text-white rounded-lg px-4 py-2 shadow-sm">
+                    <div className="text-sm font-medium mb-1">{tt.user}</div>
+                    <div className="wrap-break-word">{message.content}</div>
+                  </div>
+                </div>
+
+                {/* Gateway Response */}
+                <div className="flex justify-start">
+                  <div className="max-w-[70%]">
+                    {message.loading ? (
+                      <div className="bg-base rounded-lg px-4 py-2 shadow-sm border border-primary">
+                        <div className="text-sm font-medium text-text-secondary mb-1">
+                          {tt.gateway}
+                        </div>
+                        <div className="flex items-center gap-2 text-text-secondary">
+                          <div className="flex gap-1">
+                            <span
+                              className="animate-bounce inline-block w-1.5 h-1.5 bg-text-secondary rounded-full"
+                              style={{ animationDelay: '0ms' }}
+                            ></span>
+                            <span
+                              className="animate-bounce inline-block w-1.5 h-1.5 bg-text-secondary rounded-full"
+                              style={{ animationDelay: '150ms' }}
+                            ></span>
+                            <span
+                              className="animate-bounce inline-block w-1.5 h-1.5 bg-text-secondary rounded-full"
+                              style={{ animationDelay: '300ms' }}
+                            ></span>
+                          </div>
+                          <span className="text-sm">{tt.processing}</span>
+                        </div>
+                      </div>
+                    ) : message.status === MessageStatus.FAILED ? (
+                      <div className="bg-red-50 border border-red-200 rounded-lg px-4 py-2 shadow-sm">
+                        <div className="text-sm font-medium text-red-800 mb-1">
+                          {tt.gatewayFailed}
+                        </div>
+                        <div className="text-red-600 text-sm">
+                          ❌ {(message as any).error?.message || tt.sendFailed}
+                        </div>
+                      </div>
+                    ) : message.result ? (
+                      <div className="bg-green-50 border border-green-200 rounded-lg px-4 py-2 shadow-sm">
+                        <div className="text-sm font-medium text-green-800 mb-1">
+                          ✓ {tt.gatewayResponse}
+                        </div>
+                        <div className="text-green-900">
+                          {renderResult(message.result)}
+                        </div>
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Input Area */}
+      <div className="bg-secondary rounded-lg shadow-sm border border-primary p-4">
+        <div className="flex gap-2">
+          <Input
+            value={inputValue}
+            onPressEnter={onSend}
+            onChange={(e) => setInputValue(e.target.value)}
+            placeholder={tt.inputPlaceholder}
+            size="large"
+            className="flex-1"
+            disabled={loadingMessage?.loading}
+          />
+          <Button
+            disabled={!inputValue || loadingMessage?.loading}
+            loading={loadingMessage?.loading}
+            type="primary"
+            size="large"
+            onClick={onSend}
+          >
+            {tt.sendButton}
+          </Button>
+        </div>
+        <div className="mt-2 text-xs text-text-secondary">{tt.errorTip}</div>
+      </div>
+    </div>
+  );
+}

package/dist/templates/react-app/src/uikit/components/ProcessExecutorProvider.tsx

@@ -1,16 +1,16 @@
+import { IOCIdentifier } from '@config/IOCIdentifier';
 import { UserAuthProvider } from './UserAuthProvider';
-import { useStrictEffect } from '../hooks/useStrictEffect';
-import { IOC } from '@/core/IOC';
 import { useI18nGuard } from '../hooks/useI18nGuard';
-import { IOCIdentifier } from '@config/IOCIdentifier';
+import { useIOC } from '../hooks/useIOC';
 import { useNavigateBridge } from '../hooks/useNavigateBridge';
+import { useStrictEffect } from '../hooks/useStrictEffect';
 
 export function ProcessExecutorProvider({
   children
 }: {
   children: React.ReactNode;
 }) {
-  const processerExecutor = IOC(IOCIdentifier.ProcesserExecutorInterface);
+  const processerExecutor = useIOC(IOCIdentifier.ProcesserExecutorInterface);
 
   useI18nGuard();
 
@@ -20,5 +20,9 @@ export function ProcessExecutorProvider({
     processerExecutor.starup();
   }, []);
 
-  return <UserAuthProvider>{children}</UserAuthProvider>;
+  return (
+    <UserAuthProvider data-testid="ProcessExecutorProvider">
+      {children}
+    </UserAuthProvider>
+  );
 }

package/dist/templates/react-app/src/uikit/components/RouterRenderComponent.tsx

@@ -1,13 +1,16 @@
 import { Suspense } from 'react';
+import type { RouterLoaderRender } from '@/base/cases/RouterLoader';
+import { BaseRouteProvider } from '@/uikit/components/BaseRouteProvider';
 import { Loading } from './Loading';
-import BaseRouteProvider from '@/uikit/components/BaseRouteProvider';
-import { RouterLoaderRender } from '@/base/cases/RouterLoader';
 
 export const RouterRenderComponent: RouterLoaderRender = (route) => {
   const Component = route.element();
 
   return (
-    <Suspense fallback={<Loading fullscreen />}>
+    <Suspense
+      data-testid="RouterRenderComponent"
+      fallback={<Loading fullscreen />}
+    >
       <BaseRouteProvider {...route.meta}>
         <Component />
       </BaseRouteProvider>

package/dist/templates/react-app/src/uikit/components/ThemeSwitcher.tsx

@@ -1,80 +1,137 @@
-import { IOC } from '@/core/IOC';
-import { useStore } from '@/uikit/hooks/useStore';
-import { useTranslation } from 'react-i18next';
-import { Select } from 'antd';
 import {
-  BulbOutlined,
-  BulbFilled,
   HeartFilled,
-  HeartOutlined
+  SettingOutlined,
+  MoonOutlined,
+  SettingFilled,
+  MoonFilled,
+  HeartOutlined,
+  SunOutlined,
+  SunFilled
 } from '@ant-design/icons';
-import clsx from 'clsx';
-import { useMemo } from 'react';
-import * as i18nKeys from '@config/Identifier/common';
+import { useStore } from '@brain-toolkit/react-kit/hooks/useStore';
+import * as i18nKeys from '@config/Identifier/common/common';
 import { IOCIdentifier } from '@config/IOCIdentifier';
+import { themeConfig, type SupportedTheme } from '@config/theme';
+import { Dropdown } from 'antd';
+import { clsx } from 'clsx';
+import { useMemo } from 'react';
+import { useAppTranslation } from '../hooks/useAppTranslation';
+import { useIOC } from '../hooks/useIOC';
+import type { ItemType } from 'antd/es/menu/interface';
 
 const colorMap: Record<
   string,
-  { i18nkey: string; colors: string[]; icons: React.ElementType[] }
+  {
+    i18nkey: string;
+    selectedColor: string;
+    normalColor: string;
+    Icon: React.ElementType;
+    SelectedIcon: React.ElementType;
+    TriggerIcon: React.ElementType;
+  }
 > = {
-  default: {
+  system: {
+    i18nkey: 'System',
+    selectedColor: 'text-text',
+    normalColor: 'text-text-secondary',
+    Icon: SettingOutlined,
+    SelectedIcon: SettingFilled,
+    TriggerIcon: SettingOutlined
+  },
+  light: {
     i18nkey: i18nKeys.HEADER_THEME_DEFAULT,
-    colors: ['text-text', 'text-text-secondary'],
-    icons: [BulbFilled, BulbOutlined]
+    selectedColor: 'text-text',
+    normalColor: 'text-text-secondary',
+    Icon: SunOutlined,
+    SelectedIcon: SunFilled,
+    TriggerIcon: SunOutlined
   },
   dark: {
     i18nkey: i18nKeys.HEADER_THEME_DARK,
-    colors: ['text-[#9333ea]', 'text-[#a855f7]'],
-    icons: [BulbFilled, BulbOutlined]
+    selectedColor: 'text-[#9333ea]',
+    normalColor: 'text-[#a855f7]',
+    Icon: MoonOutlined,
+    SelectedIcon: MoonFilled,
+    TriggerIcon: MoonOutlined
   },
   pink: {
     i18nkey: i18nKeys.HEADER_THEME_PINK,
-    colors: ['text-[#f472b6]', 'text-[#ec4899]'],
-    icons: [HeartFilled, HeartOutlined]
+    selectedColor: 'text-[#f472b6]',
+    normalColor: 'text-[#ec4899]',
+    Icon: HeartOutlined,
+    SelectedIcon: HeartFilled,
+    TriggerIcon: HeartOutlined
   }
 };
 
-export default function ThemeSwitcher() {
-  const themeService = IOC(IOCIdentifier.ThemeService);
+const themesList = ['system', ...themeConfig.supportedThemes];
+
+export function ThemeSwitcher() {
+  const themeService = useIOC(IOCIdentifier.ThemeService);
   const { theme } = useStore(themeService);
   const themes = themeService.getSupportedThemes();
-  const { t } = useTranslation('common');
+  const { t } = useAppTranslation('common');
 
   const themeOptions = useMemo(() => {
-    return themes.map((themeName) => {
-      const { i18nkey, colors, icons } =
-        colorMap[themeName] || colorMap.default;
-      const [currentColor, normalColor] = colors;
-      const [CurrentIcon, NormalIcon] = icons;
-      const isSelf = theme === themeName;
+    return themesList.map((themeName) => {
+      const { i18nkey, selectedColor, normalColor, Icon, SelectedIcon } =
+        colorMap[themeName] || colorMap.light;
+
+      const isCurrentTheme =
+        theme === themeName || (themeName === theme && theme === 'system');
 
       return {
-        key: themeName + i18nkey,
+        key: themeName,
         value: themeName,
         label: (
           <div
+            data-testid={`ThemeSwitcherOption-${themeName}`}
             className={clsx(
               'flex items-center gap-2',
-              isSelf ? currentColor : normalColor
+              isCurrentTheme ? selectedColor : normalColor
             )}
           >
-            {isSelf ? <CurrentIcon /> : <NormalIcon />}
+            {isCurrentTheme ? <SelectedIcon /> : <Icon />}
             <span>{t(i18nkey)}</span>
           </div>
         )
-      };
+      } as ItemType;
     });
   }, [theme, themes, t]);
 
+  // const nextTheme = useMemo(() => {
+  //   if (!theme) {
+  //     return themeConfig.defaultTheme;
+  //   }
+  //   const targetIndex = themes.indexOf(theme as SupportedTheme) + 1;
+  //   return themes[targetIndex % themes.length];
+  // }, [theme]);
+
+  const TriggerIcon = colorMap[theme || themeConfig.defaultTheme].TriggerIcon;
+
   return (
-    <div className="flex items-center gap-2">
-      <Select
-        value={theme}
-        onChange={(value) => themeService.changeTheme(value)}
-        options={themeOptions}
-        style={{ width: 120 }}
-        className="min-w-40 max-w-full"
-      />
-    </div>
+    <Dropdown
+      data-testid="ThemeSwitcherDropdown"
+      trigger={['hover']}
+      placement="bottom"
+      menu={{
+        // @ts-ignore
+        'data-testid': 'ThemeSwitcherSelect',
+        items: themeOptions,
+        selectedKeys: [theme],
+        onClick: ({ key }) => {
+          themeService.changeTheme(key as SupportedTheme);
+        }
+      }}
+    >
+      <span
+        data-testid="ThemeSwitcher"
+        data-testvalue={theme}
+        className="text-text hover:text-text-hover cursor-pointer text-lg transition-colors"
+        // onClick={() => setTheme(nextTheme)}
+      >
+        <TriggerIcon />
+      </span>
+    </Dropdown>
   );
 }

package/dist/templates/react-app/src/uikit/components/UserAuthProvider.tsx

@@ -1,15 +1,15 @@
-import { IOC } from '@/core/IOC';
-import { Loading } from './Loading';
-import { useStore } from '../hooks/useStore';
+import { useStore } from '@brain-toolkit/react-kit/hooks/useStore';
 import { IOCIdentifier } from '@config/IOCIdentifier';
+import { Loading } from './Loading';
+import { useIOC } from '../hooks/useIOC';
 
 export function UserAuthProvider({ children }: { children: React.ReactNode }) {
-  const userService = IOC(IOCIdentifier.UserServiceInterface);
+  const userService = useIOC(IOCIdentifier.UserServiceInterface);
 
   useStore(userService.store);
 
   if (!userService.isAuthenticated()) {
-    return <Loading fullscreen />;
+    return <Loading data-testid="UserAuthProvider" fullscreen />;
   }
 
   return children;

package/dist/templates/react-app/src/uikit/components/With.tsx

@@ -0,0 +1,17 @@
+export function With<T>(props: {
+  fallback?: React.ReactNode;
+  it: T;
+  children: React.ReactNode | ((it: NonNullable<T>) => React.ReactNode);
+}) {
+  const { fallback, it, children } = props;
+
+  if (it != null && it !== false) {
+    if (typeof children === 'function') {
+      return children(it as NonNullable<T>);
+    }
+
+    return children;
+  }
+
+  return fallback ?? null;
+}

package/dist/templates/react-app/src/uikit/components/chatMessage/ChatMessageBridge.ts

@@ -0,0 +1,176 @@
+import {
+  MessageSender,
+  ChatMessageRole,
+  MessageStatus
+} from '@qlover/corekit-bridge';
+import type {
+  ChatMessage,
+  ChatMessageStore,
+  ChatMessageBridgeInterface,
+  ChatMessageBridgePlugin,
+  DisabledSendParams,
+  MessageSenderConfig,
+  GatewayOptions
+} from '@qlover/corekit-bridge';
+import type { TextAreaRef } from 'antd/es/input/TextArea';
+
+export class ChatMessageBridge<T = string>
+  implements ChatMessageBridgeInterface<T>
+{
+  protected ref: TextAreaRef | null = null;
+  protected readonly messageSender: MessageSender<ChatMessage<T>>;
+
+  constructor(
+    protected readonly messages: ChatMessageStore<T>,
+    config?: MessageSenderConfig
+  ) {
+    this.messageSender = new MessageSender(messages, config);
+  }
+
+  use(plugin: ChatMessageBridgePlugin<T> | ChatMessageBridgePlugin<T>[]): this {
+    if (Array.isArray(plugin)) {
+      plugin.forEach((p) => this.messageSender.use(p));
+    } else {
+      this.messageSender.use(plugin);
+    }
+
+    return this;
+  }
+
+  getMessageStore(): ChatMessageStore<T> {
+    return this.messages;
+  }
+
+  /**
+   * Disable rules
+   * 1. If streaming, don't allow sending
+   * 2. If sending, don't allow sending
+   */
+  getDisabledSend(params?: DisabledSendParams<T>): boolean {
+    const disabledSend =
+      params?.disabledSend || this.messages.state.disabledSend;
+
+    if (disabledSend || this.messages.state.streaming) {
+      return true;
+    }
+
+    const sendingMessage = this.getSendingMessage();
+    if (sendingMessage) {
+      return true;
+    }
+
+    return false;
+  }
+
+  onChangeContent(content: T): void {
+    const firstDraft = this.getFirstDraftMessage();
+
+    // If draft message exists, update its content
+    if (firstDraft && firstDraft.id) {
+      this.messages.updateDraftMessage(firstDraft.id, {
+        content
+      });
+    } else {
+      // If no draft message, create a new one
+      this.messages.addDraftMessage({
+        content,
+        role: ChatMessageRole.USER
+      });
+    }
+  }
+
+  getFirstDraftMessage(): ChatMessage<T> | null {
+    return this.messages.getFirstDraftMessage();
+  }
+
+  setRef(ref: unknown): void {
+    this.ref = ref as TextAreaRef;
+  }
+
+  focus(): void {
+    requestAnimationFrame(() => {
+      this.ref?.focus();
+    });
+  }
+
+  sendMessage(
+    messages: ChatMessage<T>,
+    gatewayOptions?: GatewayOptions<ChatMessage<T>>
+  ): Promise<ChatMessage<T>> {
+    if (this.messages.state.disabledSend) {
+      throw new Error('Send is disabled');
+    }
+
+    return this.messageSender.send(messages, gatewayOptions);
+  }
+
+  /**
+   * Send message
+   *
+   * - If passing an object that doesn't exist, sending is not allowed; only draft messages and resending history messages are allowed
+   * - If streaming, sending is not allowed
+   * - If loading, sending is not allowed
+   * - If no message to send, sending is not allowed
+   *
+   * @param message - Message object
+   * @param gatewayOptions - Gateway options
+   */
+  send(
+    message?: ChatMessage<T>,
+    gatewayOptions?: GatewayOptions<ChatMessage<T>>
+  ): Promise<ChatMessage<T>> {
+    const disabledSend = this.getDisabledSend();
+
+    if (disabledSend) {
+      throw new Error('Send is not allowed');
+    }
+
+    // 3. If no message to send, sending is not allowed
+    const targetMessage = this.messages.getReadySendMessage(message);
+
+    if (!targetMessage) {
+      throw new Error('No message to send');
+    }
+
+    // 4. If loading, sending is not allowed
+    if (targetMessage.loading) {
+      return Promise.resolve(targetMessage);
+    }
+
+    return this.sendMessage(targetMessage, gatewayOptions);
+  }
+
+  getSendingMessage(messages?: ChatMessage<T>[]): ChatMessage<T> | null {
+    messages = messages || this.messages.getMessages();
+
+    return (
+      messages.find(
+        (msg) =>
+          msg.status === MessageStatus.SENDING &&
+          msg.role === ChatMessageRole.USER
+      ) || null
+    );
+  }
+
+  stop(messageId?: string): boolean {
+    if (!messageId) {
+      const sendingMessage = this.getSendingMessage();
+      if (sendingMessage) {
+        messageId = sendingMessage.id;
+      }
+    }
+
+    if (!messageId) {
+      return false;
+    }
+
+    return this.messageSender.stop(messageId);
+  }
+
+  /**
+   * Stop all sending messages
+   */
+  stopAll(): void {
+    this.messageSender.stopAll();
+  }
+}