@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/AgentScopeRuntimeWebUI/lib/Header/index.tsx

@@ -0,0 +1,45 @@
+import { useChatAnywhereOptions } from "../Context/ChatAnywhereOptionsContext";
+import { InnerHeader, InnerList, InnerAdder } from '../Sessions';
+import { useProviderContext } from "@agentscope-ai/chat";
+import Style from './styles';
+import { useContext } from "react";
+import { Drawer } from 'antd';
+import { ChatAnyWhereLayoutContext } from "../Context/ChatAnywhereLayoutContext";
+
+
+export default function Header() {
+  const prefixCls = useProviderContext().getPrefixCls('chat-anywhere');
+  const { narrowMode, rightHeader } = useChatAnywhereOptions(v => v.theme);
+  const { toggleCollapsed, collapsed } = useContext(ChatAnyWhereLayoutContext);
+
+  return <>
+    <Style />
+
+    <div
+      className={`${prefixCls}-layout-right-header`}
+    >
+      {
+        narrowMode ? <InnerHeader className={`${prefixCls}-default-header-inner`} /> : null
+      }
+      {
+        rightHeader && <div className={`${prefixCls}-default-header-right`}>{rightHeader}</div>
+      }
+    </div>
+
+    {
+      narrowMode && <Drawer
+        width="80vw"
+        styles={{ body: { padding: 0 } }}
+        open={collapsed}
+        onClose={toggleCollapsed}
+        title={null}
+        closable={false} placement="left">
+
+        <div className={`${prefixCls}-sessions`}>
+          <InnerList narrowMode />
+          <InnerAdder narrowMode />
+        </div>
+      </Drawer>
+    }
+  </>;
+}

package/components/AgentScopeRuntimeWebUI/lib/Header/styles.ts

@@ -0,0 +1,23 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-default-header {
+  &-inner {
+    flex-direction: row-reverse;
+    gap: 10px;
+    padding: 0;
+  }
+
+  &-right {
+    margin: 0 0 0 auto;
+  }
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-default-header-sessions {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 10px 0 10px 0;
+}
+`;

package/components/AgentScopeRuntimeWebUI/lib/Layout/index.tsx

@@ -0,0 +1,45 @@
+import { useProviderContext } from '@agentscope-ai/chat';
+import Style from './styles';
+import cls from 'classnames';
+import { useChatAnywhereOptions } from '../Context/ChatAnywhereOptionsContext';
+import { useContext } from 'react';
+import Chat from '../Chat';
+import Sessions from '../Sessions';
+import { ChatAnyWhereLayoutContext } from '../Context/ChatAnywhereLayoutContext';
+import Header from '../Header';
+import React from 'react';
+
+interface IProps {
+  className?: string;
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+}
+
+export default function (props: IProps) {
+  const { className } = props;
+  const prefixCls = useProviderContext().getPrefixCls('chat-anywhere-layout');
+  const narrowMode = useChatAnywhereOptions(v => v.theme.narrowMode);
+  const { session } = useChatAnywhereOptions(v => ({ session: v.session }));
+  const { collapsed } = useContext(ChatAnyWhereLayoutContext);
+  const showLeft = !narrowMode && session && session.multiple;
+
+
+  return <>
+    <Style />
+    <div className={cls(`${prefixCls}`, className)}>
+      {
+        showLeft && <div className={cls(`${prefixCls}-left`, {
+          [`${prefixCls}-left-collapsed`]: collapsed,
+        })}>
+          <Sessions />
+        </div>
+      }
+      <div className={cls(`${prefixCls}-right`, {
+        [`${prefixCls}-right-has-header`]: true,
+      })}>
+        <Header />
+        <Chat />
+      </div>
+    </div>
+  </>;
+}

package/components/AgentScopeRuntimeWebUI/lib/Layout/styles.tsx

@@ -0,0 +1,104 @@
+import { createGlobalStyle } from 'antd-style';
+
+
+export default createGlobalStyle`
+* {
+  -webkit-tap-highlight-color: transparent !important;
+  tap-highlight-color: transparent !important;
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-layout {
+  height: 100%;
+  background: ${(p) => p.theme.colorBgBase};
+  display: flex;
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-layout-left {
+  width: 240px;
+  background-color: ${(p) => p.theme.colorBgBase};
+  transition: all 0.2s;
+
+  &-collapsed {
+    margin-left: -168px;
+  }
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-layout-right {
+  position: relative;
+  width: 0;
+  flex: 1;
+  background: ${(p) => p.theme.colorFillTertiary};
+
+  &-header {
+    height: 54px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    backdrop-filter: blur(10px);
+  }
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-layout-right-has-header {
+  .${(p) => p.theme.prefixCls}-chat-anywhere-message-list > div::before {
+    content: ' ';
+    display: block;
+    height: 54px;
+  }
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-sessions {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &-list {
+    padding: 10px 20px;
+    height: 0;
+    flex: 1;
+    overflow-y: scroll;
+
+    /* 隐藏滚动条 */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari, Opera */
+    }
+
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    height: 54px;
+
+    &-collapse {
+    }
+
+    &-left {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex: 1;
+      font-weight: 500;
+    }
+  }
+
+  &-adder {
+    padding: 0 20px 8px 20px;
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 0;
+  }
+}
+`;

package/components/AgentScopeRuntimeWebUI/lib/Sessions/index.tsx

@@ -0,0 +1,114 @@
+import { useContextSelector } from "use-context-selector";
+import { ChatAnywhereSessionsContext, useChatAnywhereSessions } from "../Context/ChatAnywhereSessionsContext";
+import { Button, IconButton } from "@agentscope-ai/design";
+import { ChatAnywhereInputContext } from "../Context/ChatAnywhereInputContext";
+import { useProviderContext } from "@agentscope-ai/chat";
+import { useChatAnywhereOptions } from "../Context/ChatAnywhereOptionsContext";
+import React, { useContext, useMemo } from "react";
+import { SparkDeleteLine, SparkOperateLeftLine, SparkOperateRightLine, SparkPlusLine } from "@agentscope-ai/icons";
+import { HistoryPanel } from '@agentscope-ai/chat';
+import { ChatAnyWhereLayoutContext } from "../Context/ChatAnywhereLayoutContext";
+import cls from 'classnames';
+
+
+export default function Sessions() {
+  const { collapsed } = useContext(ChatAnyWhereLayoutContext);
+  const prefixCls = useProviderContext().getPrefixCls('chat-anywhere-sessions');
+  const leftHeader = useChatAnywhereOptions(v => v.theme?.leftHeader) || {};
+
+  return <>
+    <div className={`${prefixCls}`}>
+      {
+        React.isValidElement(leftHeader) ? leftHeader : <InnerHeader />
+      }
+      <div className={`${prefixCls}-content`} style={{ display: collapsed ? 'none' : 'flex' }}>
+        <InnerAdder />
+        <InnerList />
+      </div>
+    </div>
+  </>;
+}
+
+
+export function InnerHeader({ className }: { className?: string }) {
+  const leftHeader = useChatAnywhereOptions(v => v.theme?.leftHeader) || {};
+  const prefixCls = useProviderContext().getPrefixCls('chat-anywhere-sessions');
+  const { toggleCollapsed, collapsed } = useContext(ChatAnyWhereLayoutContext);
+  const multiple = useChatAnywhereOptions(v => v.session.multiple);
+
+
+  const {
+    logo = 'https://img.alicdn.com/imgextra/i2/O1CN01lmoGYn1kjoXATy4PX_!!6000000004720-2-tps-200-200.png',
+    title = 'Runtime WebUI'
+  } = leftHeader as { logo?: string; title?: string };
+
+  return <>
+    <div className={cls(`${prefixCls}-header`, className)}>
+      <div className={`${prefixCls}-header-left`}>
+        <img src={logo} alt="logo" height={32} />
+        <span>{title}</span>
+      </div>
+
+      {
+        multiple && <IconButton
+          className={`${prefixCls}-header-collapse`}
+          bordered={false}
+          icon={!collapsed ? <SparkOperateLeftLine /> : <SparkOperateRightLine />}
+          onClick={toggleCollapsed}
+        />
+      }
+    </div>
+  </>
+}
+
+export function InnerAdder(props: { style?: React.CSSProperties; narrowMode?: boolean }) {
+  const loading = useContextSelector(ChatAnywhereInputContext, v => v.loading);
+  const { createSession } = useChatAnywhereSessions();
+  const prefixCls = useProviderContext().getPrefixCls('chat-anywhere-sessions');
+  const { toggleCollapsed } = useContext(ChatAnyWhereLayoutContext);
+
+  return <div className={`${prefixCls}-adder`} style={props.style}>
+    <Button block type="primary" icon={<SparkPlusLine />} disabled={loading} onClick={async() => {
+      await createSession();
+      if (props.narrowMode) {
+        toggleCollapsed();
+      }
+    }}>
+      New Chat
+    </Button>
+  </div>
+}
+
+export function InnerList(props: { style?: React.CSSProperties, narrowMode?: boolean }) {
+  const prefixCls = useProviderContext().getPrefixCls('chat-anywhere-sessions');
+  const sessions = useContextSelector(ChatAnywhereSessionsContext, v => v.sessions);
+  const { changeCurrentSessionId, removeSession } = useChatAnywhereSessions();
+  const currentSessionId = useContextSelector(ChatAnywhereSessionsContext, v => v.currentSessionId);
+  const { toggleCollapsed } = useContext(ChatAnyWhereLayoutContext);
+
+  const items = useMemo(() => sessions.map(session => ({
+    key: session.id,
+    label: session.name || 'New Chat',
+  })), [sessions]);
+
+
+  return <div className={`${prefixCls}-list`} style={props.style}>
+    <HistoryPanel items={items}
+      menu={[
+        {
+          key: 'delete',
+          icon: <SparkDeleteLine />,
+          danger: true,
+          onClick: async (session) => await removeSession({ id: session.key }),
+        },
+      ]}
+      activeKey={currentSessionId}
+      onActiveChange={(key) => {
+        changeCurrentSessionId(key);
+        if (props.narrowMode) {
+          toggleCollapsed();
+        }
+      }}
+    />
+  </div>;
+}

package/components/AgentScopeRuntimeWebUI/lib/demo/OptionsPanel/FormItem.tsx

@@ -0,0 +1,37 @@
+import { Form, Input, InputNumber, Space, ColorPicker, Flex } from 'antd';
+import { createStyles } from 'antd-style';
+
+
+interface FormItemProps {
+  name: string | string[];
+  label: string;
+  isList?: boolean;
+  children: any;
+  normalize?: (value: any) => any;
+}
+
+
+const useStyles = createStyles(({ token, css }) => ({
+  label: {
+    marginBottom: 6,
+    fontSize: 12,
+    color: token.colorTextSecondary,
+  },
+
+}));
+
+export default function FormItem(props: FormItemProps) {
+  const { styles } = useStyles();
+
+
+  const node = props.isList ?
+    <Form.List name={props.name}>{props.children}</Form.List> :
+    <Form.Item name={props.name} normalize={props.normalize}>{props.children}</Form.Item>;
+
+
+  return <div>
+    {props.label && <div className={styles.label}>{props.label}</div>}
+    {node}
+  </div>
+
+}

package/components/AgentScopeRuntimeWebUI/lib/demo/OptionsPanel/OptionsEditor.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect } from 'react';
+import { Form, Input, ColorPicker, Flex, Splitter, Divider, InputNumber } from 'antd';
+import { createStyles } from 'antd-style';
+import { Button, IconButton, Switch } from '@agentscope-ai/design'
+import { SparkDeleteLine, SparkPlusLine } from '@agentscope-ai/icons';
+import FormItem from './FormItem';
+import defaultConfig from './defaultConfig';
+
+const useStyles = createStyles(({ token, css }) => ({
+  container: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+
+  form: {
+    height: 0,
+    flex: 1,
+    padding: '8px 16px 16px 16px',
+    overflow: 'auto',
+  },
+  actions: {
+    padding: 16,
+    display: 'flex',
+    borderTop: `1px solid ${token.colorBorderSecondary}`,
+    justifyContent: 'flex-end',
+    gap: 16,
+  }
+
+}));
+
+interface OptionsEditorProps {
+  value?: any;
+  onChange?: any;
+}
+
+const OptionsEditor: React.FC<OptionsEditorProps> = ({
+  value,
+  onChange,
+}) => {
+  const { styles } = useStyles();
+  const [form] = Form.useForm();
+
+
+  const handleSave = () => {
+    form.validateFields().then((values) => {
+      onChange(values);
+    });
+  };
+
+  const handleReset = () => {
+    form.setFieldsValue(defaultConfig);
+  };
+
+  return (
+    <div className={styles.container}>
+      <Form
+        className={styles.form}
+        form={form}
+        layout="vertical"
+        initialValues={value}
+      >
+
+
+        <Divider orientation="left">Theme</Divider>
+
+        <FormItem name={['theme', 'colorPrimary']} label="colorPrimary" normalize={value => value.toHexString()}>
+          <ColorPicker />
+        </FormItem>
+
+        <FormItem name={['theme', 'colorBgBase']} label="colorBgBase" normalize={value => value.toHexString()}>
+          <ColorPicker />
+        </FormItem>
+
+        <FormItem name={['theme', 'colorTextBase']} label="colorTextBase" normalize={value => value.toHexString()}>
+          <ColorPicker />
+        </FormItem>
+
+        <FormItem name={['theme', 'darkMode']} label="darkMode" >
+          <Switch />
+        </FormItem>
+
+        <FormItem name={['theme', 'leftHeader', 'logo']} label="leftHeader.logo" >
+          <Input />
+        </FormItem>
+
+        <FormItem name={['theme', 'leftHeader', 'title']} label="leftHeader.title" >
+          <Input />
+        </FormItem>
+
+        <Divider orientation="left">Sender</Divider>
+
+
+        <FormItem name={['sender', 'disclaimer']} label="disclaimer" >
+          <Input />
+        </FormItem>
+
+
+        <FormItem name={['sender', 'attachments']} label="attachments" >
+          <Switch />
+        </FormItem>
+
+
+        <FormItem name={['sender', 'maxLength']} label="maxLength" >
+          <InputNumber min={1000} />
+        </FormItem>
+
+        <Divider orientation="left">Welcome</Divider>
+
+
+        <FormItem name={['welcome', 'greeting']} label="greeting" >
+          <Input />
+        </FormItem>
+
+        <FormItem name={['welcome', 'description']} label="description" >
+          <Input />
+        </FormItem>
+
+        <FormItem name={['welcome', 'avatar']} label="avatar" >
+          <Input />
+        </FormItem>
+
+
+        <FormItem name={['welcome', 'prompts']} isList label="prompts" >
+          {(fields, { add, remove }) => {
+            return <div>
+              {fields.map(field => {
+                return <Flex key={field.key} gap={6}>
+                  <Form.Item style={{ flex: 1 }} key={field.key} name={[field.name, 'value']}>
+                    <Input />
+                  </Form.Item>
+                  <IconButton icon={<SparkPlusLine />} onClick={() => add({})}></IconButton>
+                  <IconButton icon={<SparkDeleteLine />} onClick={() => remove(field.name)}></IconButton>
+                </Flex>
+              })}
+            </div>
+          }}
+        </FormItem>
+
+
+        <Divider orientation="left">API</Divider>
+
+        <FormItem name={['api', 'baseURL']} label="baseURL" >
+          <Input />
+        </FormItem>
+
+        <FormItem name={['api', 'token']} label="token" >
+          <Input />
+        </FormItem>
+      </Form>
+
+      <div className={styles.actions}>
+        <Button onClick={handleReset}>Reset</Button>
+        <Button type="primary" onClick={handleSave}>
+          Save & Copy
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default OptionsEditor;
+

package/components/AgentScopeRuntimeWebUI/lib/demo/OptionsPanel/defaultConfig.ts

@@ -0,0 +1,43 @@
+export default () => {
+  return {
+    theme: {
+      colorPrimary: '#615CED',
+      darkMode: true,
+      prefix: 'agentscope-runtime-webui',
+      leftHeader: {
+        logo: 'https://img.alicdn.com/imgextra/i2/O1CN01lmoGYn1kjoXATy4PX_!!6000000004720-2-tps-200-200.png',
+        title: 'Runtime WebUI',
+      },
+    },
+    sender: {
+      // @ts-ignore
+      attachments: true,
+      maxLength: 10000,
+      disclaimer:
+        'AI can also make mistakes, so please check carefully and use it with caution',
+    },
+
+    welcome: {
+      greeting: 'Hello, how can I help you today?',
+      description:
+        'I am a helpful assistant that can help you with your questions.',
+      avatar:
+        'https://img.alicdn.com/imgextra/i2/O1CN01lmoGYn1kjoXATy4PX_!!6000000004720-2-tps-200-200.png',
+      prompts: [
+        {
+          value: 'Hello',
+        },
+        {
+          value: 'How are you?',
+        },
+        {
+          value: 'What can you do?',
+        },
+      ],
+    },
+    api: {
+      baseURL: '',
+      token: '',
+    },
+  };
+};

package/components/AgentScopeRuntimeWebUI/lib/demo/OptionsPanel/index.tsx

@@ -0,0 +1,27 @@
+import { SparkSettingLine } from "@agentscope-ai/icons";
+import { IconButton, Drawer } from "@agentscope-ai/design";
+import { useState } from "react";
+import OptionsEditor from "./OptionsEditor";
+
+interface OptionsPanelProps {
+  value?: any;
+  onChange?: any;
+}
+
+export default function OptionsPanel(props: OptionsPanelProps) {
+  const [open, setOpen] = useState(false);
+
+  return <>
+    <IconButton onClick={() => setOpen(true)} icon={<SparkSettingLine />} bordered={false} />
+    <Drawer
+      destroyOnHidden
+      open={open}
+      onClose={() => setOpen(false)}
+      styles={{ body: { padding: 0 }, header: { padding: 8 } }}>
+      <OptionsEditor value={props.value} onChange={v => {
+        setOpen(false);
+        props.onChange(v);
+      }} />
+    </Drawer>
+  </>
+}

package/components/AgentScopeRuntimeWebUI/lib/demo/index.tsx

@@ -0,0 +1,57 @@
+import { AgentScopeRuntimeWebUI } from '@agentscope-ai/chat';
+import OptionsPanel from './OptionsPanel';
+import { useMemo, useState } from 'react';
+import sessionApi from './sessionApi';
+import defaultConfig from './OptionsPanel/defaultConfig';
+import { useLocalStorageState } from 'ahooks';
+
+export default function () {
+
+  const [optionsConfig, setOptionsConfig] = useLocalStorageState('agent-scope-runtime-webui-options', {
+    defaultValue: defaultConfig(),
+    listenStorageChange: true,
+  });
+
+  const options = useMemo(() => {
+    const rightHeader = <OptionsPanel value={optionsConfig} onChange={v => {
+      setOptionsConfig(prev => ({
+        ...prev,
+        ...v,
+      }));
+    }} />;
+
+    return {
+      ...optionsConfig,
+      session: {
+        multiple: true,
+        api: sessionApi,
+      },
+      sender: {
+        ...optionsConfig.sender,
+        attachments: optionsConfig.sender.attachments ? {
+          customRequest(options) {
+            // 模拟上传进度
+            options.onProgress({
+              percent: 100,
+            });
+            // 当前是一个 mock 的上传行为
+            // 实际情况需要具体实现一个文件上传服务，将文件转化为 url
+            options.onSuccess({
+              url: URL.createObjectURL(options.file as Blob)
+            });
+          }
+        } : undefined,
+      },
+      theme: {
+        ...optionsConfig.theme,
+        rightHeader,
+      },
+    };
+  }, [optionsConfig]);
+
+  return <div style={{ height: '100dvh' }}>
+    <AgentScopeRuntimeWebUI
+      options={options}
+    />
+  </div>;
+}