@agentscope-ai/chat 1.1.43 → 1.1.44-beta.1766022181074

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/components/OperateCard/demo/rag.tsx +4 -0
  2. package/components/OperateCard/preset/Rag.tsx +19 -7
  3. package/components/OperateCard/style.ts +7 -1
  4. package/lib/OperateCard/preset/Rag.d.ts +6 -0
  5. package/lib/OperateCard/preset/Rag.js +18 -12
  6. package/lib/OperateCard/style.js +1 -1
  7. package/package.json +1 -1
package/components/OperateCard/demo/rag.tsx CHANGED
@@ -6,6 +6,10 @@ export default function () {
6
6
  <Rag
7
7
  query='GPT-5技术博客、行业分析、技术特性 AI原生 GPT-5技术博客、行业分析、技术特性 AI原生'
8
8
  subTitle="GPT-5技术博客、行业分析、技术特性"
9
+ images={[
10
+ 'https://gw.alicdn.com/imgextra/i1/O1CN01n7R7cy1MkE5OYeXV9_!!6000000001472-55-tps-24-24.svg',
11
+ 'https://gw.alicdn.com/imgextra/i1/O1CN01n7R7cy1MkE5OYeXV9_!!6000000001472-55-tps-24-24.svg',
12
+ ]}
9
13
  list={[
10
14
  {
11
15
  title: '【文档库】GPT-5 技术博客', content: 'Aliyun Bailianis a product offered by Alibaba Cloud, which is the cloud computing arm of Alibaba Group. Bailian is a high-performance AI development platform designed to help users build, deploy, and manage machine learning models and AI applications more efficiently.', footer: '来源文档：（真）拟定稿。GPT 的制度研究',
package/components/OperateCard/preset/Rag.tsx CHANGED
@@ -23,13 +23,18 @@ export interface IRagProps {
23
23
  * @descriptionEn Query
24
24
  */
25
25
  query: string;
26
-
27
26
  /**
28
27
  * @description 检索词前缀
29
28
  * @descriptionEn Query Title
30
29
  * @default '检索 Query：'
31
30
  */
32
31
  queryTitle?: string;
32
+ /**
33
+ * @description 检索图片列表
34
+ * @descriptionEn Query Images
35
+ * @default []
36
+ */
37
+ images?: string[];
33
38
  /**
34
39
  * @description 召回知识列表
35
40
  * @descriptionEn RAG List
@@ -68,9 +73,7 @@ function Images({ images }: { images: string[] }) {
68
73
  } as Locale}
69
74
  >
70
75
  <Image.PreviewGroup>
71
- <div className={`${prefixCls}-rag-item-images`}>
72
- {images.map((image, index) => <Image src={image} key={index} width={44} height={44} />)}
73
- </div>
76
+ {images.map((image, index) => <Image src={image} key={index} width={44} height={44} />)}
74
77
  </Image.PreviewGroup>
75
78
  </ConfigProvider>
76
79
 
@@ -106,7 +109,10 @@ function Item({ item }) {
106
109
  <div>{item.content}</div>
107
110
 
108
111
  {
109
- item.images && <Images images={item.images} />
112
+ item.images &&
113
+ <div className={`${prefixCls}-rag-item-images`}>
114
+ <Images images={item.images} />
115
+ </div>
110
116
  }
111
117
 
112
118
  {
@@ -130,6 +136,7 @@ export default function (props: IRagProps) {
130
136
  placeholder = '未查询到与提问相关知识库',
131
137
  query,
132
138
  queryTitle = '检索 Query：',
139
+ images,
133
140
  } = props;
134
141
  const { getPrefixCls } = useProviderContext();
135
142
  const prefixCls = getPrefixCls('operate-card');
@@ -156,8 +163,13 @@ export default function (props: IRagProps) {
156
163
  children: <>
157
164
  {query && <div className={`${prefixCls}-rag-query`}>
158
165
  <span className={`${prefixCls}-rag-query-title`}>{queryTitle}</span>
159
-
160
- {query}</div>}
166
+ {query}
167
+ </div>}
168
+ {
169
+ images?.length && <div className={`${prefixCls}-rag-query-images`}>
170
+ <Images images={images} />
171
+ </div>
172
+ }
161
173
  {children}
162
174
  </>
163
175
  }}
package/components/OperateCard/style.ts CHANGED
@@ -228,7 +228,7 @@ export default createGlobalStyle`
228
228
  }
229
229
 
230
230
  &-rag-query {
231
- margin: 0 12px 12px 12px;
231
+ margin: 0 12px 8px 12px;
232
232
  line-height: 20px;
233
233
  font-size: 12px;
234
234
  color: ${(p) => p.theme.colorTextSecondary};
@@ -236,6 +236,12 @@ export default createGlobalStyle`
236
236
  &-title {
237
237
  font-weight: 500;
238
238
  }
239
+
240
+ &-images {
241
+ margin: 0 12px 8px 12px;
242
+ display: flex;
243
+ gap: 8px;
244
+ }
239
245
  }
240
246
 
241
247
  &-rag-item {
package/lib/OperateCard/preset/Rag.d.ts CHANGED
@@ -22,6 +22,12 @@ export interface IRagProps {
22
22
  * @default '检索 Query：'
23
23
  */
24
24
  queryTitle?: string;
25
+ /**
26
+ * @description 检索图片列表
27
+ * @descriptionEn Query Images
28
+ * @default []
29
+ */
30
+ images?: string[];
25
31
  /**
26
32
  * @description 召回知识列表
27
33
  * @descriptionEn RAG List
package/lib/OperateCard/preset/Rag.js CHANGED
@@ -24,15 +24,12 @@ function Images(_ref) {
24
24
  }
25
25
  },
26
26
  children: /*#__PURE__*/_jsx(Image.PreviewGroup, {
27
- children: /*#__PURE__*/_jsx("div", {
28
- className: "".concat(prefixCls, "-rag-item-images"),
29
- children: images.map(function (image, index) {
30
- return /*#__PURE__*/_jsx(Image, {
31
- src: image,
32
- width: 44,
33
- height: 44
34
- }, index);
35
- })
27
+ children: images.map(function (image, index) {
28
+ return /*#__PURE__*/_jsx(Image, {
29
+ src: image,
30
+ width: 44,
31
+ height: 44
32
+ }, index);
36
33
  })
37
34
  })
38
35
  });
@@ -71,8 +68,11 @@ function Item(_ref2) {
71
68
  className: "".concat(prefixCls, "-rag-item-content"),
72
69
  children: [/*#__PURE__*/_jsx("div", {
73
70
  children: item.content
74
- }), item.images && /*#__PURE__*/_jsx(Images, {
75
- images: item.images
71
+ }), item.images && /*#__PURE__*/_jsx("div", {
72
+ className: "".concat(prefixCls, "-rag-item-images"),
73
+ children: /*#__PURE__*/_jsx(Images, {
74
+ images: item.images
75
+ })
76
76
  }), item.link ? /*#__PURE__*/_jsx("a", {
77
77
  onClick: function onClick() {
78
78
  window.open(item.link, '_blank');
@@ -98,7 +98,8 @@ export default function (props) {
98
98
  placeholder = _props$placeholder === void 0 ? '未查询到与提问相关知识库' : _props$placeholder,
99
99
  query = props.query,
100
100
  _props$queryTitle = props.queryTitle,
101
- queryTitle = _props$queryTitle === void 0 ? '检索 Query：' : _props$queryTitle;
101
+ queryTitle = _props$queryTitle === void 0 ? '检索 Query：' : _props$queryTitle,
102
+ images = props.images;
102
103
  var _useProviderContext3 = useProviderContext(),
103
104
  getPrefixCls = _useProviderContext3.getPrefixCls;
104
105
  var prefixCls = getPrefixCls('operate-card');
@@ -132,6 +133,11 @@ export default function (props) {
132
133
  className: "".concat(prefixCls, "-rag-query-title"),
133
134
  children: queryTitle
134
135
  }), query]
136
+ }), (images === null || images === void 0 ? void 0 : images.length) && /*#__PURE__*/_jsx("div", {
137
+ className: "".concat(prefixCls, "-rag-query-images"),
138
+ children: /*#__PURE__*/_jsx(Images, {
139
+ images: images
140
+ })
135
141
  }), children]
136
142
  })
137
143
  }
package/lib/OperateCard/style.js CHANGED
@@ -1,7 +1,7 @@
1
1
  var _templateObject;
2
2
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
3
  import { createGlobalStyle } from 'antd-style';
4
- export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-operate-card {\n width: 100%;\n border-radius: ", "px;\n overflow: hidden;\n background-color: ", ";\n\n &-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 12px;\n height: 32px;\n\n &-icon {\n font-size: 16px;\n }\n\n &-title {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 13px;\n font-weight: 500;\n color: ", ";\n }\n\n &-description {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 12px;\n color: ", ";\n }\n\n &-arrow {\n margin: 0 0 0 auto;\n }\n\n &-has-body {\n cursor: pointer;\n }\n }\n\n &-body {\n opacity: 0;\n animation: ", "-operate-card-body-open 0.2s ease-in-out forwards;\n \n @keyframes ", "-operate-card-body-open {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n \n }\n\n\n &-line-body {\n margin: 0 12px 12px 20px;\n border-left: 1px solid ", ";\n }\n\n &-thinking {\n padding-left: 16px;\n font-size: 12px;\n line-height: 20px;\n color: ", ";\n opacity: 0.85;\n white-space: pre-wrap;\n }\n\n\n &-todo-list {\n\n &-item {\n height: 32px;\n display: flex;\n align-items: center;\n padding: 0 12px;\n gap: 8px;\n \n color: ", ";\n\n\n &-done {\n color: ", ";\n }\n\n &-icon {\n font-size: 16px;\n }\n\n &-title {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n font-size: 12px;\n }\n\n &-done {\n \n }\n\n }\n \n }\n\n\n &-web-search-item {\n display: flex;\n height: 32px;\n align-items: center;\n padding: 0 12px;\n gap: 8px;\n color: ", ";\n cursor: pointer;\n\n &-icon {\n display: block;\n width: 16px;\n height: 16px;\n border: 1px solid ", ";\n border-radius: 99px;\n }\n\n &-title {\n font-size: 12px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: ", ";\n\n &:hover {\n color: ", ";\n \n }\n\n }\n\n &-subTitle {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n border-left: 1px solid ", ";\n font-size: 12px;\n line-height: 1;\n color: ", ";\n padding-left: 8px;\n margin-left: 4px;\n }\n\n }\n\n\n &-tool-call-block {\n margin-left: 16px;\n margin-top: 8px;\n\n \n &-title {\n font-size: 12px;\n color: ", ";\n line-height: 20px;\n margin-bottom: 4px;\n }\n\n }\n\n\n\n &-device-action {\n height: auto;\n align-items: flex-start;\n\n &-icon {\n margin-top: 6px;\n }\n\n &-time {\n margin-bottom: 4px;\n font-size: 12px;\n line-height: 20px;\n color: ", ";\n }\n\n &-content {\n \n width: 100%;\n display: flex;\n justify-content: space-between;\n }\n\n &-description {\n width: 0;\n flex: 1;\n margin: 8px 0 6px 0;\n }\n\n &-image {\n margin: 4px 0;\n height: 32px;\n margin-left: 8px;\n display: block;\n border-radius: 6px;\n overflow: hidden;\n border: 1px solid ", ";\n }\n\n\n \n }\n\n &-rag-empty-placeholder {\n padding: 16px 0;\n border: 1px solid ", ";\n border-radius: 6px;\n background-color: ", ";\n line-height: 20px;\n font-size: 12px;\n color: ", ";\n margin: 0 12px 12px 12px;\n }\n\n &-rag-query {\n margin: 0 12px 12px 12px;\n line-height: 20px;\n font-size: 12px;\n color: ", ";\n\n &-title {\n font-weight: 500;\n }\n }\n\n &-rag-item {\n margin-left: 16px;\n\n &-title {\n font-size: 12px;\n color: ", ";\n line-height: 20px;\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n &-content {\n padding: 8px;\n border-radius: 6px;\n background-color: ", ";\n }\n\n &-images {\n margin-top: 8px;\n padding: 8px;\n display: flex;\n gap: 8px;\n background-color: ", ";\n \n }\n\n &-footer {\n display: block;\n margin-top: 8px;\n font-size: 12px;\n line-height: 20px;\n color: ", ";\n }\n\n }\n\n &-rag-item ~ &-rag-item {\n margin-top: 8px;\n }\n}\n"])), function (p) {
4
+ export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-operate-card {\n width: 100%;\n border-radius: ", "px;\n overflow: hidden;\n background-color: ", ";\n\n &-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 12px;\n height: 32px;\n\n &-icon {\n font-size: 16px;\n }\n\n &-title {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 13px;\n font-weight: 500;\n color: ", ";\n }\n\n &-description {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 12px;\n color: ", ";\n }\n\n &-arrow {\n margin: 0 0 0 auto;\n }\n\n &-has-body {\n cursor: pointer;\n }\n }\n\n &-body {\n opacity: 0;\n animation: ", "-operate-card-body-open 0.2s ease-in-out forwards;\n \n @keyframes ", "-operate-card-body-open {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n \n }\n\n\n &-line-body {\n margin: 0 12px 12px 20px;\n border-left: 1px solid ", ";\n }\n\n &-thinking {\n padding-left: 16px;\n font-size: 12px;\n line-height: 20px;\n color: ", ";\n opacity: 0.85;\n white-space: pre-wrap;\n }\n\n\n &-todo-list {\n\n &-item {\n height: 32px;\n display: flex;\n align-items: center;\n padding: 0 12px;\n gap: 8px;\n \n color: ", ";\n\n\n &-done {\n color: ", ";\n }\n\n &-icon {\n font-size: 16px;\n }\n\n &-title {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n font-size: 12px;\n }\n\n &-done {\n \n }\n\n }\n \n }\n\n\n &-web-search-item {\n display: flex;\n height: 32px;\n align-items: center;\n padding: 0 12px;\n gap: 8px;\n color: ", ";\n cursor: pointer;\n\n &-icon {\n display: block;\n width: 16px;\n height: 16px;\n border: 1px solid ", ";\n border-radius: 99px;\n }\n\n &-title {\n font-size: 12px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: ", ";\n\n &:hover {\n color: ", ";\n \n }\n\n }\n\n &-subTitle {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n border-left: 1px solid ", ";\n font-size: 12px;\n line-height: 1;\n color: ", ";\n padding-left: 8px;\n margin-left: 4px;\n }\n\n }\n\n\n &-tool-call-block {\n margin-left: 16px;\n margin-top: 8px;\n\n \n &-title {\n font-size: 12px;\n color: ", ";\n line-height: 20px;\n margin-bottom: 4px;\n }\n\n }\n\n\n\n &-device-action {\n height: auto;\n align-items: flex-start;\n\n &-icon {\n margin-top: 6px;\n }\n\n &-time {\n margin-bottom: 4px;\n font-size: 12px;\n line-height: 20px;\n color: ", ";\n }\n\n &-content {\n \n width: 100%;\n display: flex;\n justify-content: space-between;\n }\n\n &-description {\n width: 0;\n flex: 1;\n margin: 8px 0 6px 0;\n }\n\n &-image {\n margin: 4px 0;\n height: 32px;\n margin-left: 8px;\n display: block;\n border-radius: 6px;\n overflow: hidden;\n border: 1px solid ", ";\n }\n\n\n \n }\n\n &-rag-empty-placeholder {\n padding: 16px 0;\n border: 1px solid ", ";\n border-radius: 6px;\n background-color: ", ";\n line-height: 20px;\n font-size: 12px;\n color: ", ";\n margin: 0 12px 12px 12px;\n }\n\n &-rag-query {\n margin: 0 12px 8px 12px;\n line-height: 20px;\n font-size: 12px;\n color: ", ";\n\n &-title {\n font-weight: 500;\n }\n\n &-images {\n margin: 0 12px 8px 12px;\n display: flex;\n gap: 8px;\n }\n }\n\n &-rag-item {\n margin-left: 16px;\n\n &-title {\n font-size: 12px;\n color: ", ";\n line-height: 20px;\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n &-content {\n padding: 8px;\n border-radius: 6px;\n background-color: ", ";\n }\n\n &-images {\n margin-top: 8px;\n padding: 8px;\n display: flex;\n gap: 8px;\n background-color: ", ";\n \n }\n\n &-footer {\n display: block;\n margin-top: 8px;\n font-size: 12px;\n line-height: 20px;\n color: ", ";\n }\n\n }\n\n &-rag-item ~ &-rag-item {\n margin-top: 8px;\n }\n}\n"])), function (p) {
5
5
  return p.theme.prefixCls;
6
6
  }, function (p) {
7
7
  return p.theme.borderRadiusLG;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agentscope-ai/chat",
3
- "version": "1.1.43",
3
+ "version": "1.1.44-beta.1766022181074",
4
4
  "description": "a free and open-source chat framework for building excellent LLM-powered chat experiences",
5
5
  "license": "Apache-2.0",
6
6
  "sideEffects": [