@qlover/create-app 0.8.0 → 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/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>
+  );
+}