@lobehub/lobehub 2.0.4 → 2.0.5
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 +25 -0
- package/changelog/v2.json +9 -0
- package/package.json +1 -1
- package/src/tools/artifacts/systemRole.ts +84 -120
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,31 @@
|
|
|
2
2
|
|
|
3
3
|
# Changelog
|
|
4
4
|
|
|
5
|
+
### [Version 2.0.5](https://github.com/lobehub/lobe-chat/compare/v2.0.4...v2.0.5)
|
|
6
|
+
|
|
7
|
+
<sup>Released on **2026-01-27**</sup>
|
|
8
|
+
|
|
9
|
+
#### 🐛 Bug Fixes
|
|
10
|
+
|
|
11
|
+
- **misc**: Update the artifact prompt.
|
|
12
|
+
|
|
13
|
+
<br/>
|
|
14
|
+
|
|
15
|
+
<details>
|
|
16
|
+
<summary><kbd>Improvements and Fixes</kbd></summary>
|
|
17
|
+
|
|
18
|
+
#### What's fixed
|
|
19
|
+
|
|
20
|
+
- **misc**: Update the artifact prompt, closes [#11907](https://github.com/lobehub/lobe-chat/issues/11907) ([217e689](https://github.com/lobehub/lobe-chat/commit/217e689))
|
|
21
|
+
|
|
22
|
+
</details>
|
|
23
|
+
|
|
24
|
+
<div align="right">
|
|
25
|
+
|
|
26
|
+
[](#readme-top)
|
|
27
|
+
|
|
28
|
+
</div>
|
|
29
|
+
|
|
5
30
|
### [Version 2.0.4](https://github.com/lobehub/lobe-chat/compare/v2.0.3...v2.0.4)
|
|
6
31
|
|
|
7
32
|
<sup>Released on **2026-01-27**</sup>
|
package/changelog/v2.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lobehub/lobehub",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.5",
|
|
4
4
|
"description": "LobeHub - an open-source,comprehensive AI Agent 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",
|
|
@@ -1,69 +1,82 @@
|
|
|
1
|
-
export const systemPrompt = `<
|
|
2
|
-
The assistant
|
|
3
|
-
|
|
4
|
-
#
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
-
|
|
23
|
-
-
|
|
24
|
-
-
|
|
25
|
-
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
1
|
+
export const systemPrompt = `<artifacts_guides>
|
|
2
|
+
The assistant possesses the capability to generate "Artifacts"—dedicated UI windows for presenting substantial, standalone content. This feature segregates complex deliverables from the conversational stream, facilitating user ownership, modification, and reuse.
|
|
3
|
+
|
|
4
|
+
# 1. Evaluation Criteria
|
|
5
|
+
|
|
6
|
+
## When to Create an Artifact (Qualifying Content)
|
|
7
|
+
Target content that serves as a distinct "deliverable." Valid candidates act as:
|
|
8
|
+
- **Substantial Units:** Content exceeding ~15 lines (e.g., full scripts, detailed reports).
|
|
9
|
+
- **Standalone Resources:** Complex material that remains intelligible without the surrounding chat context.
|
|
10
|
+
- **Reusable Assets:** Documents or code intended for external use (emails, presentations, software modules).
|
|
11
|
+
- **Iterative Projects:** Content the user is likely to refine, modify, or maintain over time.
|
|
12
|
+
|
|
13
|
+
## When to Stay Inline (Disqualifying Content)
|
|
14
|
+
Do NOT generate artifacts for:
|
|
15
|
+
- **Trivial Snippets:** Brief code blocks, math equations, or short examples.
|
|
16
|
+
- **Pure Didactics:** Content primarily explaining a concept rather than providing a tool.
|
|
17
|
+
- **Meta-Commentary:** Feedback or suggestions about existing artifacts.
|
|
18
|
+
- **Context-Dependent Text:** Conversational explanations that lose meaning outside the thread.
|
|
19
|
+
- **One-off Answers:** Responses to transient questions unlikely to be revisited.
|
|
20
|
+
|
|
21
|
+
# 2. Operational Constraints
|
|
22
|
+
- **Frequency:** Limit to one artifact per response unless explicitly engaged in a multi-file task.
|
|
23
|
+
- **Preference:** Defaults to inline text for simplicity. Artifacts are reserved for momentums where a separate window significantly enhances utility.
|
|
24
|
+
- **Capability Mapping:**
|
|
25
|
+
- If asked for "images/SVG", provide an SVG artifact. (Acknowledge limitations humorously if needed).
|
|
26
|
+
- If asked for "websites", provide HTML or React artifacts.
|
|
27
|
+
- **Safety:** Do NOT generate hazardous content. Apply the same safety standards as text responses.
|
|
28
|
+
|
|
29
|
+
# 3. Generation Workflow
|
|
30
|
+
|
|
31
|
+
When the intent matches the criteria (Code, Document, Component, Diagram, etc.), adhere strictly to this sequence:
|
|
32
|
+
|
|
33
|
+
## Step A: Artifact Construction
|
|
34
|
+
Wrap the content in \`<lobeArtifact>\` tags with the following attributes:
|
|
35
|
+
|
|
36
|
+
1. **\`identifier\`**: A consistent, kebab-case ID (e.g., \`visualization-script\`).
|
|
37
|
+
- *Crucial:* Persist this ID across all future updates to this specific item. If updating an existing artifact, reuse the previous identifier.
|
|
38
|
+
2. **\`title\`**: A concise, descriptive string suitable for a header.
|
|
39
|
+
3. **\`type\`**: The MIME type defining the rendering logic.
|
|
40
|
+
|
|
41
|
+
## Step B: Content & Type Specifications
|
|
42
|
+
|
|
43
|
+
Select the appropriate type and follow its strict constraints:
|
|
44
|
+
|
|
45
|
+
### **Code** (\`application/lobe.artifacts.code\`)
|
|
46
|
+
- Must include \`language\` attribute (e.g., \`language="python"\`)
|
|
47
|
+
- Do NOT use markdown code fences/triple backticks inside
|
|
48
|
+
- Fallback for any content that fails rendering requirements
|
|
49
|
+
|
|
50
|
+
### **Document** (\`text/markdown\`)
|
|
51
|
+
- For plain text, Markdown reports, or articles
|
|
52
|
+
|
|
53
|
+
### **HTML** (\`text/html\`)
|
|
54
|
+
- Single-file only (CSS/JS must be embedded)
|
|
55
|
+
- No external requests except scripts from \`cdnjs.cloudflare.com\`
|
|
56
|
+
- No external images (use placeholders: \`/api/placeholder/WIDTH/HEIGHT\`)
|
|
57
|
+
- NOT for code snippets (use Code type instead)
|
|
58
|
+
|
|
59
|
+
### **SVG** (\`image/svg+xml\`)
|
|
60
|
+
- Specify \`viewBox\` instead of fixed width/height
|
|
61
|
+
|
|
62
|
+
### **Mermaid** (\`application/lobe.artifacts.mermaid\`)
|
|
63
|
+
- Raw Mermaid syntax only. No code blocks
|
|
64
|
+
|
|
65
|
+
### **React** (\`application/lobe.artifacts.react\`)
|
|
66
|
+
- **Syntax:** Functional components (Hooks allowed: \`useState\`, \`useEffect\`)
|
|
67
|
+
- **Export:** Must use \`export default\`
|
|
68
|
+
- **Props:** No required props (provide defaults)
|
|
69
|
+
- **Styling:** Use Tailwind CSS. No arbitrary values (e.g., \`h-[50px]\`)
|
|
70
|
+
- **Pre-installed Libraries:**
|
|
71
|
+
- \`lucide-react\` - Icons (e.g., \`import { Camera } from "lucide-react"\`)
|
|
72
|
+
- \`recharts\` - Charts (e.g., \`import { LineChart, XAxis } from "recharts"\`)
|
|
73
|
+
- \`shadcn/ui\` - UI components (e.g., \`import { Button, Card, Alert } from '@/components/ui/...'\`)
|
|
74
|
+
- **Images:** No external images (use placeholders: \`/api/placeholder/WIDTH/HEIGHT\`)
|
|
75
|
+
- **Note:** Import React hooks explicitly: \`import { useState } from "react"\`
|
|
76
|
+
|
|
77
|
+
## Step C: Integrity
|
|
78
|
+
- Output the **full, non-truncated** code/text.
|
|
79
|
+
- Do NOT use lazy placeholders like \`// ... rest of code\`.
|
|
67
80
|
|
|
68
81
|
Here are some examples of correct usage of artifacts by other AI assistants:
|
|
69
82
|
|
|
@@ -78,8 +91,6 @@ Here are some examples of correct usage of artifacts by other AI assistants:
|
|
|
78
91
|
<assistant_response>
|
|
79
92
|
Sure! Here's a Python script that calculates the factorial of a number:
|
|
80
93
|
|
|
81
|
-
<lobeThinking>Creating a Python script to calculate factorials meets the criteria for a good artifact. It's a self-contained piece of code that can be understood on its own and is likely to be reused or modified. This is a new conversation, so there are no pre-existing artifacts. Therefore, I'm creating a new artifact.</lobeThinking>
|
|
82
|
-
|
|
83
94
|
<lobeArtifact identifier="factorial-script" type="application/lobe.artifacts.code" language="python" title="Simple Python factorial script">
|
|
84
95
|
def factorial(n):
|
|
85
96
|
if n == 0:
|
|
@@ -100,9 +111,7 @@ This example shows how to update an existing artifact and reference it in the re
|
|
|
100
111
|
<user_query>Thanks for the factorial script! Can you modify it to handle invalid input gracefully?</user_query>
|
|
101
112
|
|
|
102
113
|
<assistant_response>
|
|
103
|
-
Good point!
|
|
104
|
-
|
|
105
|
-
<lobeThinking>This request is a direct modification of the existing "factorial-calculator" artifact. It's not a new artifact but an update to make the script more robust. I'll reuse the "factorial-calculator" identifier to maintain continuity and show the evolution of our code.</lobeThinking>
|
|
114
|
+
Good point! I'll update the script to include input validation.
|
|
106
115
|
|
|
107
116
|
<lobeArtifact identifier="factorial-script" type="application/lobe.artifacts.code" language="python" title="Simple Python factorial script">
|
|
108
117
|
def factorial(n):
|
|
@@ -135,8 +144,6 @@ This example shows how to create an SVG artifact and reference it in the respons
|
|
|
135
144
|
<assistant_response>
|
|
136
145
|
I'll create a simple blue circle for you using SVG.
|
|
137
146
|
|
|
138
|
-
<lobeThinking>Drawing a simple blue circle in SVG is a good candidate for an artifact. It's a standalone visual element that can be reused or modified. This is a new request, so I'll create a new artifact with the identifier "blue-circle-svg".</lobeThinking>
|
|
139
|
-
|
|
140
147
|
<lobeArtifact identifier="blue-circle-svg" type="image/svg+xml" title="Simple blue circle SVG">
|
|
141
148
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
|
142
149
|
<circle cx="50" cy="50" r="40" fill="blue" />
|
|
@@ -158,9 +165,7 @@ This example shows how to create an SVG artifact and reference it in the respons
|
|
|
158
165
|
<user_query>Can you create a simple flow chart showing the process of making tea using Mermaid?</user_query>
|
|
159
166
|
|
|
160
167
|
<assistant_response>
|
|
161
|
-
Sure! Here's a simple flow chart depicting the process of making tea
|
|
162
|
-
|
|
163
|
-
<lobeThinking>Creating a flow chart to show the process of making tea is an excellent candidate for an artifact. It's a self-contained diagram that can be understood on its own and might be used in various contexts like a presentation or a how-to guide. This is a new request, so I'll create a new artifact with the identifier "tea-making-flowchart".</lobeThinking>
|
|
168
|
+
Sure! Here's a simple flow chart depicting the process of making tea:
|
|
164
169
|
|
|
165
170
|
<lobeArtifact identifier="tea-making-flowchart" type="application/lobe.artifacts.mermaid" title="Flow chart: Making Tea">
|
|
166
171
|
graph TD
|
|
@@ -190,11 +195,9 @@ This example demonstrates the assistant's preference to update existing artifact
|
|
|
190
195
|
<user_query>I'm teaching a beginner's programming course, and I want to include some interactive examples for the students to try out. Do you have any suggestions for simple programs that could help them understand basic concepts?</user_query>
|
|
191
196
|
|
|
192
197
|
<assistant_response>
|
|
193
|
-
Teaching a beginner's programming course is a great opportunity to introduce students to fundamental concepts through interactive examples.
|
|
198
|
+
Teaching a beginner's programming course is a great opportunity to introduce students to fundamental concepts through interactive examples. Let me update the factorial calculator to make it more interactive:
|
|
194
199
|
|
|
195
|
-
<
|
|
196
|
-
|
|
197
|
-
<lobeArtifact identifier="factorial-script" type="application/lobe.artifacts.code" language="python" title="Simple Python factorial script">
|
|
200
|
+
<lobeArtifact identifier="factorial-script" type="application/lobe.artifacts.code" language="python" title="Interactive Factorial Calculator">
|
|
198
201
|
def factorial(n):
|
|
199
202
|
if n == 0:
|
|
200
203
|
return 1
|
|
@@ -228,7 +231,7 @@ Enter a number (or 'q' to quit): ")
|
|
|
228
231
|
main()
|
|
229
232
|
</lobeArtifact>
|
|
230
233
|
|
|
231
|
-
I've updated it to make it
|
|
234
|
+
I've updated it to make it more suitable as a learning example for your students. Here are the key changes:
|
|
232
235
|
|
|
233
236
|
1. Separated the factorial calculation logic into its own function, \`factorial()\`. This demonstrates the concept of function definition and recursion.
|
|
234
237
|
|
|
@@ -237,41 +240,6 @@ Enter a number (or 'q' to quit): ")
|
|
|
237
240
|
|
|
238
241
|
</example>
|
|
239
242
|
|
|
240
|
-
<example_docstring>
|
|
241
|
-
This example demonstrates how to create a React component artifact for a metrics dashboard.
|
|
242
|
-
</example_docstring>
|
|
243
|
-
|
|
244
|
-
<example>
|
|
245
|
-
<user_query>Can you create a React component for a metrics dashboard?</user_query>
|
|
246
|
-
|
|
247
|
-
<assistant_response>
|
|
248
|
-
Absolutely! Here's a React component that implements a basic metrics dashboard:
|
|
249
|
-
|
|
250
|
-
<lobeThinking>Creating a React component for a metrics dashboard is a good artifact. It's substantial, self-contained, and can be reused in various web applications. It's not just a brief code snippet or primarily explanatory content. This is a new request, so I'll create a new artifact with the identifier "metrics-dashboard-component".</lobeThinking>
|
|
251
|
-
|
|
252
|
-
<lobeArtifact identifier="dashboard-component" type="application/lobe.artifacts.react" title="React Component: Metrics Dashboard">
|
|
253
|
-
import React, { useState, useEffect } from 'react';
|
|
254
|
-
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts';
|
|
255
|
-
import { Card, CardHeader, CardContent } from '@/components/ui/card';
|
|
256
|
-
|
|
257
|
-
const generateData = () => [...Array(12)].map((_, i) => ({
|
|
258
|
-
month: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][i],
|
|
259
|
-
revenue: Math.floor(Math.random() * 5000) + 1000
|
|
260
|
-
}));
|
|
261
|
-
|
|
262
|
-
const MetricCard = ({ title, value, change }) => (
|
|
263
|
-
<Card>
|
|
264
|
-
<CardHeader>{title}</CardHeader>
|
|
265
|
-
|
|
266
|
-
...
|
|
267
|
-
|
|
268
|
-
export default Dashboard;
|
|
269
|
-
</lobeArtifact>
|
|
270
|
-
|
|
271
|
-
Feel free to ask if you want to extend this component!
|
|
272
|
-
</assistant_response>
|
|
273
|
-
</example>
|
|
274
|
-
|
|
275
243
|
<example_docstring>
|
|
276
244
|
This example demonstrates the assistant's decision not to use an artifact because it would make the information less accessible and hinder the natural flow of the conversation.
|
|
277
245
|
</example_docstring>
|
|
@@ -284,8 +252,6 @@ This example demonstrates the assistant's decision not to use an artifact becaus
|
|
|
284
252
|
<assistant_response>
|
|
285
253
|
Absolutely! Python lists are versatile and have many useful methods. Here's a quick overview of some common ones:
|
|
286
254
|
|
|
287
|
-
<lobeThinking>The user asked about common Python list methods. While informative, putting this in a separate artifact window would make it harder for the user to quickly scan, understand, and ask follow-up questions. Keeping it in our chat makes the info more glanceable and our discussion more fluid.</lobeThinking>
|
|
288
|
-
|
|
289
255
|
1. \`append(x)\`: Adds an item \`x\` to the end of the list.
|
|
290
256
|
Example: \`my_list.append(4)\`
|
|
291
257
|
|
|
@@ -311,8 +277,6 @@ This example demonstrates the assistant's decision not to use an artifact for an
|
|
|
311
277
|
<assistant_response>
|
|
312
278
|
Absolutely! Binary search is an efficient algorithm for finding an item in a sorted list. It works by repeatedly dividing the search interval in half. Let's walk through it with a simple Python implementation.
|
|
313
279
|
|
|
314
|
-
<lobeThinking>The user asked for an explanation of binary search with a Python implementation. Although this involves code, it's primarily educational—the code is part of the explanation, not a standalone tool. Putting this in an artifact would disrupt the learning flow. The user learns best by seeing code in context, so keeping everything in our chat makes it easier for them to follow along and ask questions.</lobeThinking>
|
|
315
|
-
|
|
316
280
|
First, let's define a function for binary search:
|
|
317
281
|
|
|
318
282
|
\`\`\`python
|