@hsafa/ui-sdk 0.1.3 → 0.1.4
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/dist/index.cjs +18 -72
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +438 -43
- package/dist/index.d.ts +438 -43
- package/dist/index.js +18 -72
- package/dist/index.js.map +1 -1
- package/examples/nested-chat-example.tsx +61 -0
- package/package.json +5 -1
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HsafaProvider, HsafaChat } from '@hsafa/ui-sdk';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Example demonstrating nested HsafaChat components.
|
|
6
|
+
*
|
|
7
|
+
* Scenario:
|
|
8
|
+
* - Outer HsafaChat wraps the entire website/app (for general questions)
|
|
9
|
+
* - Inner HsafaChat wraps a specific component (for component-specific help)
|
|
10
|
+
*
|
|
11
|
+
* Result:
|
|
12
|
+
* - Only the innermost (most specific) chat panel will be displayed
|
|
13
|
+
* - The outer chat panel is automatically hidden when inner chat exists
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
function App() {
|
|
17
|
+
return (
|
|
18
|
+
<HsafaProvider baseUrl="http://localhost:8000" apiKey="your-api-key">
|
|
19
|
+
{/* Outer HsafaChat - wraps the whole website */}
|
|
20
|
+
<HsafaChat
|
|
21
|
+
agentId="general-agent"
|
|
22
|
+
title="General Help"
|
|
23
|
+
placeholder="Ask about anything..."
|
|
24
|
+
>
|
|
25
|
+
<div style={{ padding: '40px' }}>
|
|
26
|
+
<h1>My Website</h1>
|
|
27
|
+
<p>This is the main content of your website.</p>
|
|
28
|
+
|
|
29
|
+
{/* Some component that needs specific help */}
|
|
30
|
+
<SpecificComponent />
|
|
31
|
+
</div>
|
|
32
|
+
</HsafaChat>
|
|
33
|
+
</HsafaProvider>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function SpecificComponent() {
|
|
38
|
+
return (
|
|
39
|
+
<div style={{
|
|
40
|
+
border: '2px solid #333',
|
|
41
|
+
padding: '20px',
|
|
42
|
+
marginTop: '20px',
|
|
43
|
+
borderRadius: '8px'
|
|
44
|
+
}}>
|
|
45
|
+
{/* Inner HsafaChat - wraps only this specific component */}
|
|
46
|
+
<HsafaChat
|
|
47
|
+
agentId="product-agent"
|
|
48
|
+
title="Product Help"
|
|
49
|
+
placeholder="Ask about this product..."
|
|
50
|
+
>
|
|
51
|
+
<div>
|
|
52
|
+
<h2>Product Details</h2>
|
|
53
|
+
<p>This is a specific product component with its own chat assistant.</p>
|
|
54
|
+
<p><strong>Only this chat panel will be shown, not the outer one!</strong></p>
|
|
55
|
+
</div>
|
|
56
|
+
</HsafaChat>
|
|
57
|
+
</div>
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export default App;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hsafa/ui-sdk",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"description": "React SDK for integrating AI agents built with HSAFA AI Agent Studio",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -105,5 +105,9 @@
|
|
|
105
105
|
"homepage": "https://github.com/husamabusafa/hsafa/tree/main/sdk#readme",
|
|
106
106
|
"bugs": {
|
|
107
107
|
"url": "https://github.com/husamabusafa/hsafa/issues"
|
|
108
|
+
},
|
|
109
|
+
"dependencies": {
|
|
110
|
+
"lucide-react": "^0.509.0",
|
|
111
|
+
"mermaid": "^11.4.0"
|
|
108
112
|
}
|
|
109
113
|
}
|