vzcode 1.54.0 → 1.56.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 (9) hide show
  1. package/dist/assets/{index-L1AANcDx.css → index-COSAnnol.css} +1 -1
  2. package/dist/assets/{index-BxRNGHcB.js → index-Cp6YlJo2.js} +100 -100
  3. package/dist/index.html +2 -2
  4. package/package.json +1 -1
  5. package/src/client/VZSidebar/AIChat/ChatInput.tsx +5 -1
  6. package/src/client/VZSidebar/AIChat/StreamingMessage.tsx +5 -0
  7. package/src/client/VZSidebar/AIChat/index.tsx +115 -106
  8. package/src/client/VZSidebar/AIChat/styles.scss +9 -1
  9. package/src/utils/fileDiff.ts +3 -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-Cp6YlJo2.js"></script>
24
+ <link rel="stylesheet" crossorigin href="/assets/index-COSAnnol.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.56.0",
4
4
  "description": "Multiplayer code editor system",
5
5
  "main": "src/index.ts",
6
6
  "type": "module",
package/src/client/VZSidebar/AIChat/ChatInput.tsx CHANGED
@@ -50,6 +50,10 @@ const ChatInputComponent = ({
50
50
  [onSendMessage],
51
51
  );
52
52
 
53
+ const handleSendClick = useCallback(() => {
54
+ onSendMessage();
55
+ }, [onSendMessage]);
56
+
53
57
  const handleChange = useCallback(
54
58
  (event: React.ChangeEvent<HTMLTextAreaElement>) => {
55
59
  setAIChatMessage(event.target.value);
@@ -134,7 +138,7 @@ const ChatInputComponent = ({
134
138
  )}
135
139
  <Button
136
140
  variant="primary"
137
- onClick={onSendMessage}
141
+ onClick={handleSendClick}
138
142
  disabled={!aiChatMessage.trim() || isLoading}
139
143
  className="ai-chat-send-button"
140
144
  aria-label="Send message"
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);
@@ -66,13 +68,15 @@ export const AIChat = () => {
66
68
  aiChatMessage,
67
69
  );
68
70
  const messageContent = messageToSend || aiChatMessage;
71
+
69
72
  if (
70
73
  !messageContent ||
71
74
  typeof messageContent !== 'string' ||
72
75
  !messageContent.trim() ||
73
76
  isLoading
74
- )
77
+ ) {
75
78
  return;
79
+ }
76
80
 
77
81
  const currentPrompt = aiChatMessage.trim();
78
82
  setAIChatMessage('');
@@ -222,115 +226,120 @@ export const AIChat = () => {
222
226
  <div className="ai-chat-empty">
223
227
  <div className="ai-chat-empty-icon">✨</div>
224
228
  <h3 className="ai-chat-empty-title">
225
- Hi! I'm here to help you edit with AI.
229
+ Edit with AI
226
230
  </h3>
227
231
  <div className="ai-chat-empty-text">
228
232
  How can I help you?
229
233
  </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>
234
+ {showSuggestedRequests && (
235
+ <div className="ai-chat-empty-examples">
236
+ {aiChatMode === 'ask' ? (
237
+ <>
238
+ <h4>Try asking questions like:</h4>
239
+ <div className="ai-chat-suggested-prompts">
240
+ <button
241
+ className="ai-chat-suggested-prompt"
242
+ onClick={() =>
243
+ handleSendMessage(
244
+ 'Explain how this works',
245
+ )
246
+ }
247
+ >
248
+ "Explain how this works"
249
+ </button>
250
+ <button
251
+ className="ai-chat-suggested-prompt"
252
+ onClick={() =>
253
+ handleSendMessage(
254
+ 'How could I change it so that the circles are bigger?',
255
+ )
256
+ }
257
+ >
258
+ "How could I change it so that the
259
+ circles are bigger?"
260
+ </button>
261
+ <button
262
+ className="ai-chat-suggested-prompt"
263
+ onClick={() =>
264
+ handleSendMessage(
265
+ 'What does this function do?',
266
+ )
267
+ }
268
+ >
269
+ "What does this function do?"
270
+ </button>
271
+ <button
272
+ className="ai-chat-suggested-prompt"
273
+ onClick={() =>
274
+ handleSendMessage(
275
+ 'How can I make this more accessible?',
276
+ )
277
+ }
278
+ >
279
+ "How can I make this more
280
+ accessible?"
281
+ </button>
282
+ </div>
283
+ </>
284
+ ) : (
285
+ <>
286
+ <h4>Try edit requests like these:</h4>
287
+ <div className="ai-chat-suggested-prompts">
288
+ <button
289
+ className="ai-chat-suggested-prompt"
290
+ onClick={() =>
291
+ handleSendMessage(
292
+ 'Change the circles to squares',
293
+ )
294
+ }
295
+ >
296
+ "Change the circles to squares"
297
+ </button>
298
+ <button
299
+ className="ai-chat-suggested-prompt"
300
+ onClick={() =>
301
+ handleSendMessage(
302
+ 'Add a button that toggles the animation',
303
+ )
304
+ }
305
+ >
306
+ "Add a button that toggles the
307
+ animation"
308
+ </button>
309
+ <button
310
+ className="ai-chat-suggested-prompt"
311
+ onClick={() =>
312
+ handleSendMessage(
313
+ 'Fix the CSS so the layout is responsive',
314
+ )
315
+ }
316
+ >
317
+ "Fix the CSS so the layout is
318
+ responsive"
319
+ </button>
320
+ <button
321
+ className="ai-chat-suggested-prompt"
322
+ onClick={() =>
323
+ handleSendMessage(
324
+ 'Refactor this function to use async/await',
325
+ )
326
+ }
327
+ >
328
+ "Refactor this function to use
329
+ async/await"
330
+ </button>
331
+ </div>
332
+ </>
333
+ )}
334
+ </div>
335
+ )}
336
+ {showSuggestedRequests && (
337
+ <div className="ai-chat-empty-text">
338
+ {aiChatMode === 'ask'
339
+ ? 'Type your question below to get started!'
340
+ : 'Type your edit request below to get started!'}
341
+ </div>
342
+ )}
334
343
  </div>
335
344
  ) : (
336
345
  <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;
@@ -145,12 +146,19 @@
145
146
  }
146
147
 
147
148
  .ai-chat-message-content {
149
+ .diff-view .diff-files .d2h-code-linenumber {
150
+ display: none !important;
151
+ }
152
+
153
+ .d2h-code-line {
154
+ padding: 0 1em;
155
+ }
156
+
148
157
  padding: 10px 12px;
149
158
  font-size: 14px;
150
159
  line-height: 1.4;
151
160
  word-wrap: break-word;
152
161
 
153
- // Undo button styles (moved from DiffView)
154
162
  .undo-button-container {
155
163
  display: flex;
156
164
  justify-content: flex-end;
package/src/utils/fileDiff.ts CHANGED
@@ -25,6 +25,9 @@ export function generateFileUnifiedDiff(
25
25
  fileName,
26
26
  beforeContent,
27
27
  afterContent,
28
+ '',
29
+ '',
30
+ { context: 3 },
28
31
  );
29
32
 
30
33
  return unifiedDiff;