@5minds/node-red-dashboard-2-processcube-chat 0.1.1-add-functionality-5f8f20-mde6na5h
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 +1 -0
- package/nodes/ui-deepchat.html +212 -0
- package/nodes/ui-deepchat.js +25 -0
- package/package.json +47 -0
- package/resources/ui-deepchat.umd.js +273 -0
- package/resources/ui-deepchat.umd.js.map +1 -0
- package/ui/components/UIDeepChat.vue +302 -0
- package/ui/index.js +2 -0
package/README.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
# node-red-dashboard-2-processcube-chat
|
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
<script type="text/javascript">
|
|
2
|
+
RED.nodes.registerType('ui-deepchat', {
|
|
3
|
+
category: 'dashboard',
|
|
4
|
+
color: '#00D2B8',
|
|
5
|
+
defaults: {
|
|
6
|
+
group: { type: 'ui-group', required: true },
|
|
7
|
+
name: { value: '' },
|
|
8
|
+
order: { value: 0 },
|
|
9
|
+
width: { value: 6 },
|
|
10
|
+
height: { value: 8 },
|
|
11
|
+
// Deep Chat Konfiguration
|
|
12
|
+
introMessage: { value: 'Hello! How can I help you today?' },
|
|
13
|
+
placeholder: { value: 'Type a message...' },
|
|
14
|
+
model: { value: 'gpt-3.5-turbo' },
|
|
15
|
+
// Features
|
|
16
|
+
speechToText: { value: false },
|
|
17
|
+
camera: { value: false },
|
|
18
|
+
attachments: { value: false },
|
|
19
|
+
// Styling
|
|
20
|
+
avatars: { value: true },
|
|
21
|
+
names: { value: true },
|
|
22
|
+
timestamps: { value: false },
|
|
23
|
+
stream: { value: false },
|
|
24
|
+
},
|
|
25
|
+
inputs: 1,
|
|
26
|
+
outputs: 1,
|
|
27
|
+
icon: 'ui_chat.png',
|
|
28
|
+
paletteLabel: 'deep chat',
|
|
29
|
+
label: function () {
|
|
30
|
+
return this.name || 'Deep Chat';
|
|
31
|
+
},
|
|
32
|
+
labelStyle: function () {
|
|
33
|
+
return this.name ? 'node_label_italic' : '';
|
|
34
|
+
},
|
|
35
|
+
oneditprepare: function () {
|
|
36
|
+
$('#node-input-width').typedInput({
|
|
37
|
+
type: 'num',
|
|
38
|
+
types: ['num'],
|
|
39
|
+
typeField: '#node-input-width-type',
|
|
40
|
+
});
|
|
41
|
+
$('#node-input-height').typedInput({
|
|
42
|
+
type: 'num',
|
|
43
|
+
types: ['num'],
|
|
44
|
+
typeField: '#node-input-height-type',
|
|
45
|
+
});
|
|
46
|
+
},
|
|
47
|
+
});
|
|
48
|
+
</script>
|
|
49
|
+
|
|
50
|
+
<script type="text/html" data-template-name="ui-deepchat">
|
|
51
|
+
<div class="form-row">
|
|
52
|
+
<label for="node-input-group"><i class="fa fa-table"></i> Group</label>
|
|
53
|
+
<input type="text" id="node-input-group" />
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<div class="form-row">
|
|
57
|
+
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
|
|
58
|
+
<input type="text" id="node-input-name" placeholder="Deep Chat" />
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<div class="form-row">
|
|
62
|
+
<label for="node-input-order"><i class="fa fa-sort"></i> Order</label>
|
|
63
|
+
<input type="number" id="node-input-order" placeholder="0" min="0" />
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div class="form-row">
|
|
67
|
+
<label for="node-input-width"><i class="fa fa-resize-horizontal"></i> Width</label>
|
|
68
|
+
<input type="hidden" id="node-input-width-type" />
|
|
69
|
+
<input type="text" id="node-input-width" placeholder="6" />
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<div class="form-row">
|
|
73
|
+
<label for="node-input-height"><i class="fa fa-resize-vertical"></i> Height</label>
|
|
74
|
+
<input type="hidden" id="node-input-height-type" />
|
|
75
|
+
<input type="text" id="node-input-height" placeholder="8" />
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<hr />
|
|
79
|
+
<h4>Chat Configuration</h4>
|
|
80
|
+
|
|
81
|
+
<div class="form-row">
|
|
82
|
+
<label for="node-input-introMessage"><i class="fa fa-comment"></i> Intro Message</label>
|
|
83
|
+
<input type="text" id="node-input-introMessage" placeholder="Hello! How can I help you today?" />
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<div class="form-row">
|
|
87
|
+
<label for="node-input-placeholder"><i class="fa fa-edit"></i> Placeholder</label>
|
|
88
|
+
<input type="text" id="node-input-placeholder" placeholder="Type a message..." />
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<hr />
|
|
92
|
+
<h4>API Configuration</h4>
|
|
93
|
+
<div class="form-row">
|
|
94
|
+
<label for="node-input-model"><i class="fa fa-cog"></i> Model</label>
|
|
95
|
+
<select id="node-input-model">
|
|
96
|
+
<option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
|
|
97
|
+
<option value="gpt-4">GPT-4</option>
|
|
98
|
+
<option value="gpt-4-turbo">GPT-4 Turbo</option>
|
|
99
|
+
<option value="claude-3-sonnet">Claude 3 Sonnet</option>
|
|
100
|
+
<option value="custom">Custom</option>
|
|
101
|
+
</select>
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
<hr />
|
|
105
|
+
<h4>Features</h4>
|
|
106
|
+
|
|
107
|
+
<div class="form-row">
|
|
108
|
+
<input type="checkbox" id="node-input-speechToText" style="width:auto;" />
|
|
109
|
+
<label for="node-input-speechToText" style="width:auto;"> Speech to Text</label>
|
|
110
|
+
</div>
|
|
111
|
+
|
|
112
|
+
<div class="form-row">
|
|
113
|
+
<input type="checkbox" id="node-input-camera" style="width:auto;" />
|
|
114
|
+
<label for="node-input-camera" style="width:auto;"> Camera</label>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<div class="form-row">
|
|
118
|
+
<input type="checkbox" id="node-input-attachments" style="width:auto;" />
|
|
119
|
+
<label for="node-input-attachments" style="width:auto;"> File Attachments</label>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<hr />
|
|
123
|
+
<h4>Appearance</h4>
|
|
124
|
+
|
|
125
|
+
<div class="form-row">
|
|
126
|
+
<input type="checkbox" id="node-input-avatars" style="width:auto;" />
|
|
127
|
+
<label for="node-input-avatars" style="width:auto;"> Show Avatars</label>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<div class="form-row">
|
|
131
|
+
<input type="checkbox" id="node-input-names" style="width:auto;" />
|
|
132
|
+
<label for="node-input-names" style="width:auto;"> Show Names</label>
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
<div class="form-row">
|
|
136
|
+
<input type="checkbox" id="node-input-timestamps" style="width:auto;" />
|
|
137
|
+
<label for="node-input-timestamps" style="width:auto;"> Show Timestamps</label>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<div class="form-row">
|
|
141
|
+
<input type="checkbox" id="node-input-stream" style="width:auto;" />
|
|
142
|
+
<label for="node-input-stream" style="width:auto;"> Stream Responses</label>
|
|
143
|
+
</div>
|
|
144
|
+
</script>
|
|
145
|
+
|
|
146
|
+
<script type="text/html" data-help-name="ui-deepchat">
|
|
147
|
+
<p>Deep Chat integration für Node-RED Dashboard 2.0</p>
|
|
148
|
+
|
|
149
|
+
<h3>Eigenschaften</h3>
|
|
150
|
+
<dl class="message-properties">
|
|
151
|
+
<dt>Group <span class="property-type">ui-group</span></dt>
|
|
152
|
+
<dd>Dashboard-Gruppe, zu der dieses Widget gehört</dd>
|
|
153
|
+
|
|
154
|
+
<dt>Width/Height <span class="property-type">number</span></dt>
|
|
155
|
+
<dd>Breite und Höhe des Widgets im Dashboard</dd>
|
|
156
|
+
|
|
157
|
+
<dt>Intro Message <span class="property-type">string</span></dt>
|
|
158
|
+
<dd>Willkommensnachricht beim Laden des Chats</dd>
|
|
159
|
+
|
|
160
|
+
<dt>API Configuration <span class="property-type">object</span></dt>
|
|
161
|
+
<dd>URL, API-Schlüssel und Modell für AI-Service</dd>
|
|
162
|
+
</dl>
|
|
163
|
+
|
|
164
|
+
<h3>Eingabe</h3>
|
|
165
|
+
<dl class="message-properties">
|
|
166
|
+
<dt>payload <span class="property-type">string | object</span></dt>
|
|
167
|
+
<dd>Nachricht, die als AI-Antwort im Chat angezeigt wird</dd>
|
|
168
|
+
|
|
169
|
+
<dt>role <span class="property-type">string</span></dt>
|
|
170
|
+
<dd>"ai", "user" oder "system" - bestimmt Darstellung der Nachricht</dd>
|
|
171
|
+
|
|
172
|
+
<dt>html <span class="property-type">boolean</span></dt>
|
|
173
|
+
<dd>Wenn true, wird payload als HTML gerendert</dd>
|
|
174
|
+
|
|
175
|
+
<dt>config <span class="property-type">object</span></dt>
|
|
176
|
+
<dd>Aktualisiert Chat-Konfiguration zur Laufzeit</dd>
|
|
177
|
+
|
|
178
|
+
<dt>clear <span class="property-type">boolean</span></dt>
|
|
179
|
+
<dd>Wenn true, wird Chat-Verlauf gelöscht</dd>
|
|
180
|
+
</dl>
|
|
181
|
+
|
|
182
|
+
<h3>Ausgabe</h3>
|
|
183
|
+
<dl class="message-properties">
|
|
184
|
+
<dt>payload <span class="property-type">string</span></dt>
|
|
185
|
+
<dd>Benutzer-Nachricht aus dem Chat</dd>
|
|
186
|
+
|
|
187
|
+
<dt>topic <span class="property-type">string</span></dt>
|
|
188
|
+
<dd>"user-message", "new-message", "clear-messages" oder "component-render"</dd>
|
|
189
|
+
|
|
190
|
+
<dt>role <span class="property-type">string</span></dt>
|
|
191
|
+
<dd>Rolle des Nachrichtensenders</dd>
|
|
192
|
+
|
|
193
|
+
<dt>_socketId <span class="property-type">string</span></dt>
|
|
194
|
+
<dd>Eindeutige ID der Dashboard-Verbindung</dd>
|
|
195
|
+
</dl>
|
|
196
|
+
|
|
197
|
+
<h3>Funktionen</h3>
|
|
198
|
+
<ul>
|
|
199
|
+
<li>Vollständig anpassbare AI-Chat-Oberfläche</li>
|
|
200
|
+
<li>Unterstützung für Text, Sprache, Bilder und Dateien</li>
|
|
201
|
+
<li>Streaming-Antworten für Echtzeit-AI</li>
|
|
202
|
+
<li>Multi-Modal Input (Text, Voice, Camera)</li>
|
|
203
|
+
<li>Anpassbare Themes und Styling</li>
|
|
204
|
+
<li>Event-System für Deep Integration</li>
|
|
205
|
+
</ul>
|
|
206
|
+
|
|
207
|
+
<h3>Beispiel-Flow</h3>
|
|
208
|
+
<p>
|
|
209
|
+
Verbinden Sie den Ausgang mit einem AI-Service (OpenAI, Anthropic, etc.) und senden Sie die Antwort zurück an
|
|
210
|
+
den Eingang.
|
|
211
|
+
</p>
|
|
212
|
+
</script>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
module.exports = function (RED) {
|
|
2
|
+
function UIDeepChatNode(config) {
|
|
3
|
+
RED.nodes.createNode(this, config);
|
|
4
|
+
|
|
5
|
+
const node = this;
|
|
6
|
+
|
|
7
|
+
const group = RED.nodes.getNode(config.group);
|
|
8
|
+
|
|
9
|
+
if (!group) {
|
|
10
|
+
throw new Error('ui-deepchat must have a group');
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const evts = {
|
|
14
|
+
onAction: true,
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
group.register(node, { ...config, passthru: false }, evts);
|
|
18
|
+
|
|
19
|
+
node.on('close', function () {
|
|
20
|
+
group.deregister(node);
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
RED.nodes.registerType('ui-deepchat', UIDeepChatNode);
|
|
25
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@5minds/node-red-dashboard-2-processcube-chat",
|
|
3
|
+
"version": "0.1.1-add-functionality-5f8f20-mde6na5h",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"build": "vite build",
|
|
8
|
+
"build:dev": "NODE_ENV=development vite build"
|
|
9
|
+
},
|
|
10
|
+
"exports": {
|
|
11
|
+
"import": "./resources/ui-deepchat.esm.js",
|
|
12
|
+
"require": "./resources/ui-deepchat.umd.js"
|
|
13
|
+
},
|
|
14
|
+
"files": [
|
|
15
|
+
"dist/*",
|
|
16
|
+
"nodes/*",
|
|
17
|
+
"ui/*",
|
|
18
|
+
"resources/*"
|
|
19
|
+
],
|
|
20
|
+
"node-red": {
|
|
21
|
+
"version": ">=3.0.0",
|
|
22
|
+
"nodes": {
|
|
23
|
+
"ui-dynamic-form": "nodes/ui-deepchat.js"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"node-red-dashboard-2": {
|
|
27
|
+
"version": "1.0.0",
|
|
28
|
+
"widgets": {
|
|
29
|
+
"ui-deepchat": {
|
|
30
|
+
"output": "ui-deepchat.umd.js",
|
|
31
|
+
"component": "UIDeepChat"
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"dependencies": {
|
|
36
|
+
"deep-chat": "^2.2.2",
|
|
37
|
+
"vue": "^3.3.8",
|
|
38
|
+
"vuex": "^4.1.0"
|
|
39
|
+
},
|
|
40
|
+
"devDependencies": {
|
|
41
|
+
"@vitejs/plugin-vue": "^4.5.0",
|
|
42
|
+
"vite": "^5.0.13",
|
|
43
|
+
"vite-plugin-css-injected-by-js": "^3.3.0"
|
|
44
|
+
},
|
|
45
|
+
"author": "Robin Lenz",
|
|
46
|
+
"license": "MIT"
|
|
47
|
+
}
|