@qlover/create-app 1.1.0 → 2.0.2

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

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

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

@@ -1,137 +0,0 @@
-import {
-  HeartFilled,
-  SettingOutlined,
-  MoonOutlined,
-  SettingFilled,
-  MoonFilled,
-  HeartOutlined,
-  SunOutlined,
-  SunFilled
-} from '@ant-design/icons';
-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;
-    selectedColor: string;
-    normalColor: string;
-    Icon: React.ElementType;
-    SelectedIcon: React.ElementType;
-    TriggerIcon: React.ElementType;
-  }
-> = {
-  system: {
-    i18nkey: 'System',
-    selectedColor: 'text-text',
-    normalColor: 'text-text-secondary',
-    Icon: SettingOutlined,
-    SelectedIcon: SettingFilled,
-    TriggerIcon: SettingOutlined
-  },
-  light: {
-    i18nkey: i18nKeys.HEADER_THEME_DEFAULT,
-    selectedColor: 'text-text',
-    normalColor: 'text-text-secondary',
-    Icon: SunOutlined,
-    SelectedIcon: SunFilled,
-    TriggerIcon: SunOutlined
-  },
-  dark: {
-    i18nkey: i18nKeys.HEADER_THEME_DARK,
-    selectedColor: 'text-[#9333ea]',
-    normalColor: 'text-[#a855f7]',
-    Icon: MoonOutlined,
-    SelectedIcon: MoonFilled,
-    TriggerIcon: MoonOutlined
-  },
-  pink: {
-    i18nkey: i18nKeys.HEADER_THEME_PINK,
-    selectedColor: 'text-[#f472b6]',
-    normalColor: 'text-[#ec4899]',
-    Icon: HeartOutlined,
-    SelectedIcon: HeartFilled,
-    TriggerIcon: HeartOutlined
-  }
-};
-
-const themesList = ['system', ...themeConfig.supportedThemes];
-
-export function ThemeSwitcher() {
-  const themeService = useIOC(IOCIdentifier.ThemeService);
-  const { theme } = useStore(themeService);
-  const themes = themeService.getSupportedThemes();
-  const { t } = useAppTranslation('common');
-
-  const themeOptions = useMemo(() => {
-    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,
-        value: themeName,
-        label: (
-          <div
-            data-testid={`ThemeSwitcherOption-${themeName}`}
-            className={clsx(
-              'flex items-center gap-2',
-              isCurrentTheme ? selectedColor : normalColor
-            )}
-          >
-            {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 (
-    <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/With.tsx

@@ -1,17 +0,0 @@
-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

@@ -1,205 +0,0 @@
-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<ChatMessage<T>>
-  ) {
-    this.messageSender = new MessageSender(messages, config);
-  }
-
-  /**
-   * @override
-   */
-  public 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;
-  }
-
-  /**
-   * @override
-   */
-  public getMessageStore(): ChatMessageStore<T> {
-    return this.messages;
-  }
-
-  /**
-   * Disable rules
-   * 1. If streaming, don't allow sending
-   * 2. If sending, don't allow sending
-
-   * @override
-      */
-  public 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;
-  }
-
-  /**
-   * @override
-   */
-  public 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
-      });
-    }
-  }
-
-  /**
-   * @override
-   */
-  public getFirstDraftMessage(): ChatMessage<T> | null {
-    return this.messages.getFirstDraftMessage();
-  }
-
-  /**
-   * @override
-   */
-  public setRef(ref: unknown): void {
-    this.ref = ref as TextAreaRef;
-  }
-
-  /**
-   * @override
-   */
-  public focus(): void {
-    requestAnimationFrame(() => {
-      this.ref?.focus();
-    });
-  }
-
-  public 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
-   *
-   * @override
-   * @param message - Message object
-   * @param gatewayOptions - Gateway options
-   */
-  public 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);
-  }
-
-  /**
-   * @override
-   */
-  public 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
-    );
-  }
-
-  /**
-   * @override
-   */
-  public 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
-   */
-  public stopAll(): void {
-    this.messageSender.stopAll();
-  }
-}

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

@@ -1,21 +0,0 @@
-import type { ChatMessageI18nInterface } from '@config/i18n/chatMessageI18n';
-import { FocusBar } from './FocusBar';
-import { MessagesList } from './MessagesList';
-import type { ChatMessageBridge } from './ChatMessageBridge';
-
-export interface ChatRootProps {
-  bridge: ChatMessageBridge<string>;
-  tt: ChatMessageI18nInterface;
-}
-
-export function ChatRoot({ bridge, tt }: ChatRootProps) {
-  return (
-    <div
-      data-testid="ChatRoot"
-      className="flex flex-col h-full max-w-5xl mx-auto bg-primary rounded-lg shadow-lg overflow-hidden"
-    >
-      <MessagesList bridge={bridge} tt={tt} />
-      <FocusBar bridge={bridge} tt={tt} />
-    </div>
-  );
-}

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

@@ -1,108 +0,0 @@
-import { SendOutlined, StopOutlined } from '@ant-design/icons';
-import { useStore } from '@brain-toolkit/react-kit';
-import { Button, Input } from 'antd';
-import { useCallback, useMemo } from 'react';
-import type { ChatMessageI18nInterface } from '@config/i18n/chatMessageI18n';
-import type { ChatMessageBridgeInterface } from '@qlover/corekit-bridge';
-
-const { TextArea } = Input;
-
-export interface FocusBarProps {
-  bridge: ChatMessageBridgeInterface<string>;
-  tt: ChatMessageI18nInterface;
-}
-
-export function FocusBar({ bridge, tt }: FocusBarProps) {
-  const messagesStore = bridge.getMessageStore();
-
-  const {
-    messages: historyMessages,
-    draftMessages,
-    disabledSend,
-    streaming
-  } = useStore(messagesStore);
-
-  const firstDraft = useMemo(
-    () => bridge.getFirstDraftMessage(draftMessages),
-    [bridge, draftMessages]
-  );
-
-  const sendingMessage = useMemo(
-    () => bridge.getSendingMessage(historyMessages),
-    [bridge, historyMessages]
-  );
-
-  const disabledSendButton = useMemo(
-    () => bridge.getDisabledSend({ firstDraft, sendingMessage, disabledSend }),
-    [bridge, firstDraft, sendingMessage, disabledSend]
-  );
-
-  const inputText = firstDraft?.content ?? '';
-  const loading = sendingMessage?.loading || firstDraft?.loading;
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      // Ctrl+Enter to send
-      if (e.key === 'Enter' && e.ctrlKey) {
-        e.preventDefault();
-        if (!disabledSendButton) {
-          bridge.send();
-        }
-      }
-    },
-    [bridge, disabledSendButton]
-  );
-
-  const handleSend = useCallback(() => {
-    if (!disabledSendButton) {
-      bridge.send();
-      return;
-    }
-    bridge.stop();
-  }, [bridge, disabledSendButton]);
-
-  const buttonText = streaming ? tt.stop : loading ? tt.loading : tt.send;
-
-  const buttonIcon = streaming ? (
-    <StopOutlined />
-  ) : loading ? null : (
-    <SendOutlined />
-  );
-
-  return (
-    <div
-      data-testid="FocusBar"
-      className="border-t border-primary p-4 bg-secondary"
-    >
-      <div data-testid="FocusBarMain" className="mb-2">
-        <TextArea
-          ref={bridge.setRef.bind(bridge)}
-          autoFocus
-          value={inputText}
-          onKeyDown={handleKeyDown}
-          onChange={(e) =>
-            bridge.onChangeContent((e.target as HTMLTextAreaElement).value)
-          }
-          placeholder={tt.inputPlaceholder}
-          autoSize={{ minRows: 2, maxRows: 6 }}
-          className="resize-none"
-          disabled={loading && !streaming}
-        />
-      </div>
-
-      <div data-testid="FocusBarFooter" className="flex justify-end gap-2">
-        <Button
-          type="primary"
-          icon={buttonIcon}
-          loading={loading && !streaming}
-          danger={streaming}
-          data-testid="FocusBar-Button-Send"
-          onClick={handleSend}
-          disabled={!inputText.trim() && !streaming}
-        >
-          {buttonText}
-        </Button>
-      </div>
-    </div>
-  );
-}