@agentscope-ai/chat 1.1.45 → 1.1.46-beta.1767150237996

package/components/Sender/BeforeUIContainer/index.tsx

@@ -0,0 +1,42 @@
+import { useProviderContext } from '@agentscope-ai/chat'
+import Style from './style';
+import { useMemo } from 'react';
+
+
+interface IBeforeUIContainerProps {
+  leftChildren?: React.ReactNode;
+  rightChildren?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+
+
+export default function BeforeUIContainer({ leftChildren, rightChildren, children }: IBeforeUIContainerProps) {
+  const prefixCls = useProviderContext().getPrefixCls('sender-before-ui-container');
+
+  const left = useMemo(() => {
+    if (leftChildren) return <div className={`${prefixCls}-left`}>{leftChildren}</div>;
+    return null;
+  }, [leftChildren]);
+
+  const right = useMemo(() => {
+    if (rightChildren) return <div className={`${prefixCls}-right`}>{rightChildren}</div>;
+    return null;
+  }, [rightChildren]);
+
+  return (
+    <>
+      <Style />
+      <div className={prefixCls}>
+        <div className={`${prefixCls}-content`}>
+          <div className={`${prefixCls}-content-children`}>
+            {children || <>
+              {left}
+              {right}
+            </>}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/components/Sender/BeforeUIContainer/style.tsx

@@ -0,0 +1,29 @@
+import { createGlobalStyle } from 'antd-style';
+
+
+export default createGlobalStyle`
+.${p => p.theme.prefixCls}-sender-before-ui-container {
+  position: relative;
+  height: 40px;
+
+  &-content {
+    position: absolute;
+    top: 8px;
+    left: 0;
+    right: 0;
+    height: 40px;
+    border: 1px solid ${p => p.theme.colorBorderSecondary};
+    border-radius: ${p => p.theme.borderRadiusLG}px ${p => p.theme.borderRadiusLG}px 0 0;
+    background: ${p => p.theme.colorFillTertiary};
+    transition: all 0.3s;
+
+    &-children {
+      display: flex;
+      justify-content: space-between; 
+      align-items: center;
+      height: 32px;
+      padding: 0 12px;
+    }
+  }
+}
+`

package/components/Sender/demo/beforeUI.tsx

@@ -0,0 +1,8 @@
+import { ChatInput } from "@agentscope-ai/chat";
+
+export default function () {
+  return <div style={{ width: '100%' }}>
+    <ChatInput.BeforeUIContainer leftChildren={<div>Left</div>} rightChildren={<div>Right</div>} />
+    <ChatInput placeholder='Please type here...' ></ChatInput>
+  </div>
+}

package/components/Sender/index.en-US.md

@@ -21,6 +21,7 @@ The following are examples and variations of this component
 <code src="./demo/withImage.tsx" center height="350">Upload Image</code>
 <code src="./demo/withFile.tsx" center height="350">Upload File</code>
 <code src="./demo/moreMode.tsx" center height="350">Custom Mode</code>
+<code src="./demo/beforeUI.tsx" center height="350">Before UI</code>
 <code src="./demo/morePrefixAction.tsx" center height="350">Custom Functionality</code>
 <code src="./demo/asr.tsx" center height="350">Voice Input</code>
 

package/components/Sender/index.tsx

@@ -4,7 +4,7 @@ import { useMergedState } from 'rc-util';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 import getValue from 'rc-util/lib/utils/get';
 import React, { useState } from 'react';
-import { useFocusWithin, useClickAway, useEventListener } from 'ahooks';
+import { useFocusWithin, useEventListener } from 'ahooks';
 import useProxyImperativeHandle from '../Util/hooks/use-proxy-imperative-handle';
 import { useProviderContext } from '@agentscope-ai/chat';
 import SenderHeader, { SendHeaderContext } from './SenderHeader';
@@ -19,6 +19,7 @@ import ModeSelect from './ModeSelect';
 import type { InputRef as AntdInputRef, ButtonProps, GetProps } from 'antd';
 import { SparkEnlargeLine, SparkShrinkLine } from '@agentscope-ai/icons';
 import { IconButton } from '@agentscope-ai/design';
+import BeforeUIContainer from './BeforeUIContainer';
 
 
 export type SubmitType = 'enter' | 'shiftEnter' | false;
@@ -399,7 +400,7 @@ const ForwardSender = React.forwardRef<SenderRef, SenderProps>((props, ref) => {
         .filter(item => item.kind === 'file')
         .map(item => item.getAsFile())
         .filter((file): file is File => file !== null);
-    } 
+    }
     if (files.length > 0) {
       files.forEach(file => onPasteFile(file));
       e.preventDefault();
@@ -547,10 +548,12 @@ const ForwardSender = React.forwardRef<SenderRef, SenderProps>((props, ref) => {
 type CompoundedSender = typeof ForwardSender & {
   Header: typeof SenderHeader;
   ModeSelect: typeof ModeSelect;
+  BeforeUIContainer: typeof BeforeUIContainer;
 };
 
 const Sender = ForwardSender as CompoundedSender;
 Sender.Header = SenderHeader;
 Sender.ModeSelect = ModeSelect;
+Sender.BeforeUIContainer = BeforeUIContainer;
 
 export default Sender;

package/lib/Sender/BeforeUIContainer/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface IBeforeUIContainerProps {
+    leftChildren?: React.ReactNode;
+    rightChildren?: React.ReactNode;
+    children?: React.ReactNode;
+}
+export default function BeforeUIContainer({ leftChildren, rightChildren, children }: IBeforeUIContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Sender/BeforeUIContainer/index.js

@@ -0,0 +1,40 @@
+import { useProviderContext } from "../..";
+import Style from "./style";
+import { useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function BeforeUIContainer(_ref) {
+  var leftChildren = _ref.leftChildren,
+    rightChildren = _ref.rightChildren,
+    children = _ref.children;
+  var prefixCls = useProviderContext().getPrefixCls('sender-before-ui-container');
+  var left = useMemo(function () {
+    if (leftChildren) return /*#__PURE__*/_jsx("div", {
+      className: "".concat(prefixCls, "-left"),
+      children: leftChildren
+    });
+    return null;
+  }, [leftChildren]);
+  var right = useMemo(function () {
+    if (rightChildren) return /*#__PURE__*/_jsx("div", {
+      className: "".concat(prefixCls, "-right"),
+      children: rightChildren
+    });
+    return null;
+  }, [rightChildren]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx("div", {
+      className: prefixCls,
+      children: /*#__PURE__*/_jsx("div", {
+        className: "".concat(prefixCls, "-content"),
+        children: /*#__PURE__*/_jsx("div", {
+          className: "".concat(prefixCls, "-content-children"),
+          children: children || /*#__PURE__*/_jsxs(_Fragment, {
+            children: [left, right]
+          })
+        })
+      })
+    })]
+  });
+}

package/lib/Sender/BeforeUIContainer/style.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: import("react").NamedExoticComponent<object>;
+export default _default;

package/lib/Sender/BeforeUIContainer/style.js

@@ -0,0 +1,14 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createGlobalStyle } from 'antd-style';
+export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-sender-before-ui-container {\n  position: relative;\n  height: 40px;\n\n  &-content {\n    position: absolute;\n    top: 8px;\n    left: 0;\n    right: 0;\n    height: 40px;\n    border: 1px solid ", ";\n    border-radius: ", "px ", "px 0 0;\n    background: ", ";\n    transition: all 0.3s;\n\n    &-children {\n      display: flex;\n      justify-content: space-between; \n      align-items: center;\n      height: 32px;\n      padding: 0 12px;\n    }\n  }\n}\n"])), function (p) {
+  return p.theme.prefixCls;
+}, function (p) {
+  return p.theme.colorBorderSecondary;
+}, function (p) {
+  return p.theme.borderRadiusLG;
+}, function (p) {
+  return p.theme.borderRadiusLG;
+}, function (p) {
+  return p.theme.colorFillTertiary;
+});

package/lib/Sender/index.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import SenderHeader from './SenderHeader';
 import ModeSelect from './ModeSelect';
 import type { InputRef as AntdInputRef, ButtonProps, GetProps } from 'antd';
+import BeforeUIContainer from './BeforeUIContainer';
 export type SubmitType = 'enter' | 'shiftEnter' | false;
 type TextareaProps = GetProps<typeof Input.TextArea>;
 export interface SenderComponents {
@@ -167,6 +168,7 @@ declare const ForwardSender: React.ForwardRefExoticComponent<SenderProps & React
 type CompoundedSender = typeof ForwardSender & {
     Header: typeof SenderHeader;
     ModeSelect: typeof ModeSelect;
+    BeforeUIContainer: typeof BeforeUIContainer;
 };
 declare const Sender: CompoundedSender;
 export default Sender;

package/lib/Sender/index.js

@@ -37,6 +37,7 @@ import useSpeech from "./useSpeech";
 import ModeSelect from "./ModeSelect";
 import { SparkEnlargeLine, SparkShrinkLine } from '@agentscope-ai/icons';
 import { IconButton } from '@agentscope-ai/design';
+import BeforeUIContainer from "./BeforeUIContainer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -348,4 +349,5 @@ var ForwardSender = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var Sender = ForwardSender;
 Sender.Header = SenderHeader;
 Sender.ModeSelect = ModeSelect;
+Sender.BeforeUIContainer = BeforeUIContainer;
 export default Sender;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentscope-ai/chat",
-  "version": "1.1.45",
+  "version": "1.1.46-beta.1767150237996",
   "description": "a free and open-source chat framework for building excellent LLM-powered chat experiences",
   "license": "Apache-2.0",
   "sideEffects": [