@lobehub/chat 1.112.1 → 1.112.2

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.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,31 @@
2
2
 
3
3
  # Changelog
4
4
 
5
+ ### [Version 1.112.2](https://github.com/lobehub/lobe-chat/compare/v1.112.1...v1.112.2)
6
+
7
+ <sup>Released on **2025-08-16**</sup>
8
+
9
+ #### ♻ Code Refactoring
10
+
11
+ - **misc**: 重构 ArgsInput 组件.
12
+
13
+ <br/>
14
+
15
+ <details>
16
+ <summary><kbd>Improvements and Fixes</kbd></summary>
17
+
18
+ #### Code refactoring
19
+
20
+ - **misc**: 重构 ArgsInput 组件,closes [#8765](https://github.com/lobehub/lobe-chat/issues/8765) ([0905559](https://github.com/lobehub/lobe-chat/commit/0905559))
21
+
22
+ </details>
23
+
24
+ <div align="right">
25
+
26
+ [![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
27
+
28
+ </div>
29
+
5
30
  ### [Version 1.112.1](https://github.com/lobehub/lobe-chat/compare/v1.112.0...v1.112.1)
6
31
 
7
32
  <sup>Released on **2025-08-16**</sup>
package/changelog/v1.json CHANGED
@@ -1,4 +1,13 @@
1
1
  [
2
+ {
3
+ "children": {
4
+ "improvements": [
5
+ "重构 ArgsInput 组件."
6
+ ]
7
+ },
8
+ "date": "2025-08-16",
9
+ "version": "1.112.2"
10
+ },
2
11
  {
3
12
  "children": {
4
13
  "improvements": [
@@ -1,4 +1,9 @@
1
1
  {
2
+ "ArgsInput": {
3
+ "addArgument": "Add Argument",
4
+ "argumentPlaceholder": "Argument {{index}}",
5
+ "enterFirstArgument": "Enter first argument..."
6
+ },
2
7
  "DragUpload": {
3
8
  "dragDesc": "Drag and drop files here to upload multiple images.",
4
9
  "dragFileDesc": "Drag and drop images and files here to upload multiple images and files.",
@@ -1,4 +1,9 @@
1
1
  {
2
+ "ArgsInput": {
3
+ "addArgument": "添加参数",
4
+ "argumentPlaceholder": "参数 {{index}}",
5
+ "enterFirstArgument": "输入第一个参数..."
6
+ },
2
7
  "DragUpload": {
3
8
  "dragDesc": "拖拽文件到这里,支持上传多个图片。",
4
9
  "dragFileDesc": "拖拽图片和文件到这里,支持上传多个图片和文件。",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/chat",
3
- "version": "1.112.1",
3
+ "version": "1.112.2",
4
4
  "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
5
5
  "keywords": [
6
6
  "framework",
@@ -324,7 +324,7 @@
324
324
  "consola": "^3.4.2",
325
325
  "cross-env": "^7.0.3",
326
326
  "crypto-js": "^4.2.0",
327
- "dbdocs": "^0.14.4",
327
+ "dbdocs": "^0.16.0",
328
328
  "dotenv": "^16.6.1",
329
329
  "dpdm-fast": "1.0.7",
330
330
  "drizzle-dbml-generator": "^0.10.0",
@@ -1,20 +1,102 @@
1
- import { Input, type InputProps } from '@lobehub/ui';
2
- import { memo } from 'react';
1
+ import { ActionIcon, Button, Input, type InputProps } from '@lobehub/ui';
2
+ import { Plus, X } from 'lucide-react';
3
+ import React, { memo, useCallback } from 'react';
4
+ import { useTranslation } from 'react-i18next';
5
+ import { Flexbox } from 'react-layout-kit';
3
6
 
4
7
  interface ArgsInputProps extends Omit<InputProps, 'value' | 'onChange'> {
5
8
  onChange?: (value: string[]) => void;
6
9
  value?: string[];
7
10
  }
8
11
 
9
- const ArgsInput = memo<ArgsInputProps>(({ value, onChange, ...res }) => {
12
+ const ArgsInput = memo<ArgsInputProps>(({ value = [], onChange, ...res }) => {
13
+ const { t } = useTranslation('components');
14
+
15
+ const handleAddArg = useCallback(() => {
16
+ onChange?.([...value, '']);
17
+ }, [value, onChange]);
18
+
19
+ const handleRemoveArg = useCallback(
20
+ (index: number) => {
21
+ const newValue = value.filter((_, i) => i !== index);
22
+ onChange?.(newValue);
23
+ },
24
+ [value, onChange],
25
+ );
26
+
27
+ const handleArgChange = useCallback(
28
+ (index: number, newArg: string) => {
29
+ const newValue = [...value];
30
+ newValue[index] = newArg;
31
+ onChange?.(newValue);
32
+ },
33
+ [value, onChange],
34
+ );
35
+
36
+ const handleKeyDown = useCallback(
37
+ (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
38
+ if (e.key === 'Enter') {
39
+ e.preventDefault();
40
+ if (index === value.length - 1) {
41
+ handleAddArg();
42
+ }
43
+ } else if (e.key === 'Backspace' && e.currentTarget.value === '' && value.length > 1) {
44
+ e.preventDefault();
45
+ handleRemoveArg(index);
46
+ }
47
+ },
48
+ [value.length, handleAddArg, handleRemoveArg],
49
+ );
50
+
10
51
  return (
11
- <Input
12
- onChange={(e) => {
13
- onChange?.([e.target.value]);
14
- }}
15
- value={value?.join(' ')}
16
- {...res}
17
- />
52
+ <Flexbox gap={8} style={{ width: '100%' }}>
53
+ {value.length === 0 ? (
54
+ <Flexbox align="center" gap={8} horizontal>
55
+ <Input
56
+ {...res}
57
+ onBlur={(e) => {
58
+ if (e.target.value.trim()) {
59
+ onChange?.([e.target.value.trim()]);
60
+ }
61
+ res.onBlur?.(e);
62
+ }}
63
+ placeholder={t('ArgsInput.enterFirstArgument')}
64
+ style={{ flex: 1 }}
65
+ />
66
+ <Button icon={Plus} onClick={handleAddArg} size="small" type="primary" />
67
+ </Flexbox>
68
+ ) : (
69
+ <>
70
+ {value.map((arg, index) => (
71
+ <Flexbox align="center" gap={8} horizontal key={index}>
72
+ <Input
73
+ onChange={(e) => handleArgChange(index, e.target.value)}
74
+ onKeyDown={(e) => handleKeyDown(e, index)}
75
+ placeholder={t('ArgsInput.argumentPlaceholder', { index: index + 1 })}
76
+ style={{ flex: 1 }}
77
+ value={arg}
78
+ />
79
+ <ActionIcon
80
+ icon={X}
81
+ onClick={() => handleRemoveArg(index)}
82
+ size="small"
83
+ style={{ flexShrink: 0 }}
84
+ />
85
+ </Flexbox>
86
+ ))}
87
+ <Button
88
+ icon={Plus}
89
+ onClick={handleAddArg}
90
+ size="small"
91
+ style={{ alignSelf: 'flex-start' }}
92
+ type="dashed"
93
+ >
94
+ {t('ArgsInput.addArgument')}
95
+ </Button>
96
+ </>
97
+ )}
98
+ </Flexbox>
18
99
  );
19
100
  });
101
+
20
102
  export default ArgsInput;
@@ -1,4 +1,9 @@
1
1
  export default {
2
+ ArgsInput: {
3
+ addArgument: '添加参数',
4
+ argumentPlaceholder: '参数 {{index}}',
5
+ enterFirstArgument: '输入第一个参数...',
6
+ },
2
7
  DragUpload: {
3
8
  dragDesc: '拖拽文件到这里,支持上传多个图片。',
4
9
  dragFileDesc: '拖拽图片和文件到这里,支持上传多个图片和文件。',