@opentiny/genui-sdk-vue 1.0.0-alpha.1 → 1.0.0-alpha.6

package/README.md

@@ -0,0 +1,37 @@
+# @opentiny/genui-sdk-vue
+
+
+A Vue 3 component library for enhanced LLM display and interaction. Stream AI-generated structured output into OpenTiny interactive UI components with bidirectional conversation support.
+
+* **Streaming Rendering:** Content renders progressively as the model generates—no long waits for full responses.
+* **Structured Output:** LLM output conforms to JSON Schema, enabling reliable parsing and rendering.
+* **Interaction:** User actions (form submit, button click) feed back into the conversation context for seamless multi-turn flows.
+
+[Learn more about GenUI SDK](https://opentiny.design/genui-sdk).
+
+## Usage
+
+```vue
+<script setup>
+import { GenuiChat, GenuiConfigProvider } from '@opentiny/genui-sdk-vue';
+</script>
+
+<template>
+  <GenuiConfigProvider theme="dark">
+    <GenuiChat
+      url="/api/chat"
+      model="deepseek-chat"
+    />
+  </GenuiConfigProvider>
+</template>
+```
+## Documentation
+
+* [quick-start](https://docs.opentiny.design/genui-sdk/guide/quick-start)
+* [start-with-render](https://docs.opentiny.design/genui-sdk/guide/start-with-renderer)
+
+## API
+
+* [GenuiRender](https://docs.opentiny.design/genui-sdk/components/renderer)
+* [GenuiChat](https://docs.opentiny.design/genui-sdk/components/chat)
+* [GenuiConfigProvider](https://docs.opentiny.design/genui-sdk/components/config-provider)

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+import { AIClient } from '@opentiny/tiny-robot-kit';
+import { BubbleCommonProps } from '@opentiny/tiny-robot';
+import { BubbleMarkdownContentRenderer } from '@opentiny/tiny-robot';
 import { BubbleProps } from '@opentiny/tiny-robot';
 import { BubbleRoleConfig } from '@opentiny/tiny-robot';
 import { ChatMessage } from '@opentiny/tiny-robot-kit';
@@ -7,19 +10,76 @@ import { ComponentProvideOptions } from 'vue';
 import { ComputedRef } from 'vue';
 import { Conversation } from '@opentiny/tiny-robot-kit';
 import { ConversationState } from '@opentiny/tiny-robot-kit';
+import { ConversationStorageStrategy } from '@opentiny/tiny-robot-kit';
 import { DefineComponent } from 'vue';
 import { MessageState } from '@opentiny/tiny-robot-kit';
 import { PublicProps } from 'vue';
 import { Reactive } from 'vue';
 import { Ref } from 'vue';
+import { RendererElement } from 'vue';
+import { RendererNode } from 'vue';
 import { UnwrapNestedRefs } from 'vue';
+import { UseConversationOptions } from '@opentiny/tiny-robot-kit';
 import { UseMessageReturn as UseMessageReturn_2 } from '@opentiny/tiny-robot-kit';
+import { UserItem } from '@opentiny/tiny-robot';
 import { VNode } from 'vue';
 
 declare const __VLS_component: DefineComponent<IChatProps, {
 setInputMessage: (message: string) => void;
 handleNewConversation: () => void;
 getConversation: () => UseConversationReturn;
+getResponseHandlers: () => IResponseHandler<IStreamData>[];
+setResponseHandlers: (handlers: IResponseHandler<IStreamData>[]) => void;
+getMessageRenderers: () => {
+'custom-text': (props: BubbleCommonProps & {
+content: string;
+}) => VNode<RendererNode, RendererElement, {
+[key: string]: any;
+}>;
+'schema-card': (schemaCardProps: IRendererProps) => VNode<RendererNode, RendererElement, {
+[key: string]: any;
+}>;
+tool: DefineComponent<    {
+name: string;
+status: "running" | "success" | "failed" | "cancelled";
+content?: string | {
+params?: object;
+result?: object;
+[x: string]: unknown;
+};
+formatPretty?: boolean;
+defaultOpen?: boolean;
+}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{
+name: string;
+status: "running" | "success" | "failed" | "cancelled";
+content?: string | {
+params?: object;
+result?: object;
+[x: string]: unknown;
+};
+formatPretty?: boolean;
+defaultOpen?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+reasoning: DefineComponent<    {
+content: string;
+thinking?: boolean;
+}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{
+content: string;
+thinking?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+markdown: BubbleMarkdownContentRenderer;
+templateData: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props> & Readonly<{}>, {
+attachments: FileMeta[];
+templateData: UserItem[];
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+'loading-text': Component<BubbleProps> | DefineComponent<IThinkComponentProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<IThinkComponentProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+'error-text': DefineComponent<    {
+content: string;
+}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{
+content: string;
+}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+};
+setMessageRenderer: (key: string, renderer: Component<IRendererProps>) => void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<IChatProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {
 messagesContainer: HTMLDivElement;
 }, HTMLDivElement>;
@@ -31,7 +91,7 @@ rendererInstance: any;
 declare const __VLS_component_3: DefineComponent<ConfigProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ConfigProviderProps> & Readonly<{}>, {
 id: string;
 locale: string;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {
 providerRef: unknown;
 }, any>;
 
@@ -176,7 +236,7 @@ declare const coerce: {
 };
 
 declare interface ConfigProviderProps {
-    theme: 'light' | 'dark' | 'lite' | 'auto';
+    theme?: 'light' | 'dark' | 'lite' | 'auto';
     id?: string;
     locale?: string;
     i18n?: I18nMessages;
@@ -253,6 +313,8 @@ declare type Effect<T> = RefinementEffect<T> | TransformEffect<T> | PreprocessEf
 
 declare const effectsType: <I extends ZodTypeAny>(schema: I, effect: Effect<I["_output"]>, params?: RawCreateParams) => ZodEffects<I, I["_output"]>;
 
+export declare const emitter: EventEmitter;
+
 declare const EMPTY_PATH: ParsePath;
 
 declare type EnumLike = {
@@ -298,6 +360,40 @@ declare namespace errorUtil {
     const toString: (message?: ErrMessage) => string | undefined;
 }
 
+export declare class EventEmitter {
+    private events;
+    constructor();
+    /**
+     * @param {string} eventName - 事件名
+     * @param {Function} callback - 回调函数
+     * @param {boolean} [once=false] - 是否只触发一次
+     */
+    on(eventName: string, callback: Function, once?: boolean): void;
+    /**
+     * @param {string} eventName - 事件名
+     * @param {Function} callback - 要移除的回调（必须是注册时的同一个函数引用）
+     */
+    off(eventName: string, callback: Function): void;
+    /**
+     * @param {string} eventName - 事件名
+     * @param  {...any} args - 传递给回调的参数
+     */
+    emit(eventName: string, ...args: any[]): void;
+    /**
+     * @param {string} eventName - 事件名
+     * @param {Function} callback - 回调函数
+     */
+    once(eventName: string, callback: Function): void;
+}
+
+declare interface FileMeta {
+    name: string;
+    type: string;
+    size: number;
+    lastModified: number;
+    base64: string;
+}
+
 declare type FilterEnum<Values, ToExclude> = Values extends [] ? [] : Values extends [infer Head, ...infer Rest] ? Head extends ToExclude ? FilterEnum<Rest, ToExclude> : [Head, ...FilterEnum<Rest, ToExclude>] : never;
 
 declare const functionType: typeof ZodFunction.create;
@@ -348,6 +444,7 @@ export declare interface IBubbleSlotsProps {
     bubbleProps: BubbleProps;
     isFinished: boolean;
     messageManager: UseMessageReturn_2;
+    chatMessage: IChatMessage;
 }
 
 export declare interface IChatConfig {
@@ -362,6 +459,7 @@ declare interface IChatMessage {
     role: 'assistant';
     content: string;
     messages: IMessageItem_2[];
+    [customKey: string]: any;
 }
 
 export declare interface IChatProps {
@@ -382,6 +480,15 @@ export declare interface IChatProps {
     customFetch?: CustomFetch;
 }
 
+/**
+ * 单次流式响应中的一条 choice（与 OpenAI chat.completion.chunk 对齐）
+ */
+declare interface IChatStreamChoice {
+    index: number;
+    delta?: IStreamDelta;
+    finish_reason?: string | null;
+}
+
 export declare interface ICustomActionItem extends IGenPromptAction {
     execute: (params: any, context: Record<string, any>) => void;
 }
@@ -438,6 +545,7 @@ declare interface IGenPromptComponentSchema {
 }
 
 declare interface IGenPromptExample {
+    id?: string;
     name: string;
     description?: string;
     schema: CardSchema;
@@ -468,7 +576,7 @@ export declare interface IMessage {
     messages?: IMessageItem[];
 }
 
-declare interface IMessageItem {
+export declare interface IMessageItem {
     type: string;
     content: string;
     [customKey: string]: any;
@@ -477,7 +585,18 @@ declare interface IMessageItem {
 /**
  * 消息项类型
  */
-declare type IMessageItem_2 = IMarkdownMessageItem | ISchemaCardMessageItem | IToolMessageItem;
+declare type IMessageItem_2 = IMarkdownMessageItem | ISchemaCardMessageItem | IToolMessageItem | IReasoningMessageItem;
+
+export declare class IndexedDBStrategy implements ConversationStorageStrategy {
+    private dbName;
+    private storeName;
+    private dataKey;
+    private db;
+    constructor(dbName?: string, storeName?: string, dataKey?: string);
+    private openDB;
+    saveConversations(conversations: Conversation[]): Promise<void>;
+    loadConversations(): Promise<Conversation[]>;
+}
 
 declare type Indices<T> = Exclude<keyof T, ArrayKeys>;
 
@@ -533,11 +652,17 @@ declare const INVALID: INVALID;
 
 declare type IpVersion = "v4" | "v6";
 
+declare interface IReasoningMessageItem {
+    type: 'reasoning';
+    content: string;
+    thinking?: boolean;
+}
+
 export declare interface IRendererProps {
     content: string | {
         [prop: string]: any;
     };
-    generating: boolean;
+    generating?: boolean;
     customComponents?: Record<string, Component>;
     customActions?: any;
     requiredCompleteFieldSelectors?: string[];
@@ -556,6 +681,19 @@ export declare interface IRendererSlotsProps {
     isFinished: boolean;
 }
 
+declare interface IResponseHandler<T> {
+    name: string;
+    match: (data: T, context: any) => boolean;
+    handler: (data: T, context: any) => boolean;
+    notMatchHandler?: (data: T, context: any) => boolean;
+    start?: (context: any, handlers: {
+        onData: (data: IChatMessage) => void;
+        onDone: () => void;
+        onError: (error: Error) => void;
+    }) => void;
+    end?: (context: any) => void;
+}
+
 export declare interface IRolesConfig {
     user: Partial<BubbleRoleConfig>;
     assistant: Partial<BubbleRoleConfig>;
@@ -574,15 +712,35 @@ declare interface ISchemaCardMessageItem {
 
 declare const isDirty: <T>(x: ParseReturnType<T>) => x is OK<T> | DIRTY<T>;
 
+declare type ISlotProps = any;
+
 declare type IssueData = stripPath<ZodIssueOptionalMessage> & {
     path?: (string | number)[];
     fatal?: boolean | undefined;
 };
 
+/**
+ * 单次 SSE data 行解析后的完整负载（含 id、model、choices 等顶层字段）
+ */
+declare interface IStreamData {
+    id?: string;
+    object?: string;
+    model?: string;
+    type?: string;
+    created?: number;
+    choices?: IChatStreamChoice[];
+    usage?: {
+        prompt_tokens?: number;
+        completion_tokens?: number;
+        total_tokens?: number;
+    };
+}
+
 /**
  * 流式响应的增量数据
  */
 declare interface IStreamDelta {
+    reasoning_content?: string;
     content?: string;
     tool_calls?: Array<{
         id: string;
@@ -834,6 +992,16 @@ declare type mergeTypes<A, B> = {
     [k in keyof A | keyof B]: k extends keyof B ? B[k] : k extends keyof A ? A[k] : never;
 };
 
+export declare class MessageManager {
+    messageManagerMap: Map<string, UseMessageReturn>;
+    conversationState: Reactive<ConversationState>;
+    options: UseMessageOptions;
+    constructor(conversationState: Reactive<ConversationState>, options: UseMessageOptions);
+    getMessageManager(conversationId: string): UseMessageReturn;
+    setMessageManager(id: string, options?: UseMessageOptions): UseMessageReturn;
+    deleteMessageManager(id: string): void;
+}
+
 declare type Methods = Record<string, JSFunction>;
 
 export declare interface ModelCapability {
@@ -1056,6 +1224,11 @@ declare type ProcessedCreateParams = {
 
 declare const promiseType: <Inner extends ZodTypeAny>(schema: Inner, params?: RawCreateParams) => ZodPromise<Inner>;
 
+declare interface Props {
+    templateData?: UserItem[];
+    attachments?: FileMeta[];
+}
+
 declare const quotelessJson: (obj: any) => string;
 
 declare type RawCreateParams = {
@@ -1125,6 +1298,14 @@ declare type SafeParseSuccess<Output> = {
 
 declare type Scalars = Primitive | Primitive[];
 
+export declare const scrollEnd: (container: Ref<HTMLElement | undefined>) => {
+    scrollToBottom: () => void;
+    scrollToBottomWithRetry: (maxRetries?: number, retryDelay?: number) => void;
+    autoScrollToBottom: () => void;
+    isLastMessageInBottom: Ref<boolean, boolean>;
+    updateIsLastMessageInBottom: () => void;
+};
+
 declare function setErrorMap(map: ZodErrorMap): void;
 
 declare const setType: <ValueSchema extends ZodTypeAny = ZodTypeAny>(valueType: ValueSchema, params?: RawCreateParams) => ZodSet<ValueSchema>;
@@ -1258,6 +1439,10 @@ declare const symbolType: (params?: RawCreateParams) => ZodSymbol;
 
 declare type SyncParseReturnType<T = any> = OK<T> | DIRTY<T> | INVALID;
 
+export declare function throttle<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void;
+
+export declare const toSlotFunction: (slot: Component<ISlotProps> | ((props: ISlotProps) => VNode | VNode[]) | undefined) => (props: ISlotProps) => VNode | VNode[];
+
 declare type TransformEffect<T> = {
     type: "transform";
     transform: (arg: T, ctx: RefinementCtx) => any;
@@ -1284,10 +1469,19 @@ declare type UnknownKeysParam = "passthrough" | "strict" | "strip";
 
 declare const unknownType: (params?: RawCreateParams) => ZodUnknown;
 
+/**
+ * useConversation composable
+ * 提供会话管理和持久化功能
+ *
+ * @param options useConversation选项
+ * @returns UseConversationReturn
+ */
+export declare function useConversation(options: UseConversationOptions): UseConversationReturn;
+
 /**
  * useConversation返回值接口
  */
-declare interface UseConversationReturn {
+export declare interface UseConversationReturn {
     /** 会话状态 */
     state: ConversationState;
     /** 消息管理 */
@@ -1318,10 +1512,35 @@ export declare const useMediaTheme: () => {
     theme: Readonly<Ref<"dark" | "light", "dark" | "light">>;
 };
 
+export declare function useMessage(options: UseMessageOptions): UseMessageReturn;
+
+/**
+ * useMessage选项接口
+ */
+export declare interface UseMessageOptions {
+    /** AI客户端实例 */
+    client: AIClient;
+    /** 消息ID */
+    conversationId: string;
+    /** 是否默认使用流式响应 */
+    useStreamByDefault?: boolean;
+    /** 错误消息模板 */
+    errorMessage?: string;
+    /** 初始消息列表 */
+    initialMessages?: ChatMessage[];
+    events?: {
+        onReceiveData?: <T = any>(data: T, messages: Ref<ChatMessage[]>, preventDefault: () => void) => void;
+        onFinish?: (finishReason: string | undefined, context: {
+            messages: Ref<ChatMessage[]>;
+            messageState: Reactive<MessageState>;
+        }, preventDefault: () => void) => void;
+    };
+}
+
 /**
  * useMessage返回值接口
  */
-declare interface UseMessageReturn {
+export declare interface UseMessageReturn {
     /** 消息ID */
     conversationId: string;
     /** 消息列表 */