@finogeeks2026/chatkit-web 0.0.10 → 0.0.11
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/README.md +24 -6
- package/dist/index.js +1088 -1085
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -44,7 +44,6 @@ import {
|
|
|
44
44
|
import '@finogeeks2026/chatkit-web/dist/index.css'
|
|
45
45
|
|
|
46
46
|
function App() {
|
|
47
|
-
const [historyOpen, setHistoryOpen] = useState(false)
|
|
48
47
|
const {
|
|
49
48
|
messages,
|
|
50
49
|
sendMessage,
|
|
@@ -56,10 +55,14 @@ function App() {
|
|
|
56
55
|
deleteSession,
|
|
57
56
|
pinSession,
|
|
58
57
|
createSession,
|
|
58
|
+
historyPanelOpen,
|
|
59
|
+
openHistory,
|
|
60
|
+
closeHistory,
|
|
61
|
+
startNewConversation,
|
|
59
62
|
} = useChat({
|
|
60
63
|
apiUrl: 'https://your-api.example.com/agent',
|
|
61
64
|
getBearerToken: () => yourAuth.getToken() ?? '',
|
|
62
|
-
persist: true,
|
|
65
|
+
persist: true,
|
|
63
66
|
})
|
|
64
67
|
|
|
65
68
|
return (
|
|
@@ -67,8 +70,8 @@ function App() {
|
|
|
67
70
|
<div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
|
|
68
71
|
<ChatHeader
|
|
69
72
|
title="AI Assistant"
|
|
70
|
-
onMenuClick={
|
|
71
|
-
onAddClick={
|
|
73
|
+
onMenuClick={openHistory}
|
|
74
|
+
onAddClick={startNewConversation}
|
|
72
75
|
/>
|
|
73
76
|
<ChatView
|
|
74
77
|
messages={messages}
|
|
@@ -78,8 +81,8 @@ function App() {
|
|
|
78
81
|
runtime={runtime}
|
|
79
82
|
/>
|
|
80
83
|
<HistoryPanel
|
|
81
|
-
open={
|
|
82
|
-
onClose={
|
|
84
|
+
open={historyPanelOpen}
|
|
85
|
+
onClose={closeHistory}
|
|
83
86
|
sessions={sessions}
|
|
84
87
|
currentSessionId={currentSessionId}
|
|
85
88
|
onSelect={switchSession}
|
|
@@ -93,6 +96,21 @@ function App() {
|
|
|
93
96
|
}
|
|
94
97
|
```
|
|
95
98
|
|
|
99
|
+
不使用 `ChatHeader` 时，可通过 API 打开历史面板或开启新对话：
|
|
100
|
+
|
|
101
|
+
- **`openHistory()`**：打开历史对话面板（等同于点击 header 菜单）
|
|
102
|
+
- **`closeHistory()`**：关闭历史面板
|
|
103
|
+
- **`startNewConversation()`**：创建并切换到新会话（等同于点击 header 加号）；也可使用 `createSession(title?)`
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
const { openHistory, closeHistory, startNewConversation, historyPanelOpen, ... } = useChat(config)
|
|
107
|
+
|
|
108
|
+
// 自定义按钮触发
|
|
109
|
+
<button onClick={openHistory}>打开历史</button>
|
|
110
|
+
<button onClick={startNewConversation}>新对话</button>
|
|
111
|
+
<HistoryPanel open={historyPanelOpen} onClose={closeHistory} ... />
|
|
112
|
+
```
|
|
113
|
+
|
|
96
114
|
### 方式二：使用 ChatKit 门面 API
|
|
97
115
|
|
|
98
116
|
适合需要精细控制运行时和会话生命周期的场景。
|