@qlover/create-app 0.8.0 → 0.10.0

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();
+  }
+}

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

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

@@ -0,0 +1,106 @@
+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.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>
+  );
+}

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

@@ -0,0 +1,271 @@
+import {
+  ThreadUtil,
+  MessageStatus,
+  ChatMessageRole
+} from '@qlover/corekit-bridge';
+import { random } from 'lodash';
+import type {
+  MessageStoreMsg,
+  ChatMessageStore,
+  MessageGetwayInterface,
+  GatewayOptions
+} from '@qlover/corekit-bridge';
+
+export class MessageApi implements MessageGetwayInterface {
+  constructor(protected messagesStore: ChatMessageStore<unknown>) {
+    this.messagesStore = messagesStore;
+  }
+
+  /**
+   * Send message (supports both normal and streaming modes)
+   * - If options.stream === true, use streaming mode (progressive output)
+   * - If options provided but stream !== true, use interruptible normal mode
+   * - If no options, use fast normal mode (non-interruptible)
+   */
+  async sendMessage<M extends MessageStoreMsg<string>>(
+    message: M,
+    options?: GatewayOptions<M>
+  ): Promise<M> {
+    const messageContent = message.content ?? '';
+
+    // Check if error simulation is needed
+    if (messageContent.includes('Failed') || messageContent.includes('error')) {
+      const error = new Error('Failed to send message');
+      await options?.onError?.(error);
+      throw error;
+    }
+
+    // Determine which mode to use
+    if (options?.stream === true) {
+      // Streaming mode: progressive output
+      return this.sendStreamMode(message, options);
+    } else if (options) {
+      // Interruptible normal mode: one-time return, but supports stop
+      return this.sendInterruptibleMode(message, options);
+    } else {
+      // Fast normal mode: non-interruptible
+      return this.sendNormalMode(message);
+    }
+  }
+
+  /**
+   * Streaming send mode
+   * - Simulates character-by-character output
+   */
+  private async sendStreamMode<M extends MessageStoreMsg<string>>(
+    message: M,
+    options: GatewayOptions<M>
+  ): Promise<M> {
+    const messageContent = message.content ?? '';
+
+    // Simulate generated reply content
+    const responseText = `Hello! You sent: ${messageContent}. This is a streaming response that will be sent word by word to simulate real streaming behavior.`;
+    const words = responseText.split(' ');
+
+    // Create initial assistant message
+    const assistantMessageId =
+      ChatMessageRole.ASSISTANT + message.id + Date.now();
+    let accumulatedContent = '';
+
+    try {
+      // Simulate connection establishment - call onConnected
+      await ThreadUtil.sleep(random(200, 500));
+
+      // Note: Framework will automatically intercept this call, trigger plugin system, then call user's original callback
+      await options.onConnected?.();
+
+      // Send word by word
+      for (let i = 0; i < words.length; i++) {
+        // Check if cancelled
+        if (options.signal?.aborted) {
+          throw new DOMException('Request aborted', 'AbortError');
+        }
+
+        // Accumulate content
+        accumulatedContent += (i > 0 ? ' ' : '') + words[i];
+
+        // Create message object for current chunk
+        const chunkMessage = this.messagesStore.createMessage({
+          ...message,
+          id: assistantMessageId,
+          role: ChatMessageRole.ASSISTANT,
+          content: accumulatedContent,
+          error: null,
+          loading: true,
+          status: MessageStatus.SENDING,
+          startTime: message.startTime,
+          endTime: 0,
+          result: null
+        }) as unknown as M;
+
+        // Call onChunk callback
+        await options.onChunk?.(chunkMessage);
+
+        // Calculate progress
+        const progress = ((i + 1) / words.length) * 100;
+        await options.onProgress?.(progress);
+
+        // Simulate network delay (random delay)
+        await ThreadUtil.sleep(random(100, 300));
+      }
+
+      // Create final completed message
+      const finalMessage = this.messagesStore.createMessage({
+        ...message,
+        id: assistantMessageId,
+        role: ChatMessageRole.ASSISTANT,
+        content: accumulatedContent,
+        error: null,
+        loading: false,
+        status: MessageStatus.SENT,
+        startTime: message.startTime,
+        endTime: Date.now(),
+        result: null
+      }) as unknown as M;
+
+      // Call completion callback
+      await options.onComplete?.(finalMessage);
+
+      return finalMessage;
+    } catch (error) {
+      // Check if it's a stop error
+      if (
+        error instanceof DOMException &&
+        error.name === 'AbortError' &&
+        typeof options.onAborted === 'function'
+      ) {
+        // Call onAborted callback
+        // Note: The message here contains accumulated content
+        const abortedMessage = this.messagesStore.createMessage({
+          ...message,
+          id: assistantMessageId,
+          role: ChatMessageRole.ASSISTANT,
+          content: accumulatedContent,
+          error: null,
+          loading: false,
+          status: MessageStatus.STOPPED,
+          startTime: message.startTime,
+          endTime: Date.now(),
+          result: null
+        }) as unknown as M;
+
+        await options.onAborted(abortedMessage);
+      } else {
+        // Other errors, call onError callback
+        await options.onError?.(error);
+      }
+
+      throw error;
+    }
+  }
+
+  /**
+   * Interruptible normal mode
+   * - Returns complete message at once (no character-by-character output)
+   * - Supports stop control (via signal)
+   * - Supports event callbacks (onComplete, onAborted, onError)
+   */
+  private async sendInterruptibleMode<M extends MessageStoreMsg<string>>(
+    message: M,
+    options: GatewayOptions<M>
+  ): Promise<M> {
+    const messageContent = message.content ?? '';
+
+    // Simulate connection establishment - call onConnected
+    await options.onConnected?.();
+
+    // Simulate random delay
+    const times = random(200, 1000);
+
+    // Check if cancelled during delay
+    const startTime = Date.now();
+    while (Date.now() - startTime < times) {
+      if (options.signal?.aborted) {
+        // Cancelled, create stopped message
+        const abortedMessage = this.messagesStore.createMessage({
+          ...message,
+          id: ChatMessageRole.ASSISTANT + message.id,
+          role: ChatMessageRole.ASSISTANT,
+          content: '', // Content not generated yet
+          error: null,
+          loading: false,
+          status: MessageStatus.STOPPED,
+          endTime: Date.now(),
+          result: null
+        }) as unknown as M;
+
+        // Call onAborted
+        await options.onAborted?.(abortedMessage);
+        throw new DOMException('Request aborted', 'AbortError');
+      }
+
+      // Check every 50ms
+      await ThreadUtil.sleep(50);
+    }
+
+    // Check if error simulation is needed
+    if (messageContent.includes('Failed') || messageContent.includes('error')) {
+      const error = new Error('Failed to send message');
+      await options.onError?.(error);
+      throw error;
+    }
+
+    if (times % 5 === 0) {
+      const error = new Error(`Network error(${times})`);
+      await options.onError?.(error);
+      throw error;
+    }
+
+    const endTime = Date.now();
+    const finalMessage = this.messagesStore.createMessage({
+      ...message,
+      id: ChatMessageRole.ASSISTANT + message.id,
+      role: ChatMessageRole.ASSISTANT,
+      content: `(${endTime - message.startTime}ms) Hello! You sent: ${message.content}`,
+      error: null,
+      loading: false,
+      status: MessageStatus.SENT,
+      endTime: endTime,
+      result: null
+    }) as unknown as M;
+
+    // Call onComplete
+    await options.onComplete?.(finalMessage);
+
+    return finalMessage;
+  }
+
+  /**
+   * Fast normal mode
+   * - Returns complete message at once
+   * - Non-interruptible (doesn't check signal)
+   */
+  private async sendNormalMode<M extends MessageStoreMsg<string>>(
+    message: M
+  ): Promise<M> {
+    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})`);
+    }
+
+    const endTime = Date.now();
+    return this.messagesStore.createMessage({
+      ...message,
+      id: ChatMessageRole.ASSISTANT + message.id,
+      role: ChatMessageRole.ASSISTANT,
+      content: `(${endTime - message.startTime}ms) Hello! You sent: ${message.content}`,
+      error: null,
+      loading: false,
+      status: MessageStatus.SENT,
+      endTime: endTime,
+      result: null
+    }) as unknown as M;
+  }
+}

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

@@ -0,0 +1,102 @@
+import { ReloadOutlined } from '@ant-design/icons';
+import { ChatMessageRole } from '@qlover/corekit-bridge';
+import { Spin, Button } from 'antd';
+import { clsx } from 'clsx';
+import { useMemo } from 'react';
+import type { ChatMessageI18nInterface } from '@config/i18n/chatMessageI18n';
+import type {
+  ChatMessage,
+  ChatMessageBridgeInterface
+} from '@qlover/corekit-bridge';
+
+export interface MessageItemProps<T, MessageType extends ChatMessage<T>> {
+  message: MessageType;
+  index: number;
+  bridge?: ChatMessageBridgeInterface<T>;
+  tt: ChatMessageI18nInterface;
+}
+
+export function MessageItem<T, MessageType extends ChatMessage<T>>({
+  message,
+  bridge,
+  index,
+  tt
+}: MessageItemProps<T, MessageType>) {
+  const messageText = useMemo(() => {
+    return message.content as string;
+  }, [message.content]);
+
+  const duration = useMemo(() => {
+    return message.endTime ? message.endTime - message.startTime : 0;
+  }, [message.endTime, message.startTime]);
+
+  const errorMessage = useMemo(() => {
+    return message.error instanceof Error ? message.error.message : null;
+  }, [message.error]);
+
+  const isUserMessage = message.role === ChatMessageRole.USER;
+  const isAssistant = message.role === ChatMessageRole.ASSISTANT;
+
+  return (
+    <div
+      data-testid="MessageItem"
+      data-message-id={message.id}
+      data-message-role={message.role}
+      data-message-index={index}
+      className={clsx('w-full flex mb-3', {
+        'justify-end': isUserMessage,
+        'justify-start': !isUserMessage
+      })}
+    >
+      <div
+        className={clsx('flex flex-col px-4 py-3 rounded-xl shadow-sm', {
+          'max-w-[80%] bg-blue-500 text-white': isUserMessage,
+          'max-w-[85%] bg-secondary border border-primary': isAssistant
+        })}
+      >
+        {/* Message content */}
+        <div className="flex items-start gap-2">
+          {isUserMessage && !message.loading && (
+            <Button
+              type="text"
+              size="small"
+              icon={<ReloadOutlined className="text-white" />}
+              disabled={message.loading}
+              onClick={() => bridge?.send(message)}
+              className="flex-shrink-0 hover:bg-blue-600"
+              title={tt.retry}
+            />
+          )}
+
+          <div
+            data-testid="MessageContent"
+            className={clsx('flex-1 whitespace-pre-wrap break-words', {
+              'text-white': isUserMessage,
+              'text-text': isAssistant
+            })}
+          >
+            {message.loading && <Spin size="small" className="mr-2" />}
+            {messageText}
+          </div>
+        </div>
+
+        {/* Duration for user messages */}
+        {isUserMessage && duration > 0 && (
+          <div className="text-right text-xs mt-1 opacity-80">
+            {tt.duration}: {duration}ms
+          </div>
+        )}
+
+        {/* Error message */}
+        {errorMessage && (
+          <div
+            data-testid="MessageError"
+            className="mt-2 text-sm p-2 bg-red-100 text-red-700 rounded border border-red-200"
+          >
+            ❌ {errorMessage}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}