vzcode 1.54.0 → 1.55.0

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.
Files changed (7) hide show
  1. package/dist/assets/{index-BxRNGHcB.js → index-DILO4YFE.js} +100 -100
  2. package/dist/assets/{index-L1AANcDx.css → index-GFaZu2lY.css} +1 -1
  3. package/dist/index.html +2 -2
  4. package/package.json +1 -1
  5. package/src/client/VZSidebar/AIChat/StreamingMessage.tsx +5 -0
  6. package/src/client/VZSidebar/AIChat/index.tsx +112 -105
  7. package/src/client/VZSidebar/AIChat/styles.scss +1 -0
package/dist/index.html CHANGED
@@ -20,8 +20,8 @@
20
20
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
21
21
  rel="stylesheet"
22
22
  />
23
- <script type="module" crossorigin src="/assets/index-BxRNGHcB.js"></script>
24
- <link rel="stylesheet" crossorigin href="/assets/index-L1AANcDx.css">
23
+ <script type="module" crossorigin src="/assets/index-DILO4YFE.js"></script>
24
+ <link rel="stylesheet" crossorigin href="/assets/index-GFaZu2lY.css">
25
25
  </head>
26
26
  <body>
27
27
  <div id="root"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vzcode",
3
- "version": "1.54.0",
3
+ "version": "1.55.0",
4
4
  "description": "Multiplayer code editor system",
5
5
  "main": "src/index.ts",
6
6
  "type": "module",
package/src/client/VZSidebar/AIChat/StreamingMessage.tsx CHANGED
@@ -11,6 +11,11 @@ const StreamingMessageComponent = ({
11
11
  content,
12
12
  status,
13
13
  }: StreamingMessageProps) => {
14
+ // Don't render if there's no content and no status
15
+ if (!content.trim() && !status) {
16
+ return null;
17
+ }
18
+
14
19
  return (
15
20
  <div className="ai-chat-message assistant streaming">
16
21
  {status && (
package/src/client/VZSidebar/AIChat/index.tsx CHANGED
@@ -15,6 +15,8 @@ const defaultAIChatEndpoint = '/api/ai-chat/';
15
15
 
16
16
  const DEBUG = false;
17
17
 
18
+ const showSuggestedRequests = false;
19
+
18
20
  export const AIChat = () => {
19
21
  const { aiChatMessage, setAIChatMessage } =
20
22
  useContext(VZCodeContext);
@@ -222,115 +224,120 @@ export const AIChat = () => {
222
224
  <div className="ai-chat-empty">
223
225
  <div className="ai-chat-empty-icon">✨</div>
224
226
  <h3 className="ai-chat-empty-title">
225
- Hi! I'm here to help you edit with AI.
227
+ Edit with AI
226
228
  </h3>
227
229
  <div className="ai-chat-empty-text">
228
230
  How can I help you?
229
231
  </div>
230
- <div className="ai-chat-empty-examples">
231
- {aiChatMode === 'ask' ? (
232
- <>
233
- <h4>Try asking questions like:</h4>
234
- <div className="ai-chat-suggested-prompts">
235
- <button
236
- className="ai-chat-suggested-prompt"
237
- onClick={() =>
238
- handleSendMessage(
239
- 'Explain how this works',
240
- )
241
- }
242
- >
243
- "Explain how this works"
244
- </button>
245
- <button
246
- className="ai-chat-suggested-prompt"
247
- onClick={() =>
248
- handleSendMessage(
249
- 'How could I change it so that the circles are bigger?',
250
- )
251
- }
252
- >
253
- "How could I change it so that the
254
- circles are bigger?"
255
- </button>
256
- <button
257
- className="ai-chat-suggested-prompt"
258
- onClick={() =>
259
- handleSendMessage(
260
- 'What does this function do?',
261
- )
262
- }
263
- >
264
- "What does this function do?"
265
- </button>
266
- <button
267
- className="ai-chat-suggested-prompt"
268
- onClick={() =>
269
- handleSendMessage(
270
- 'How can I make this more accessible?',
271
- )
272
- }
273
- >
274
- "How can I make this more accessible?"
275
- </button>
276
- </div>
277
- </>
278
- ) : (
279
- <>
280
- <h4>Try edit requests like these:</h4>
281
- <div className="ai-chat-suggested-prompts">
282
- <button
283
- className="ai-chat-suggested-prompt"
284
- onClick={() =>
285
- handleSendMessage(
286
- 'Change the circles to squares',
287
- )
288
- }
289
- >
290
- "Change the circles to squares"
291
- </button>
292
- <button
293
- className="ai-chat-suggested-prompt"
294
- onClick={() =>
295
- handleSendMessage(
296
- 'Add a button that toggles the animation',
297
- )
298
- }
299
- >
300
- "Add a button that toggles the
301
- animation"
302
- </button>
303
- <button
304
- className="ai-chat-suggested-prompt"
305
- onClick={() =>
306
- handleSendMessage(
307
- 'Fix the CSS so the layout is responsive',
308
- )
309
- }
310
- >
311
- "Fix the CSS so the layout is
312
- responsive"
313
- </button>
314
- <button
315
- className="ai-chat-suggested-prompt"
316
- onClick={() =>
317
- handleSendMessage(
318
- 'Refactor this function to use async/await',
319
- )
320
- }
321
- >
322
- "Refactor this function to use
323
- async/await"
324
- </button>
325
- </div>
326
- </>
327
- )}
328
- </div>
329
- <div className="ai-chat-empty-text">
330
- {aiChatMode === 'ask'
331
- ? 'Type your question below to get started!'
332
- : 'Type your edit request below to get started!'}
333
- </div>
232
+ {showSuggestedRequests && (
233
+ <div className="ai-chat-empty-examples">
234
+ {aiChatMode === 'ask' ? (
235
+ <>
236
+ <h4>Try asking questions like:</h4>
237
+ <div className="ai-chat-suggested-prompts">
238
+ <button
239
+ className="ai-chat-suggested-prompt"
240
+ onClick={() =>
241
+ handleSendMessage(
242
+ 'Explain how this works',
243
+ )
244
+ }
245
+ >
246
+ "Explain how this works"
247
+ </button>
248
+ <button
249
+ className="ai-chat-suggested-prompt"
250
+ onClick={() =>
251
+ handleSendMessage(
252
+ 'How could I change it so that the circles are bigger?',
253
+ )
254
+ }
255
+ >
256
+ "How could I change it so that the
257
+ circles are bigger?"
258
+ </button>
259
+ <button
260
+ className="ai-chat-suggested-prompt"
261
+ onClick={() =>
262
+ handleSendMessage(
263
+ 'What does this function do?',
264
+ )
265
+ }
266
+ >
267
+ "What does this function do?"
268
+ </button>
269
+ <button
270
+ className="ai-chat-suggested-prompt"
271
+ onClick={() =>
272
+ handleSendMessage(
273
+ 'How can I make this more accessible?',
274
+ )
275
+ }
276
+ >
277
+ "How can I make this more
278
+ accessible?"
279
+ </button>
280
+ </div>
281
+ </>
282
+ ) : (
283
+ <>
284
+ <h4>Try edit requests like these:</h4>
285
+ <div className="ai-chat-suggested-prompts">
286
+ <button
287
+ className="ai-chat-suggested-prompt"
288
+ onClick={() =>
289
+ handleSendMessage(
290
+ 'Change the circles to squares',
291
+ )
292
+ }
293
+ >
294
+ "Change the circles to squares"
295
+ </button>
296
+ <button
297
+ className="ai-chat-suggested-prompt"
298
+ onClick={() =>
299
+ handleSendMessage(
300
+ 'Add a button that toggles the animation',
301
+ )
302
+ }
303
+ >
304
+ "Add a button that toggles the
305
+ animation"
306
+ </button>
307
+ <button
308
+ className="ai-chat-suggested-prompt"
309
+ onClick={() =>
310
+ handleSendMessage(
311
+ 'Fix the CSS so the layout is responsive',
312
+ )
313
+ }
314
+ >
315
+ "Fix the CSS so the layout is
316
+ responsive"
317
+ </button>
318
+ <button
319
+ className="ai-chat-suggested-prompt"
320
+ onClick={() =>
321
+ handleSendMessage(
322
+ 'Refactor this function to use async/await',
323
+ )
324
+ }
325
+ >
326
+ "Refactor this function to use
327
+ async/await"
328
+ </button>
329
+ </div>
330
+ </>
331
+ )}
332
+ </div>
333
+ )}
334
+ {showSuggestedRequests && (
335
+ <div className="ai-chat-empty-text">
336
+ {aiChatMode === 'ask'
337
+ ? 'Type your question below to get started!'
338
+ : 'Type your edit request below to get started!'}
339
+ </div>
340
+ )}
334
341
  </div>
335
342
  ) : (
336
343
  <MessageList
package/src/client/VZSidebar/AIChat/styles.scss CHANGED
@@ -10,6 +10,7 @@
10
10
  display: flex;
11
11
  flex-direction: column;
12
12
  align-items: center;
13
+ justify-content: center;
13
14
  text-align: center;
14
15
  padding: 20px;
15
16
  overflow-y: auto;