plain-design 1.0.0-beta.162 → 1.0.0-beta.163

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.162",
+  "version": "1.0.0-beta.163",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/$ai/index.tsx

@@ -10,6 +10,7 @@ import {uuid} from "@peryl/utils/uuid";
 import {PlainObject} from "@peryl/utils/event";
 import {defer} from "@peryl/utils/defer";
 import {toArray} from "@peryl/utils/toArray";
+import {iEffects} from "@peryl/utils/createEffects";
 
 export const $ai = (() => {
 
@@ -100,9 +101,13 @@ export const $ai = (() => {
       onThinking,
       onThinkEnd,
       onThinkStart,
+      abortEffects,
     }: iAiChatStreamParameter
   ) => {
     const aiConfig = _aiConfig ?? getConfig();
+
+    const controller = new AbortController();
+    !!abortEffects && abortEffects.push(() => {controller.abort('abort stream.');});
     // 发送请求
     const response = await fetch(aiConfig.url, {
       method: 'POST',
@@ -115,7 +120,8 @@ export const $ai = (() => {
         "messages": messages,
         // "messages": [{ role: 'user', content: '你好' }],
         stream: true // 请求流式响应
-      })
+      }),
+      signal: controller.signal,
     });
 
     if (!response.ok || !response.body) {throw response;}
@@ -357,4 +363,5 @@ export interface iAiChatStreamParameter {
   onThinking?: (thinkText: string) => void,
   onThinkStart?: () => void,
   onThinkEnd?: () => void,
+  abortEffects?: iEffects,
 }

package/src/packages/components/AiChatBox/index.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, iKeyboardEvent, PropType, reactive, useClasses, useRefs} from "@peryl/react-compose";
+import {designComponent, getComponentCls, iKeyboardEvent, PropType, reactive, useClasses, useModel, useRefs} from "@peryl/react-compose";
 import Input from "../Input";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, useStyle} from "../../uses/useStyle";
@@ -13,6 +13,7 @@ import Scroll from "../Scroll";
 import {delay} from "@peryl/utils/delay";
 import {toArray} from "@peryl/utils/toArray";
 import {lastItem} from "@peryl/utils/lastItem";
+import {createEffects} from "@peryl/utils/createEffects";
 
 export const AiChatBox = designComponent({
   props: {
@@ -26,6 +27,8 @@ export const AiChatBox = designComponent({
     histories: { type: Array as PropType<iChatBoxHistory[]> },
     /*系统提示词*/
     systemContent: { type: String },
+    /*用户输入的内容*/
+    modelValue: { type: String },
     /*手动处理大模型返回的message*/
     handleMessage: { type: Function as PropType<iChatBoxHandleMessage> },
     handleReceive: { type: Function as PropType<(data: { fullText?: string, chunkText?: string }) => void> },
@@ -33,9 +36,16 @@ export const AiChatBox = designComponent({
     handleChatStream: { type: Function as PropType<(parameter: iAiChatStreamParameter & { userContent: string }) => Promise<any>> },
     inputMinHeight: { type: String, default: '80px' },
     inputMaxHeight: { type: String, default: '225px' },
+    enableMemory: { type: Boolean },
+    memoryLimit: { type: Number, default: 15 },
   },
   slots: ['prepend'],
-  setup({ props, slots }) {
+  emits: {
+    onUpdateModelValue: (val?: string) => true,
+  },
+  setup({ props, slots, event: { emit } }) {
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
 
     const { refs, onRef } = useRefs({ scroll: Scroll });
 
@@ -53,11 +63,12 @@ export const AiChatBox = designComponent({
     ]);
 
     const state = reactive({
-      userContent: '',
       histories: props.histories || [] as iChatBoxHistory[],
       loading: false
     });
 
+    const { effects: abortEffects } = createEffects();
+
     const methods = {
       scrollEnd: async () => {
         if (!!refs.scroll) {
@@ -73,11 +84,16 @@ export const AiChatBox = designComponent({
       },
       send: async (userContent: string) => {
         await delay(23);
-        state.userContent = '';
-        await methods.addHistory({ role: 'user', content: userContent, id: uuid() });
+        model.value = '';
+        const newUserHistory: iChatBoxHistory = { role: 'user', content: userContent, id: uuid() };
+        await methods.addHistory(newUserHistory);
 
         /*const { message, chatData } = await $ai.chatSystem(userContent, props.systemContent, aiConfig);*/
-        const messages: iAiHistory[] = [{ role: 'user', content: userContent }];
+        let messages: iAiHistory[] = props.enableMemory ? state.histories : (() => {
+          const { role, content } = newUserHistory;
+          return [{ role, content }];
+        })();
+        messages = messages.slice(props.memoryLimit * -1);
         await props.beforeSendUserContent?.({ userContent, messages });
         if (!!props.systemContent?.trim().length) {messages.unshift({ role: 'system', content: props.systemContent });}
         let chatBoxHistory: iChatBoxHistory | undefined = undefined;
@@ -87,6 +103,7 @@ export const AiChatBox = designComponent({
           aiConfig,
           messages,
           userContent,
+          abortEffects,
           onReceiving: ({ fullText, chunkText }) => {
             // console.log('receiving', fullText);
             props.handleReceive?.({ fullText, chunkText });
@@ -133,9 +150,18 @@ export const AiChatBox = designComponent({
 
     const handler = {
       onClickSend: async () => {
+        if (state.loading) {
+          console.log('abort');
+          abortEffects.clear();
+          return;
+        }
+
+        console.log('send');
+        abortEffects.clear();
+        abortEffects.push(() => state.loading = false);
         state.loading = true;
         try {
-          const userContent = state.userContent;
+          const userContent = model.value;
           if (!userContent?.trim().length) {
             $message.error(i18n.$it('ai.require').d('提问的内容不能为空'));
             return;
@@ -187,13 +213,13 @@ export const AiChatBox = designComponent({
             <Input
               readonly={state.loading}
               textarea
-              v-model={state.userContent}
+              v-model={model.value}
               placeholder={props.placeholder || i18n.$it('ai.placeholder').d('请输入要发送给ai的内容如：你是谁')}
               minHeight={props.inputMinHeight}
               maxHeight={props.inputMaxHeight}
               onEnter={handler.onEnterTextarea}
             />
-            <Button shape="round" mode="fill" icon="pi-send" className="ai-chat-box-send-button" onClick={handler.onClickSend} loading={state.loading}/>
+            <Button shape="round" mode="fill" icon={state.loading ? 'ie-stop' : 'ie-send'} className="ai-chat-box-send-button" onClick={handler.onClickSend}/>
           </div>
         </div>
       )

package/src/packages/components/Icon/icon.external.tsx

@@ -103,5 +103,15 @@ export const IconExternal: Record<string, () => RenderNode> = {
       <path
         d="M15.5355 2.80744C17.0976 1.24534 19.6303 1.24534 21.1924 2.80744C22.7545 4.36953 22.7545 6.90219 21.1924 8.46429L18.3638 11.2929L18.7175 11.6466C19.108 12.0371 19.108 12.6703 18.7175 13.0608C18.327 13.4513 17.6938 13.4513 17.3033 13.0608L16.9498 12.7073L10.7351 18.922C10.1767 19.4804 9.46547 19.861 8.6911 20.0159L6.93694 20.3667C6.54976 20.4442 6.19416 20.6345 5.91496 20.9137L4.92894 21.8997C4.53841 22.2902 3.90525 22.2902 3.51472 21.8997L2.10051 20.4855C1.70999 20.095 1.70999 19.4618 2.10051 19.0713L3.08653 18.0852C3.36574 17.806 3.55605 17.4504 3.63348 17.0633L3.98431 15.3091C4.13919 14.5347 4.51981 13.8235 5.07821 13.2651L11.2929 7.05045L10.9393 6.69686C10.5488 6.30634 10.5488 5.67317 10.9393 5.28265C11.3299 4.89212 11.963 4.89212 12.3535 5.28265L12.7069 5.63604L15.5355 2.80744ZM12.7071 8.46466L6.49242 14.6794C6.21322 14.9586 6.02291 15.3142 5.94548 15.7013L5.59464 17.4555C5.43977 18.2299 5.05915 18.9411 4.50075 19.4995C5.05915 18.9411 5.77035 18.5604 6.54471 18.4056L8.29887 18.0547C8.68605 17.9773 9.04165 17.787 9.32085 17.5078L15.5355 11.2931L12.7071 8.46466Z"></path>
     </svg>
+  ),
+  'ie-send': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M1.94607 9.31543C1.42353 9.14125 1.4194 8.86022 1.95682 8.68108L21.043 2.31901C21.5715 2.14285 21.8746 2.43866 21.7265 2.95694L16.2733 22.0432C16.1223 22.5716 15.8177 22.59 15.5944 22.0876L11.9999 14L17.9999 6.00005L9.99992 12L1.94607 9.31543Z"></path>
+    </svg>
+  ),
+  'ie-stop': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M6 5H18C18.5523 5 19 5.44772 19 6V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18V6C5 5.44772 5.44772 5 6 5Z"></path>
+    </svg>
   )
 };