@qlover/create-app 0.8.0 → 0.9.0

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

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

@@ -0,0 +1,86 @@
+import { useStore } from '@brain-toolkit/react-kit';
+import { useCallback, type ComponentType } from 'react';
+import type { ChatMessageI18nInterface } from '@config/i18n/chatMessageI18n';
+import { MessageItem, type MessageItemProps } from './MessageItem';
+import type {
+  ChatMessage,
+  ChatMessageBridgeInterface
+} from '@qlover/corekit-bridge';
+
+export type MessageComponentType<
+  T,
+  MessageType extends ChatMessage<T>
+> = ComponentType<MessageItemProps<T, MessageType>>;
+
+export type GetMessageComponent<T, MessageType extends ChatMessage<T>> = (
+  props: MessageItemProps<T, MessageType>
+) => MessageComponentType<T, MessageType>;
+
+export interface MessagesListProps<T, MessageType extends ChatMessage<T>> {
+  bridge: ChatMessageBridgeInterface<T>;
+  tt: ChatMessageI18nInterface;
+
+  /**
+   * Get message component
+   *
+   * @default `MessageItem`
+   *
+   * @type `ComponentType<MessageItemProps<MessageType>>`
+   */
+  getMessageComponent?: GetMessageComponent<T, MessageType>;
+
+  /**
+   * Get message unique identifier
+   *
+   * @default `(message.id ?? '') + (message.startTime ?? 0) + index`
+   *
+   * @param message Message
+   * @param index Message index
+   * @returns Message unique identifier
+   */
+  getMessageKey?(message: MessageType, index: number): string;
+}
+
+export function MessagesList<T = string>({
+  bridge,
+  tt,
+  getMessageComponent,
+  getMessageKey
+}: MessagesListProps<T, ChatMessage<T>>) {
+  const messagesStore = bridge.getMessageStore();
+  const messages = useStore(messagesStore, (state) => state.messages);
+
+  const _getMessageKey = useCallback(
+    (message: ChatMessage<T>, index: number): string => {
+      return (
+        getMessageKey?.(message, index) ||
+        String((message.id ?? '') + (message.startTime ?? 0) + index)
+      );
+    },
+    [getMessageKey]
+  );
+
+  return (
+    <div
+      data-testid="MessagesList"
+      className="flex-1 overflow-y-auto p-4 space-y-2"
+    >
+      {messages.length === 0 ? (
+        <div className="flex items-center justify-center h-full">
+          <div className="text-center text-text-secondary">
+            <p className="text-base mb-1">{tt.empty}</p>
+            <p className="text-sm">{tt.start}</p>
+          </div>
+        </div>
+      ) : (
+        messages.map((message, index) => {
+          const key = _getMessageKey(message, index);
+          const props = { message, index, bridge, tt };
+          const Component = getMessageComponent?.(props) || MessageItem;
+
+          return <Component data-testid="MessageItem" key={key} {...props} />;
+        })
+      )}
+    </div>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qlover/create-app",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Create a new app with a single command",
   "private": false,
   "type": "module",