@5minds/node-red-dashboard-2-processcube-chat 0.1.1-develop-e94793-mcvyrm7g → 0.1.1-develop-3537a6-mf54lair

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.
@@ -1,110 +1,95 @@
1
1
  <script type="text/javascript">
2
2
  RED.nodes.registerType('ui-deepchat', {
3
- category: 'dashboard',
3
+ category: 'ProcessCube AI Chat',
4
4
  color: '#00D2B8',
5
5
  defaults: {
6
- group: { type: "ui-group", required: true },
7
- name: { value: "" },
6
+ group: { type: 'ui-group', required: true },
7
+ name: { value: '' },
8
8
  order: { value: 0 },
9
9
  width: { value: 6 },
10
10
  height: { value: 8 },
11
11
  // Deep Chat Konfiguration
12
- introMessage: { value: "Hello! How can I help you today?" },
13
- placeholder: { value: "Type a message..." },
14
- apiUrl: { value: "" },
15
- apiKey: { value: "" },
16
- model: { value: "gpt-3.5-turbo" },
12
+ introMessage: { value: 'Hello! How can I help you today?' },
13
+ placeholder: { value: 'Type a message...' },
14
+ model: { value: 'gpt-3.5-turbo' },
17
15
  // Features
18
- textInput: { value: true },
19
16
  speechToText: { value: false },
20
17
  camera: { value: false },
21
- microphone: { value: false },
22
18
  attachments: { value: false },
23
19
  // Styling
24
20
  avatars: { value: true },
25
21
  names: { value: true },
26
22
  timestamps: { value: false },
27
- stream: { value: false }
23
+ stream: { value: false },
28
24
  },
29
25
  inputs: 1,
30
26
  outputs: 1,
31
- icon: "ui_chat.png",
32
- paletteLabel: "deep chat",
33
- label: function() {
34
- return this.name || "Deep Chat";
27
+ icon: 'ui_chat.png',
28
+ paletteLabel: 'deep chat',
29
+ label: function () {
30
+ return this.name || 'Deep Chat';
35
31
  },
36
- labelStyle: function() {
37
- return this.name ? "node_label_italic" : "";
32
+ labelStyle: function () {
33
+ return this.name ? 'node_label_italic' : '';
38
34
  },
39
- oneditprepare: function() {
40
- $("#node-input-width").typedInput({
41
- type: "num",
42
- types: ["num"],
43
- typeField: "#node-input-width-type"
35
+ oneditprepare: function () {
36
+ $('#node-input-width').typedInput({
37
+ type: 'num',
38
+ types: ['num'],
39
+ typeField: '#node-input-width-type',
44
40
  });
45
- $("#node-input-height").typedInput({
46
- type: "num",
47
- types: ["num"],
48
- typeField: "#node-input-height-type"
41
+ $('#node-input-height').typedInput({
42
+ type: 'num',
43
+ types: ['num'],
44
+ typeField: '#node-input-height-type',
49
45
  });
50
- }
46
+ },
51
47
  });
52
48
  </script>
53
49
 
54
50
  <script type="text/html" data-template-name="ui-deepchat">
55
51
  <div class="form-row">
56
52
  <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
57
- <input type="text" id="node-input-group">
53
+ <input type="text" id="node-input-group" />
58
54
  </div>
59
-
55
+
60
56
  <div class="form-row">
61
57
  <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
62
- <input type="text" id="node-input-name" placeholder="Deep Chat">
58
+ <input type="text" id="node-input-name" placeholder="Deep Chat" />
63
59
  </div>
64
-
60
+
65
61
  <div class="form-row">
66
62
  <label for="node-input-order"><i class="fa fa-sort"></i> Order</label>
67
- <input type="number" id="node-input-order" placeholder="0" min="0">
63
+ <input type="number" id="node-input-order" placeholder="0" min="0" />
68
64
  </div>
69
-
65
+
70
66
  <div class="form-row">
71
67
  <label for="node-input-width"><i class="fa fa-resize-horizontal"></i> Width</label>
72
- <input type="hidden" id="node-input-width-type">
73
- <input type="text" id="node-input-width" placeholder="6">
68
+ <input type="hidden" id="node-input-width-type" />
69
+ <input type="text" id="node-input-width" placeholder="6" />
74
70
  </div>
75
-
71
+
76
72
  <div class="form-row">
77
73
  <label for="node-input-height"><i class="fa fa-resize-vertical"></i> Height</label>
78
- <input type="hidden" id="node-input-height-type">
79
- <input type="text" id="node-input-height" placeholder="8">
74
+ <input type="hidden" id="node-input-height-type" />
75
+ <input type="text" id="node-input-height" placeholder="8" />
80
76
  </div>
81
-
82
- <hr>
77
+
78
+ <hr />
83
79
  <h4>Chat Configuration</h4>
84
-
80
+
85
81
  <div class="form-row">
86
82
  <label for="node-input-introMessage"><i class="fa fa-comment"></i> Intro Message</label>
87
- <input type="text" id="node-input-introMessage" placeholder="Hello! How can I help you today?">
83
+ <input type="text" id="node-input-introMessage" placeholder="Hello! How can I help you today?" />
88
84
  </div>
89
-
85
+
90
86
  <div class="form-row">
91
87
  <label for="node-input-placeholder"><i class="fa fa-edit"></i> Placeholder</label>
92
- <input type="text" id="node-input-placeholder" placeholder="Type a message...">
88
+ <input type="text" id="node-input-placeholder" placeholder="Type a message..." />
93
89
  </div>
94
-
95
- <hr>
90
+
91
+ <hr />
96
92
  <h4>API Configuration</h4>
97
-
98
- <div class="form-row">
99
- <label for="node-input-apiUrl"><i class="fa fa-link"></i> API URL</label>
100
- <input type="text" id="node-input-apiUrl" placeholder="https://api.openai.com/v1/chat/completions">
101
- </div>
102
-
103
- <div class="form-row">
104
- <label for="node-input-apiKey"><i class="fa fa-key"></i> API Key</label>
105
- <input type="password" id="node-input-apiKey" placeholder="sk-...">
106
- </div>
107
-
108
93
  <div class="form-row">
109
94
  <label for="node-input-model"><i class="fa fa-cog"></i> Model</label>
110
95
  <select id="node-input-model">
@@ -112,113 +97,110 @@
112
97
  <option value="gpt-4">GPT-4</option>
113
98
  <option value="gpt-4-turbo">GPT-4 Turbo</option>
114
99
  <option value="claude-3-sonnet">Claude 3 Sonnet</option>
100
+ <option value="llama3">LLAMA 3</option>
101
+ <option value="gpt-4.1-mini">GPT-4.1 Mini</option>
102
+ <option value="llama3.2-vision">LLAMA 3.2 Vision</option>
103
+ <option value="gemma3:12b">Gemma 3</option>
104
+ <option value="qwen2.5vl">Qwen 2.5vl</option>
105
+ <option value="deepseek-r1:14b">DeepSeek-R1</option>
106
+ <option value="mistral-small3.1">Mistral 3.1 Small</option>
115
107
  <option value="custom">Custom</option>
116
108
  </select>
117
109
  </div>
118
-
119
- <hr>
110
+
111
+ <hr />
120
112
  <h4>Features</h4>
121
-
122
- <div class="form-row">
123
- <input type="checkbox" id="node-input-textInput" style="width:auto;">
124
- <label for="node-input-textInput" style="width:auto;"> Text Input</label>
125
- </div>
126
-
113
+
127
114
  <div class="form-row">
128
- <input type="checkbox" id="node-input-speechToText" style="width:auto;">
115
+ <input type="checkbox" id="node-input-speechToText" style="width:auto;" />
129
116
  <label for="node-input-speechToText" style="width:auto;"> Speech to Text</label>
130
117
  </div>
131
-
118
+
132
119
  <div class="form-row">
133
- <input type="checkbox" id="node-input-camera" style="width:auto;">
120
+ <input type="checkbox" id="node-input-camera" style="width:auto;" />
134
121
  <label for="node-input-camera" style="width:auto;"> Camera</label>
135
122
  </div>
136
-
137
- <div class="form-row">
138
- <input type="checkbox" id="node-input-microphone" style="width:auto;">
139
- <label for="node-input-microphone" style="width:auto;"> Microphone</label>
140
- </div>
141
-
123
+
142
124
  <div class="form-row">
143
- <input type="checkbox" id="node-input-attachments" style="width:auto;">
125
+ <input type="checkbox" id="node-input-attachments" style="width:auto;" />
144
126
  <label for="node-input-attachments" style="width:auto;"> File Attachments</label>
145
127
  </div>
146
-
147
- <hr>
128
+
129
+ <hr />
148
130
  <h4>Appearance</h4>
149
-
131
+
150
132
  <div class="form-row">
151
- <input type="checkbox" id="node-input-avatars" style="width:auto;">
133
+ <input type="checkbox" id="node-input-avatars" style="width:auto;" />
152
134
  <label for="node-input-avatars" style="width:auto;"> Show Avatars</label>
153
135
  </div>
154
-
136
+
155
137
  <div class="form-row">
156
- <input type="checkbox" id="node-input-names" style="width:auto;">
138
+ <input type="checkbox" id="node-input-names" style="width:auto;" />
157
139
  <label for="node-input-names" style="width:auto;"> Show Names</label>
158
140
  </div>
159
-
141
+
160
142
  <div class="form-row">
161
- <input type="checkbox" id="node-input-timestamps" style="width:auto;">
143
+ <input type="checkbox" id="node-input-timestamps" style="width:auto;" />
162
144
  <label for="node-input-timestamps" style="width:auto;"> Show Timestamps</label>
163
145
  </div>
164
-
146
+
165
147
  <div class="form-row">
166
- <input type="checkbox" id="node-input-stream" style="width:auto;">
148
+ <input type="checkbox" id="node-input-stream" style="width:auto;" />
167
149
  <label for="node-input-stream" style="width:auto;"> Stream Responses</label>
168
150
  </div>
169
151
  </script>
170
152
 
171
153
  <script type="text/html" data-help-name="ui-deepchat">
172
154
  <p>Deep Chat integration für Node-RED Dashboard 2.0</p>
173
-
155
+
174
156
  <h3>Eigenschaften</h3>
175
157
  <dl class="message-properties">
176
158
  <dt>Group <span class="property-type">ui-group</span></dt>
177
159
  <dd>Dashboard-Gruppe, zu der dieses Widget gehört</dd>
178
-
160
+
179
161
  <dt>Width/Height <span class="property-type">number</span></dt>
180
162
  <dd>Breite und Höhe des Widgets im Dashboard</dd>
181
-
163
+
182
164
  <dt>Intro Message <span class="property-type">string</span></dt>
183
165
  <dd>Willkommensnachricht beim Laden des Chats</dd>
184
-
166
+
185
167
  <dt>API Configuration <span class="property-type">object</span></dt>
186
168
  <dd>URL, API-Schlüssel und Modell für AI-Service</dd>
187
169
  </dl>
188
-
170
+
189
171
  <h3>Eingabe</h3>
190
172
  <dl class="message-properties">
191
173
  <dt>payload <span class="property-type">string | object</span></dt>
192
174
  <dd>Nachricht, die als AI-Antwort im Chat angezeigt wird</dd>
193
-
175
+
194
176
  <dt>role <span class="property-type">string</span></dt>
195
177
  <dd>"ai", "user" oder "system" - bestimmt Darstellung der Nachricht</dd>
196
-
178
+
197
179
  <dt>html <span class="property-type">boolean</span></dt>
198
180
  <dd>Wenn true, wird payload als HTML gerendert</dd>
199
-
181
+
200
182
  <dt>config <span class="property-type">object</span></dt>
201
183
  <dd>Aktualisiert Chat-Konfiguration zur Laufzeit</dd>
202
-
184
+
203
185
  <dt>clear <span class="property-type">boolean</span></dt>
204
186
  <dd>Wenn true, wird Chat-Verlauf gelöscht</dd>
205
187
  </dl>
206
-
188
+
207
189
  <h3>Ausgabe</h3>
208
190
  <dl class="message-properties">
209
191
  <dt>payload <span class="property-type">string</span></dt>
210
192
  <dd>Benutzer-Nachricht aus dem Chat</dd>
211
-
193
+
212
194
  <dt>topic <span class="property-type">string</span></dt>
213
195
  <dd>"user-message", "new-message", "clear-messages" oder "component-render"</dd>
214
-
196
+
215
197
  <dt>role <span class="property-type">string</span></dt>
216
198
  <dd>Rolle des Nachrichtensenders</dd>
217
-
199
+
218
200
  <dt>_socketId <span class="property-type">string</span></dt>
219
201
  <dd>Eindeutige ID der Dashboard-Verbindung</dd>
220
202
  </dl>
221
-
203
+
222
204
  <h3>Funktionen</h3>
223
205
  <ul>
224
206
  <li>Vollständig anpassbare AI-Chat-Oberfläche</li>
@@ -228,7 +210,10 @@
228
210
  <li>Anpassbare Themes und Styling</li>
229
211
  <li>Event-System für Deep Integration</li>
230
212
  </ul>
231
-
213
+
232
214
  <h3>Beispiel-Flow</h3>
233
- <p>Verbinden Sie den Ausgang mit einem AI-Service (OpenAI, Anthropic, etc.) und senden Sie die Antwort zurück an den Eingang.</p>
234
- </script>
215
+ <p>
216
+ Verbinden Sie den Ausgang mit einem AI-Service (OpenAI, Anthropic, etc.) und senden Sie die Antwort zurück an
217
+ den Eingang.
218
+ </p>
219
+ </script>
@@ -1,138 +1,25 @@
1
- module.exports = function(RED) {
1
+ module.exports = function (RED) {
2
2
  function UIDeepChatNode(config) {
3
3
  RED.nodes.createNode(this, config);
4
-
4
+
5
5
  const node = this;
6
+
6
7
  const group = RED.nodes.getNode(config.group);
7
-
8
+
8
9
  if (!group) {
9
- throw new Error("ui-deepchat must have a group");
10
+ throw new Error('ui-deepchat must have a group');
10
11
  }
11
-
12
- // Konfiguration für Deep Chat
13
- const deepChatConfig = {
14
- // Basic config
15
- introMessage: config.introMessage || '',
16
- placeholder: config.placeholder || 'Type a message...',
17
- // API Connection
18
- apiUrl: config.apiUrl || '',
19
- apiKey: config.apiKey || '',
20
- model: config.model || 'gpt-3.5-turbo',
21
- // Features
22
- textInput: config.textInput !== false,
23
- speechToText: config.speechToText || false,
24
- camera: config.camera || false,
25
- microphone: config.microphone || false,
26
- attachments: config.attachments || false,
27
- // Styling
28
- avatars: config.avatars || true,
29
- names: config.names || true,
30
- timestamps: config.timestamps || false,
31
- submitButtonStyles: config.submitButtonStyles || {},
32
- // Advanced
33
- stream: config.stream || false,
34
- history: config.history || []
35
- };
36
-
37
- // Event handlers für Socket-Kommunikation
12
+
38
13
  const evts = {
39
14
  onAction: true,
40
- onInput: function (msg, send) {
41
- // Input von Dashboard zu Node-RED
42
- if (msg.payload) {
43
- send(msg);
44
- }
45
- },
46
- beforeSend: function (msg) {
47
- // Daten von Node-RED zu Dashboard vorbereiten
48
- if (msg.payload) {
49
- const update = {
50
- msg: msg.payload,
51
- timestamp: new Date().toISOString(),
52
- ...msg
53
- };
54
- return { msg: update };
55
- }
56
- return { msg };
57
- },
58
- onSocket: {
59
- // Chat-Message von Frontend zu Node-RED
60
- 'chat-message': function (conn, id, msg) {
61
- node.send({
62
- payload: msg,
63
- topic: 'user-message',
64
- _socketId: conn.id
65
- });
66
- },
67
- // Antwort von Node-RED zu Frontend
68
- 'chat-response': function (conn, id, msg) {
69
- // Antwort wird automatisch an Frontend gesendet
70
- },
71
- // Deep Chat Events
72
- 'deepchat-onNewMessage': function (conn, id, data) {
73
- node.send({
74
- payload: data.message,
75
- topic: 'new-message',
76
- role: data.role,
77
- _socketId: conn.id
78
- });
79
- },
80
- 'deepchat-onClearMessages': function (conn, id, data) {
81
- node.send({
82
- payload: null,
83
- topic: 'clear-messages',
84
- _socketId: conn.id
85
- });
86
- },
87
- 'deepchat-onComponentRender': function (conn, id, data) {
88
- node.send({
89
- payload: data,
90
- topic: 'component-render',
91
- _socketId: conn.id
92
- });
93
- }
94
- }
95
15
  };
96
-
97
- // Widget bei Dashboard registrieren
98
- group.register(node, config, evts);
99
-
100
- // Node-RED Input Handler
101
- node.on('input', function(msg) {
102
- // Nachricht an Dashboard senden
103
- if (msg.payload) {
104
- const update = {
105
- message: msg.payload,
106
- role: msg.role || 'ai',
107
- html: msg.html || false,
108
- files: msg.files || [],
109
- timestamp: new Date().toISOString()
110
- };
111
-
112
- // An alle verbundenen Clients senden
113
- group.emit('deepchat-newMessage', node.id, update);
114
- }
115
-
116
- // Konfiguration updaten
117
- if (msg.config) {
118
- const configUpdate = {
119
- ...deepChatConfig,
120
- ...msg.config
121
- };
122
- group.emit('deepchat-updateConfig', node.id, configUpdate);
123
- }
124
-
125
- // Chat löschen
126
- if (msg.clear === true) {
127
- group.emit('deepchat-clearMessages', node.id, {});
128
- }
129
- });
130
-
131
- // Cleanup
132
- node.on('close', function() {
16
+
17
+ group.register(node, { ...config, passthru: false }, evts);
18
+
19
+ node.on('close', function () {
133
20
  group.deregister(node);
134
21
  });
135
22
  }
136
-
137
- RED.nodes.registerType("ui-deepchat", UIDeepChatNode);
138
- };
23
+
24
+ RED.nodes.registerType('ui-deepchat', UIDeepChatNode);
25
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@5minds/node-red-dashboard-2-processcube-chat",
3
- "version": "0.1.1-develop-e94793-mcvyrm7g",
3
+ "version": "0.1.1-develop-3537a6-mf54lair",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {