Translate chat setup and code panel strings

packages/vue/src/i18n/messages.ts

@@ -149,6 +149,14 @@ export const dialogMessages = i18n('dialogs', {
   localVariables: 'Local variables',
   noVariableCollections: 'No variable collections',
   selectLayerForJSX: 'Select a layer to see its JSX code',
+  connectAIProvider: 'Connect an AI provider to start chatting.',
+  connect: 'Connect',
+  getAPIKey: params('Get an {provider} API key →'),
+  oneKeyManyModels: 'One key for 100+ models from all providers.',
+  describeChange: 'Describe a change…',
+  describeCreateOrChange: 'Describe what you want to create or change.',
+  stopGenerating: 'Stop generating',
+  sendMessage: 'Send message',
   search: 'Search…',
   noResults: 'No results',
   share: 'Share'

packages/vue/src/locales/ru.json

@@ -130,6 +130,14 @@
     "localVariables": "Локальные переменные",
     "noVariableCollections": "Нет коллекций переменных",
     "selectLayerForJSX": "Выберите слой, чтобы увидеть его JSX-код",
+    "connectAIProvider": "Подключите AI-провайдера, чтобы начать чат.",
+    "connect": "Подключить",
+    "getAPIKey": "Получить API-ключ {provider} →",
+    "oneKeyManyModels": "Один ключ для 100+ моделей от разных провайдеров.",
+    "describeChange": "Опишите изменение…",
+    "describeCreateOrChange": "Опишите, что вы хотите создать или изменить.",
+    "stopGenerating": "Остановить генерацию",
+    "sendMessage": "Отправить сообщение",
     "search": "Поиск…",
     "noResults": "Ничего не найдено",
     "share": "Поделиться"

src/components/ChatPanel.vue

@@ -10,6 +10,7 @@ import ChatInput from '@/components/chat/ChatInput.vue'
 import ChatMessage from '@/components/chat/ChatMessage.vue'
 import ProviderSetup from '@/components/chat/ProviderSetup.vue'
 import { useAIChat } from '@/composables/use-chat'
+import { useI18n } from '@open-pencil/vue'
 
 import type { Chat } from '@ai-sdk/vue'
 import type { UIMessage } from 'ai'
@@ -17,6 +18,7 @@ import type { UIMessage } from 'ai'
 const IS_DEV = import.meta.env.DEV
 
 const { isConfigured, ensureChat, resetChat } = useAIChat()
+const { dialogs } = useI18n()
 
 const chat = ref<Chat<UIMessage> | null>(null)
 
@@ -120,7 +122,7 @@ function handleClearChat() {
             class="flex h-full flex-col items-center justify-center gap-3 text-muted"
           >
             <icon-lucide-message-circle class="size-8 opacity-50" />
-            <p class="text-center text-xs">Describe what you want to create or change.</p>
+            <p class="text-center text-xs">{{ dialogs.describeCreateOrChange }}</p>
           </div>
 
           <!-- Messages -->

src/components/chat/ChatInput.vue

@@ -8,10 +8,12 @@ import Tip from '@/components/ui/Tip.vue'
 import { uiButton } from '@/components/ui/button'
 import { uiInput } from '@/components/ui/input'
 import { useAIChat } from '@/composables/use-chat'
+import { useI18n } from '@open-pencil/vue'
 
 import { ACP_AGENTS } from '@open-pencil/core'
 
 const { providerID, providerDef, modelID, customModelID } = useAIChat()
+const { dialogs } = useI18n()
 
 const { status } = defineProps<{
   status: 'ready' | 'submitted' | 'streaming' | 'error'
@@ -83,14 +85,14 @@ function handleSubmit(e: Event) {
           v-model="input"
           type="text"
           data-test-id="chat-input"
-          placeholder="Describe a change…"
+          :placeholder="dialogs.describeChange"
           :class="uiInput({ ui: { base: 'min-w-0 flex-1 placeholder:text-muted' } })"
           :disabled="isStreaming"
           @paste.stop
           @copy.stop
           @cut.stop
         />
-        <Tip v-if="isStreaming" label="Stop generating">
+        <Tip v-if="isStreaming" :label="dialogs.stopGenerating">
           <button
             type="button"
             data-test-id="chat-stop-button"
@@ -107,7 +109,7 @@ function handleSubmit(e: Event) {
             <icon-lucide-square class="size-3" />
           </button>
         </Tip>
-        <Tip v-else label="Send message">
+        <Tip v-else :label="dialogs.sendMessage">
           <button
             type="submit"
             data-test-id="chat-send-button"

src/components/chat/ProviderSetup.vue

@@ -5,8 +5,10 @@ import ProviderSelectField from '@/components/chat/ProviderSelectField.vue'
 import { uiInput } from '@/components/ui/input'
 import { useAIChat } from '@/composables/use-chat'
 import { ACP_AGENTS } from '@open-pencil/core'
+import { useI18n } from '@open-pencil/vue'
 
 const { providerID, providerDef, setAPIKey, customBaseURL, customModelID } = useAIChat()
+const { dialogs } = useI18n()
 
 const isACP = computed(() => providerID.value.startsWith('acp:'))
 const acpAgent = computed(() => {
@@ -36,7 +38,7 @@ function save() {
 <template>
   <div data-test-id="provider-setup" class="flex flex-1 flex-col items-center justify-center px-6">
     <icon-lucide-sparkles class="mb-3 size-7 text-muted" />
-    <p class="mb-5 text-center text-xs text-muted">Connect an AI provider to start chatting.</p>
+    <p class="mb-5 text-center text-xs text-muted">{{ dialogs.connectAIProvider }}</p>
 
     <form v-if="!isACP" class="flex w-full flex-col gap-2" @submit.prevent="save">
       <ProviderSelectField test-id="provider-selector" />
@@ -75,7 +77,7 @@ function save() {
         class="mt-1 w-full rounded bg-accent py-1.5 text-xs font-medium text-white hover:bg-accent/90"
         :disabled="!keyInput.trim()"
       >
-        Connect
+        {{ dialogs.connect }}
       </button>
     </form>
 
@@ -99,14 +101,14 @@ function save() {
       data-test-id="api-key-get-link"
       class="mt-2.5 text-[10px] text-muted underline hover:text-surface"
     >
-      Get an {{ providerDef.name }} API key →
+      {{ dialogs.getAPIKey({ provider: providerDef.name }) }}
     </a>
 
     <p
       v-if="providerID === 'openrouter'"
       class="mt-3 text-center text-[10px] leading-relaxed text-muted/50"
     >
-      One key for 100+ models from all providers.
+      {{ dialogs.oneKeyManyModels }}
     </p>
   </div>
 </template>