Merge branch 'main' of https://github.com/onlook-dev/onlook into translation_zh

* 'main' of https://github.com/onlook-dev/onlook:
  Improve applyDiffs to handle failures robustly (onlook-dev#1663)
  Publish version v0.2.20 (onlook-dev#1662)
  Add Korean language translation file (onlook-dev#1657)
  Publish version v0.2.19 (onlook-dev#1659)
  Check port before starting project (onlook-dev#1661)
  More persistent port checking (onlook-dev#1660)
  Handle rate limited (onlook-dev#1658)

Author: 克隆（宗可龙）

apps/studio/package.json

@@ -1,7 +1,7 @@
 {
     "productName": "Onlook",
     "name": "@onlook/studio",
-    "version": "0.2.18",
+    "version": "0.2.20",
     "homepage": "https://onlook.com",
     "main": "dist-electron/main/index.js",
     "description": "The first-ever devtool for designers",

apps/studio/src/components/Modals/Subscription/PricingPage.tsx

@@ -46,7 +46,8 @@ export const SubscriptionModal = observer(() => {
         const getPlan = async () => {
             const plan = await userManager.subscription.getPlanFromServer();
             if (plan === UsagePlanType.PRO) {
-                editorEngine.chat.stream.clear();
+                editorEngine.chat.stream.clearRateLimited();
+                editorEngine.chat.stream.clearErrorMessage();
             }
             setIsCheckingOut(null);
         };

apps/studio/src/i18n.ts

@@ -2,6 +2,7 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import enTranslation from './locales/en/translation.json';
 import jaTranslation from './locales/ja/translation.json';
+import krTranslation from './locales/kr/translation.json';
 import zhTranslation from './locales/zh/translation.json';
 
 const resources = {
@@ -14,6 +15,9 @@ const resources = {
     zh: {
         translation: zhTranslation,
     },
+    kr: {
+        translation: krTranslation,
+    },
 };
 
 i18n.use(initReactI18next).init({

apps/studio/src/lib/editor/engine/chat/code.ts

@@ -3,6 +3,7 @@ import { sendAnalytics } from '@/lib/utils';
 import { CodeBlockProcessor } from '@onlook/ai';
 import { ChatMessageRole, type AssistantChatMessage, type CodeBlock } from '@onlook/models/chat';
 import type { CodeDiff } from '@onlook/models/code';
+import { toast } from '@onlook/ui/use-toast';
 import { makeAutoObservable } from 'mobx';
 import type { ChatManager } from '.';
 import type { EditorEngine } from '..';
@@ -42,7 +43,16 @@ export class ChatCodeManager {
             }
             let content = originalContent;
             for (const block of codeBlocks) {
-                content = await this.processor.applyDiff(content, block.content);
+                const result = await this.processor.applyDiff(content, block.content);
+                if (!result.success) {
+                    console.error('Failed to apply code block', block);
+                    toast({
+                        title: 'Failed to apply code block',
+                        variant: 'destructive',
+                        description: 'Please try again or prompt the AI to fix it.',
+                    });
+                }
+                content = result.text;
             }
 
             const success = await this.writeFileContent(file, content, originalContent);

apps/studio/src/lib/editor/engine/chat/conversation/index.ts

@@ -29,7 +29,7 @@ export class ConversationManager {
     }
 
     async getCurrentProjectConversations(project: Project | null) {
-        this.editorEngine.chat.stream.clear();
+        this.editorEngine.chat.stream.dispose();
         if (!project) {
             return;
         }
@@ -84,7 +84,7 @@ export class ConversationManager {
         }
         this.current = new ChatConversationImpl(this.projectId, []);
         this.conversations.push(this.current);
-        this.editorEngine.chat.stream.clear();
+        this.editorEngine.chat.stream.dispose();
         sendAnalytics('start new conversation');
     }
 
@@ -95,7 +95,7 @@ export class ConversationManager {
             return;
         }
         this.current = match;
-        this.editorEngine.chat.stream.clear();
+        this.editorEngine.chat.stream.dispose();
         sendAnalytics('select conversation');
     }
 
@@ -124,7 +124,7 @@ export class ConversationManager {
                 this.conversations.push(this.current);
             }
         }
-        this.editorEngine.chat.stream.clear();
+        this.editorEngine.chat.stream.dispose();
         sendAnalytics('delete conversation');
     }
 

apps/studio/src/lib/editor/engine/chat/index.ts

@@ -104,7 +104,7 @@ export class ChatManager {
             false,
         );
 
-        this.stream.clear();
+        this.stream.clearBeforeSend();
         this.isWaiting = true;
         const messages = this.conversation.current.getMessagesForStream();
         const res: CompletedStreamResponse | null = await this.sendStreamRequest(
@@ -116,7 +116,7 @@ export class ChatManager {
         } else {
             console.error('No stream response found');
         }
-        this.stream.clear();
+        this.stream.clearAfterSend();
         this.isWaiting = false;
         sendAnalytics('receive chat response');
     }
@@ -163,7 +163,7 @@ export class ChatManager {
     }
 
     async handleChatResponse(res: CompletedStreamResponse, requestType: StreamRequestType) {
-        if (!res || !this.conversation.current) {
+        if (!res) {
             console.error('No response found');
             return;
         }
@@ -176,6 +176,11 @@ export class ChatManager {
             return;
         }
 
+        if (!this.conversation.current) {
+            console.error('No conversation found');
+            return;
+        }
+
         if (res.usage) {
             this.conversation.current.updateTokenUsage(res.usage);
         }
@@ -247,7 +252,7 @@ export class ChatManager {
     }
 
     dispose() {
-        this.stream.clear();
+        this.stream.dispose();
         this.code?.dispose();
         this.context?.dispose();
         if (this.conversation) {

apps/studio/src/lib/editor/engine/chat/stream.ts

@@ -19,8 +19,6 @@ export class StreamResolver {
         window.api.on(MainChannels.CHAT_STREAM_PARTIAL, (args: PartialStreamResponse) => {
             const { payload } = args;
             this.resolveContent(payload);
-            this.errorMessage = null;
-            this.rateLimited = null;
         });
     }
 
@@ -65,10 +63,29 @@ export class StreamResolver {
         return null;
     }
 
-    clear() {
+    clearBeforeSend() {
         this.content = [];
         this.requestId = null;
+        this.rateLimited = null;
         this.errorMessage = null;
+    }
+
+    clearRateLimited() {
         this.rateLimited = null;
     }
+
+    clearErrorMessage() {
+        this.errorMessage = null;
+    }
+
+    clearAfterSend() {
+        this.content = [];
+    }
+
+    dispose() {
+        this.content = [];
+        this.requestId = null;
+        this.rateLimited = null;
+        this.errorMessage = null;
+    }
 }

apps/studio/src/lib/projects/create.ts

@@ -128,7 +128,7 @@ export class CreateManager {
             this.clearSlowConnectionTimer();
 
             setTimeout(() => {
-                this.projectsManager.runner?.start();
+                this.projectsManager.runner?.startIfPortAvailable();
             }, 1000);
             sendAnalytics('prompt create project success');
         } else {

apps/studio/src/lib/projects/port.ts

@@ -7,13 +7,15 @@ export class PortManager {
     isPortAvailable: boolean = true;
     suggestedPort: number = 3000;
     currentPort: number = 3000;
+    portCheckInterval: Timer | null = null;
 
     constructor(
         private runManager: RunManager,
         private project: Project,
     ) {
         makeAutoObservable(this);
         this.currentPort = this.getPortFromProject();
+        this.listenForPortChanges();
         reaction(
             () => this.runManager.state,
             () => {
@@ -24,6 +26,13 @@ export class PortManager {
         );
     }
 
+    listenForPortChanges() {
+        this.clearPortCheckInterval();
+        this.portCheckInterval = setInterval(async () => {
+            await this.checkPort();
+        }, 3000);
+    }
+
     getPortFromProject() {
         try {
             const url = this.project.url;
@@ -40,10 +49,10 @@ export class PortManager {
         this.currentPort = this.getPortFromProject();
     }
 
-    async checkPort(): Promise<void> {
+    async checkPort(): Promise<boolean> {
         if (this.runManager.state !== RunState.STOPPED) {
             this.isPortAvailable = true;
-            return;
+            return this.isPortAvailable;
         }
 
         const response: DetectedPortResults = await invokeMainChannel(
@@ -54,5 +63,17 @@ export class PortManager {
         );
         this.isPortAvailable = response.isPortAvailable;
         this.suggestedPort = response.availablePort;
+        return this.isPortAvailable;
+    }
+
+    clearPortCheckInterval() {
+        if (this.portCheckInterval) {
+            clearInterval(this.portCheckInterval);
+            this.portCheckInterval = null;
+        }
+    }
+
+    dispose() {
+        this.clearPortCheckInterval();
     }
 }

apps/studio/src/lib/projects/run.ts

@@ -68,6 +68,13 @@ export class RunManager {
         this._state = state;
     }
 
+    async startIfPortAvailable() {
+        const isPortAvailable = await this.portManager.checkPort();
+        if (isPortAvailable) {
+            this.start();
+        }
+    }
+
     async start() {
         this.state = RunState.SETTING_UP;
         this.startLoadingTimer();
@@ -196,5 +203,6 @@ export class RunManager {
             this.cleanupLoadingTimer();
         }
         await this.stop();
+        this.portManager.dispose();
     }
 }