@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/Accordion/style.ts

@@ -0,0 +1,208 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-accordion-group {
+  width: 100%;
+
+  svg {
+    transform: scale(1.25);
+  }
+  
+  .anticon-spin::before,
+  .anticon-spin {
+    animation-duration: 2s;
+  }
+  &-icon-success {
+    color: ${(p) => p.theme.colorSuccess};
+  }
+
+  
+
+
+  @keyframes ${(p) => p.theme.prefixCls}-loading {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  &-icon-error {
+    color: ${(p) => p.theme.colorError};
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: ${(p) => p.theme.colorTextSecondary};
+    padding: 6px 12px;
+    font-size: 12px;
+    cursor: pointer;
+    line-height: 20px;
+    background-color: ${(p) => p.theme.colorBgBase};
+
+    &-arrow {
+      display: flex;
+      align-items: center;
+    }
+
+    &-close {
+      border-radius: ${(p) => p.theme.borderRadiusLG}px;
+      border: 1px solid ${(p) => p.theme.colorBorderSecondary};
+      display: inline-flex;
+    }
+
+    &-icon {
+      position: relative;
+      display: flex;
+      width: 16px;
+      height: 16px;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+
+      &-line {
+        &::before,
+        &::after {
+          content: '';
+          position: absolute;
+          width: 1px;
+          height: 7px;
+          background-color: ${(p) => p.theme.colorBorder};
+          left: 50%;
+          transform: translateX(-50%);
+        }
+
+        &::before {
+          top: -9px;
+        }
+
+        &::after {
+          bottom: -9px;
+        }
+      }
+
+      &-last::after {
+        content: none;
+      }
+
+      &-first::before {
+        content: none;
+      }
+    }
+  }
+
+  &-open {
+    overflow: hidden;
+    border-radius: 8px;
+    border: 1px solid ${(p) => p.theme.colorBorderSecondary};
+    background-color: ${(p) => p.theme.colorBgBase};
+  }
+
+  &-body {
+    margin: 8px;
+    color: ${(p) => p.theme.colorText};
+    font-size: 12px;
+    border-radius: 8px;
+    overflow: hidden;
+
+    .${(p) => p.theme.prefixCls}-accordion-group-header {
+      background-color: transparent;
+    }
+
+    
+
+    .${(p) => p.theme.prefixCls}-accordion-group-header-close,
+    .${(p) => p.theme.prefixCls}-accordion-group-open {
+      border: 0;
+    }
+
+    .${(p) => p.theme.prefixCls}-accordion-group-header-close {
+      display: flex;
+    }
+
+    &-inline {
+      padding: 8px 0;
+      margin: 0;
+      background-color: transparent;
+    }
+
+    > .${(p) => p.theme.prefixCls}-accordion-group {
+      background-color: ${(p) => p.theme.colorFillTertiary};
+
+      &-open {
+        border-radius: 0;
+      }
+    }
+
+    &-close {
+      height: 0;
+      padding: 0;
+      margin: 0;
+    }
+  }
+}
+
+.${(p) => p.theme.prefixCls}-accordion-deep-thinking {
+  font-size: 12px;
+  color: ${(p) => p.theme.colorTextSecondary};
+  text-align: left;
+  white-space: pre-wrap;
+  line-height: 20px;
+  padding: 0 12px;
+  border-left: 1px solid ${(p) => p.theme.colorBorderSecondary};
+}
+
+.${(p) => p.theme.prefixCls}-accordion-soft-light-title {
+  font-size: 12px;
+  position: relative;
+  display: inline-block;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  mask-image: linear-gradient(
+    270deg,
+    rgba(231, 231, 237, 0.88) 20%,
+    rgba(231, 231, 237, 0.5) 50%,
+    rgba(255, 255, 255, 0.4) 52%,
+    rgba(231, 231, 237, 0.5) 70%,
+    rgba(231, 231, 237, 0.88) 80%
+  );
+  mask-size: 200% 100%;
+  animation: softlight-text 3s linear infinite;
+}
+
+
+@keyframes softlight-text {
+  0% {
+    mask-position: 100% 0;
+  }
+
+  100% {
+    mask-position: -100% 0;
+  }
+}
+
+.${(p) => p.theme.prefixCls}-accordion-content-body {
+  border: 1px solid ${(p) => p.theme.colorBorderSecondary};
+  border-radius: 8px;
+  overflow: hidden;
+  &-header {
+    display: flex;
+    height: 24px;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12px;
+    border-bottom: 1px solid ${(p) => p.theme.colorBorderSecondary};
+    background-color: ${(p) => p.theme.colorFillTertiary};
+    color: ${(p) => p.theme.colorText};
+  }
+
+  &-body {
+    background-color: ${(p) => p.theme.colorBgBase};
+  }
+}
+`;

package/components/AgentScopeRuntimeWebUI/demo/index.tsx

@@ -0,0 +1,4 @@
+import Demo from '../starter';
+
+
+export default Demo

package/components/AgentScopeRuntimeWebUI/index.tsx

@@ -0,0 +1,3 @@
+export { default } from './lib/ChatAnywhere';
+export { default as Demo } from './starter';
+export *  from './lib/types';

package/components/AgentScopeRuntimeWebUI/lib/AgentScopeRuntime/Request/Builder.tsx

@@ -0,0 +1,82 @@
+import { IAgentScopeRuntimeWebUIInputData } from "@agentscope-ai/chat";
+import { IAgentScopeRuntimeWebUIMessage } from "@agentscope-ai/chat";
+import { AgentScopeRuntimeContentType, AgentScopeRuntimeMessageType, AgentScopeRuntimeRunStatus, IAgentScopeRuntimeRequest, IContent, IFileContent, IImageContent, ITextContent } from "../types";
+
+class AgentScopeRuntimeRequestBuilder {
+  data: IAgentScopeRuntimeRequest;
+
+
+  static getHistoryMessages(messages: IAgentScopeRuntimeWebUIMessage[]) {
+    return messages.reduce((p, c) => {
+      if (!c.cards?.length) {
+        return p;
+      } else {
+        return p.concat(c.cards[0].data.input || c.cards[0].data.output)
+      }
+    }, [])
+  }
+
+
+  isImageFile(file: IAgentScopeRuntimeWebUIInputData['fileList'][number]) {
+    return file.type.indexOf('image/') === 0;
+  }
+
+
+  buildImageContent(imageFile: IAgentScopeRuntimeWebUIInputData['fileList'][number]): IImageContent {
+    return {
+      type: AgentScopeRuntimeContentType.IMAGE,
+      image_url: imageFile.response?.url,
+      status: AgentScopeRuntimeRunStatus.Created,
+    }
+  }
+
+  buildTextContent(text: string): ITextContent {
+    return {
+      type: AgentScopeRuntimeContentType.TEXT,
+      text: text,
+      status: AgentScopeRuntimeRunStatus.Created,
+    }
+  }
+
+  buildFileContent(file: IAgentScopeRuntimeWebUIInputData['fileList'][number]): IFileContent {
+    return {
+      type: AgentScopeRuntimeContentType.FILE,
+      file_url: file.response?.url,
+      file_name: file.name,
+      file_size: file.size,
+      status: AgentScopeRuntimeRunStatus.Created,
+    }
+  }
+
+
+
+  constructor(data: IAgentScopeRuntimeWebUIInputData) {
+    const content: IContent[] = [
+      this.buildTextContent(data.query),
+    ];
+
+    if (data.fileList?.length) {
+      data.fileList.forEach(item => {
+        if (this.isImageFile(item)) {
+          content.push(this.buildImageContent(item));
+        } else {
+          content.push(this.buildFileContent(item));
+        }
+      });
+    }
+
+    this.data = {
+      input: [
+        {
+          role: 'user',
+          type: AgentScopeRuntimeMessageType.MESSAGE,
+          content: content,
+        }
+      ],
+    };
+
+  }
+}
+
+
+export default AgentScopeRuntimeRequestBuilder;

package/components/AgentScopeRuntimeWebUI/lib/AgentScopeRuntime/Request/Card.tsx

@@ -0,0 +1,52 @@
+
+import { AgentScopeRuntimeContentType, IAgentScopeRuntimeRequest } from '../types';
+import { useMemo } from 'react';
+import { Bubble } from '@agentscope-ai/chat';
+
+export default function AgentScopeRuntimeRequestCard(props: {
+  data: IAgentScopeRuntimeRequest;
+}) {
+
+  const cards = useMemo(() => {
+
+    return props.data.input[0].content.reduce<any>((p, c) => {
+      if (c.type === AgentScopeRuntimeContentType.TEXT) {
+        p.push({
+          code: 'Text',
+          data: {
+            content: c.text,
+          },
+        });
+      }
+
+      if (c.type === AgentScopeRuntimeContentType.IMAGE) {
+        const imageCard = p.find((item: any) => item.code === 'Image');
+        if (!imageCard) {
+          p.push({
+            code: 'Images',
+            data: [{ url: c.image_url }],
+          });
+
+        } else {
+          imageCard.data.push({ url: c.image_url });
+        }
+      }
+
+      if (c.type === AgentScopeRuntimeContentType.FILE) {
+        const fileCard = p.find((item: any) => item.code === 'Files');
+        if (!fileCard) {
+          p.push({
+            code: 'Files',
+            data: [{ url: c.file_url, name: c.file_name, size: c.file_size }],
+          });
+        } else {
+          fileCard.data.push({ url: c.file_url, name: c.file_name, size: c.file_size });
+        }
+      }
+      return p;
+    }, []);
+  }, [props.data.input]);
+
+  return <Bubble role="user" cards={cards}></Bubble>;
+}
+

package/components/AgentScopeRuntimeWebUI/lib/AgentScopeRuntime/Response/Actions.tsx

@@ -0,0 +1,39 @@
+import { SparkCopyLine, SparkReplaceLine } from "@agentscope-ai/icons";
+import { IAgentScopeRuntimeResponse } from "../types";
+import AgentScopeRuntimeResponseBuilder from "./Builder";
+import { Bubble } from "@agentscope-ai/chat";
+import { copy, message } from "@agentscope-ai/design";
+import compact from 'lodash/compact';
+import { emit } from "../../Context/useChatAnywhereEventEmitter";
+
+
+export default function Tools(props: {
+  data: IAgentScopeRuntimeResponse
+  isLast?: boolean;
+}) {
+
+  const actions = compact([
+    {
+      icon: <SparkCopyLine />,
+      onClick: () => {
+        copy(JSON.stringify(props.data));
+      }
+    },
+    props.isLast ? {
+      icon: <SparkReplaceLine />,
+      onClick: () => {
+        emit({
+          type: 'handleReplace',
+          data: props,
+        })
+      }
+    } : null,
+  ]);
+
+
+  if (!AgentScopeRuntimeResponseBuilder.maybeDone(props.data)) return null;
+  return <Bubble.Footer
+    left={<Bubble.Footer.Actions data={actions} />}
+  />
+}
+

package/components/AgentScopeRuntimeWebUI/lib/AgentScopeRuntime/Response/Builder.tsx

@@ -0,0 +1,205 @@
+
+import { produce } from "immer";
+import { IAgentScopeRuntimeResponse, AgentScopeRuntimeRunStatus, IAgentScopeRuntimeMessage, IContent, AgentScopeRuntimeContentType, ITextContent, IImageContent, IDataContent, AgentScopeRuntimeMessageType } from "../types";
+import { uuid } from "@agentscope-ai/chat";
+
+class AgentScopeRuntimeResponseBuilder {
+
+  static mergeToolMessages(messages: IAgentScopeRuntimeMessage[]) {
+
+    const bufferMessagesMap = new Map<string, IDataContent>();
+    return messages.reduce<IAgentScopeRuntimeMessage[]>((p, c) => {
+
+      if (AgentScopeRuntimeResponseBuilder.maybeToolInput(c) && c.content?.length) {
+        const content = c.content[0] as IDataContent<{
+          name: string;
+        }>;
+        bufferMessagesMap.set(content.data.name, content);
+        return p;
+      }
+
+      if (AgentScopeRuntimeResponseBuilder.maybeToolOutput(c)) {
+        const content = c.content[0] as IDataContent<{
+          name: string;
+        }>;
+
+        const bufferContent = bufferMessagesMap.get(content.data.name);
+
+        if (bufferContent) {
+          bufferMessagesMap.delete(content.data.name);
+          return [...p, { ...c, content: [bufferContent, ...c.content] }];
+        } else {
+          return p;
+        }
+      }
+
+
+      return [...p, c]
+    }, []);
+  }
+
+
+  static maybeToolOutput(message: IAgentScopeRuntimeMessage) {
+    return [
+      AgentScopeRuntimeMessageType.FUNCTION_CALL_OUTPUT,
+      AgentScopeRuntimeMessageType.PLUGIN_CALL_OUTPUT,
+      AgentScopeRuntimeMessageType.COMPONENT_CALL_OUTPUT,
+    ].includes(message.type);
+  }
+
+  static maybeToolInput(message: IAgentScopeRuntimeMessage) {
+    return [
+      AgentScopeRuntimeMessageType.FUNCTION_CALL,
+      AgentScopeRuntimeMessageType.PLUGIN_CALL,
+      AgentScopeRuntimeMessageType.COMPONENT_CALL,
+    ].includes(message.type);
+  }
+
+  static maybeGenerating(data: { status: AgentScopeRuntimeRunStatus }) {
+    return [
+      AgentScopeRuntimeRunStatus.InProgress,
+      AgentScopeRuntimeRunStatus.Created,
+    ].includes(data.status);
+  }
+
+  static maybeDone(data: { status: AgentScopeRuntimeRunStatus }) {
+    return [
+      AgentScopeRuntimeRunStatus.Completed,
+      AgentScopeRuntimeRunStatus.Canceled,
+      AgentScopeRuntimeRunStatus.Failed,
+    ].includes(data.status);
+  }
+
+
+  data: IAgentScopeRuntimeResponse;
+
+  constructor({ id, status, created_at }: Pick<IAgentScopeRuntimeResponse, 'id' | 'status' | 'created_at'>) {
+    this.data = {
+      id: id,
+      output: [],
+      object: 'response',
+      status: status || AgentScopeRuntimeRunStatus.Created,
+      created_at: created_at || Date.now(),
+    };
+  }
+
+  handleResponse(data: IAgentScopeRuntimeResponse) {
+    this.data = produce(this.data, (draft) => {
+      if (!data.output) {
+        data.output = [];
+      }
+      Object.assign(draft, data);
+    });
+  }
+
+  handleMessage(data: IAgentScopeRuntimeMessage) {
+    this.data = produce(this.data, (draft) => {
+
+
+      if (!draft.output) {
+        draft.output = [];
+      }
+
+      const existingIndex = draft.output.findIndex(msg => msg.id === data.id);
+
+      if (existingIndex >= 0) {
+        const existingContent = draft.output[existingIndex].content;
+        Object.assign(draft.output[existingIndex], data);
+        if (!data.content || data.content.length === 0) {
+          draft.output[existingIndex].content = existingContent;
+        }
+      } else {
+        draft.output.push(data);
+      }
+    });
+  }
+
+  handleContent(data: IContent) {
+    this.data = produce(this.data, (draft) => {
+      const msg = draft.output.find(m => m.id === data.msg_id);
+
+      if (!msg) {
+        console.warn('Message not found for content:', data.msg_id);
+        return;
+      }
+
+      if (!msg.content) {
+        msg.content = [];
+      }
+
+      if (data.delta) {
+        const lastContent = msg.content[msg.content.length - 1];
+
+        if (lastContent && lastContent.delta) {
+          if (data.type === AgentScopeRuntimeContentType.TEXT && lastContent.type === AgentScopeRuntimeContentType.TEXT) {
+            (lastContent as ITextContent).text += (data as ITextContent).text;
+          } else if (data.type === AgentScopeRuntimeContentType.IMAGE) {
+            (lastContent as IImageContent).image_url = (data as IImageContent).image_url;
+          } else if (data.type === AgentScopeRuntimeContentType.DATA) {
+
+          }
+        } else {
+          msg.content.push(data);
+        }
+      } else {
+        Object.assign(msg.content[msg.content.length - 1], data);
+
+      }
+    });
+  }
+
+  handleError(data: IAgentScopeRuntimeMessage) {
+    this.data = produce(this.data, (draft) => {
+      draft.status = AgentScopeRuntimeRunStatus.Failed;
+
+      draft.output.push({
+        status: AgentScopeRuntimeRunStatus.Failed,
+        type: AgentScopeRuntimeMessageType.ERROR,
+        content: [],
+        id: uuid(),
+        role: 'assistant',
+        code: data.code,
+        message: typeof data.message === 'string' ? data.message : JSON.stringify(data.message),
+      })
+    });
+  }
+
+  handle(data: IAgentScopeRuntimeResponse | IAgentScopeRuntimeMessage | IContent) {
+    if (data.object === 'response') {
+      this.handleResponse(data);
+    } else if (data.object === 'message') {
+      this.handleMessage(data);
+    } else if (data.object === 'content') {
+      this.handleContent(data);
+    } else {
+      this.handleError(data);
+    }
+
+    return this.data;
+  }
+
+  cancel() {
+    this.data = produce(this.data, (draft) => {
+      if (AgentScopeRuntimeResponseBuilder.maybeGenerating(draft)) {
+        draft.status = AgentScopeRuntimeRunStatus.Canceled;
+      }
+      draft.output.forEach(msg => {
+        if (AgentScopeRuntimeResponseBuilder.maybeGenerating(msg)) {
+          msg.status = AgentScopeRuntimeRunStatus.Canceled;
+          msg.content.forEach(content => {
+            if (AgentScopeRuntimeResponseBuilder.maybeGenerating(content)) {
+              content.status = AgentScopeRuntimeRunStatus.Canceled;
+            }
+          });
+        }
+      });
+    });
+
+    return this.data;
+  }
+
+}
+
+
+
+export default AgentScopeRuntimeResponseBuilder;

package/components/AgentScopeRuntimeWebUI/lib/AgentScopeRuntime/Response/Card.tsx

@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import { AgentScopeRuntimeMessageType, IAgentScopeRuntimeResponse } from "../types";
+import AgentScopeRuntimeResponseBuilder from "./Builder";
+import Message from "./Message";
+import Tool from "./Tool";
+import Reasoning from "./Reasoning";
+import Error from "./Error";
+import { Bubble } from "@agentscope-ai/chat";
+import Actions from "./Actions";
+
+export default function AgentScopeRuntimeResponseCard(props: {
+  data: IAgentScopeRuntimeResponse;
+  isLast?: boolean;
+}) {
+  const messages = useMemo(() => {
+    return AgentScopeRuntimeResponseBuilder.mergeToolMessages(props.data.output);
+  }, [props.data.output])
+
+
+  if (!messages?.length && AgentScopeRuntimeResponseBuilder.maybeGenerating(props.data)) return <Bubble.Spin />;
+
+  return <>{
+    messages.map(item => {
+      switch (item.type) {
+        case AgentScopeRuntimeMessageType.MESSAGE:
+          return <Message key={item.id} data={item} />
+        case AgentScopeRuntimeMessageType.PLUGIN_CALL:
+        case AgentScopeRuntimeMessageType.PLUGIN_CALL_OUTPUT:
+          return <Tool key={item.id} data={item} />
+        case AgentScopeRuntimeMessageType.REASONING:
+          return <Reasoning key={item.id} data={item} />
+        case AgentScopeRuntimeMessageType.ERROR:
+          return <Error key={item.id} data={item} />
+        case AgentScopeRuntimeMessageType.HEARTBEAT:
+          return null;
+        default:
+          console.warn(`[WIP] Unknown message type: ${item.type}`);
+          return null;
+      }
+    })
+  }
+    <Actions {...props} />
+  </>
+}

package/components/AgentScopeRuntimeWebUI/lib/AgentScopeRuntime/Response/Error.tsx

@@ -0,0 +1,7 @@
+import { IAgentScopeRuntimeMessage } from "../types";
+import { Bubble } from "@agentscope-ai/chat";
+
+
+export default function Error({ data }: { data: IAgentScopeRuntimeMessage }) {
+  return <Bubble.Interrupted type="error" title={data.code} desc={data.message} />;
+}

package/components/AgentScopeRuntimeWebUI/lib/AgentScopeRuntime/Response/Message.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Markdown } from '@agentscope-ai/chat';
+import { AgentScopeRuntimeContentType, AgentScopeRuntimeRunStatus, IAgentScopeRuntimeMessage } from "../types";
+
+const Message = React.memo(function ({ data }: { data: IAgentScopeRuntimeMessage }) {
+  if (!data.content?.length) return null;
+
+  return <>
+    {
+      data.content.map((item, index) => {
+        switch (item.type) {
+          case AgentScopeRuntimeContentType.TEXT:
+            return <Markdown key={index} content={item.text} cursor={item.status === AgentScopeRuntimeRunStatus.InProgress ? true : false}></Markdown>
+          default:
+            return <div key={index}>{JSON.stringify(item)}</div>
+        }
+      })
+    }
+  </>
+})
+
+export default Message;
+

package/components/AgentScopeRuntimeWebUI/lib/AgentScopeRuntime/Response/Reasoning.tsx

@@ -0,0 +1,16 @@
+import { AgentScopeRuntimeRunStatus, IAgentScopeRuntimeMessage, ITextContent } from "../types";
+import { Thinking } from "@agentscope-ai/chat";
+
+export default function Reasoning({ data }: { data: IAgentScopeRuntimeMessage }) {
+
+  if (data.status === AgentScopeRuntimeRunStatus.Created) return null;
+
+  const content = data?.content?.[0] as ITextContent;
+  if (!content) return null;
+
+  return <Thinking
+    title="Thinking"
+    content={content.text}
+
+  ></Thinking>;
+}