feat: enhance AI agent panel with internationalization and UI improvements

- Added support for internationalization using react-intl, including dynamic locale handling and translation files for English and German.
- Updated AI agent panel configuration to set the default width to 362 pixels.
- Improved loading state management in the AI agent iframe with a loading overlay.
- Enhanced UI components with new Icon, IconButton, Button, and Tag components for better user interaction.
- Updated documentation to reflect new features and usage examples.

Author: maksimzinchuk

.serena/memories/virto-oz-chatbot-implementation.md

@@ -10,6 +10,8 @@ A React-based AI chatbot application designed to be embedded as an iframe in vc-
 - **Validation**: Zod 4.1
 - **Streaming**: Streamdown 1.6 (markdown streaming)
 - **Virtual List**: @tanstack/react-virtual 3.13
+- **i18n**: react-intl (IntlProvider with dynamic locale)
+- **Icons**: lucide-react
 
 ## File Structure
 ```
@@ -57,6 +59,19 @@ chatbot/src/
     │   └── ui.ts              # UI constants
     ├── utils/
     │   └── markdown.ts        # Markdown utilities
+    ├── i18n/
+    │   ├── index.ts           # IntlProvider component export
+    │   ├── messages.ts        # Message loader with flattenMessages
+    │   └── locales/
+    │       ├── en.json        # English translations (nested JSON)
+    │       └── de.json        # German translations (nested JSON)
+    ├── ui/
+    │   ├── Icon.tsx           # Icon component (lucide-react wrapper)
+    │   ├── IconButton.tsx     # Icon button component
+    │   ├── Button.tsx         # Button component
+    │   ├── Tag.tsx            # Tag component
+    │   ├── Menu.tsx           # Menu component
+    │   └── index.ts           # UI kit exports
     └── components/
         ├── ErrorBoundary.tsx  # Error boundary
         ├── ErrorToast.tsx     # Error toast
@@ -272,6 +287,48 @@ export function getTargetOrigin(parentOrigin: string | null): string {
 - Accessed via `getAuthToken()` secure getter
 - Cookie-based auth is primary - token is optional
 
+### UI Kit (shared/ui)
+
+Centralized UI component library with consistent styling:
+
+#### Icon
+Wrapper for lucide-react icons with size presets:
+```typescript
+import { Icon } from "../shared/ui";
+import { Pencil } from "lucide-react";
+
+<Icon icon={Pencil} size="md" className="text-neutrals-500" />
+// Sizes: xs (12px), sm (14px), md (16px), lg (20px), xl (24px)
+```
+
+#### IconButton
+Button component for icon-only actions:
+```typescript
+<IconButton
+  size="md"           // sm, md, lg
+  variant="filled"    // ghost, filled, primary, danger
+  onClick={handleClick}
+>
+  <Icon icon={Clock} size="md" />
+</IconButton>
+```
+
+#### Button
+Standard button component:
+```typescript
+<Button variant="primary" size="md" onClick={handleClick}>
+  Submit
+</Button>
+```
+
+#### Tag
+Tag/chip component for labels:
+```typescript
+<Tag variant="default" size="md" onClick={handleClick}>
+  +3
+</Tag>
+```
+
 ### UI Components
 
 #### ChatContainer
@@ -381,6 +438,94 @@ const rateLimiter = useRateLimiter();
 // rateLimiter.retryAfterMs
 ```
 
+### Internationalization (i18n)
+
+#### Structure
+Translation files use nested JSON format with camelCase keys:
+```json
+// locales/en.json
+{
+  "chat": {
+    "header": {
+      "newChat": "New chat",
+      "history": "Chat history",
+      "expandSessions": "Expand sessions",
+      "collapseSessions": "Collapse sessions"
+    },
+    "input": {
+      "placeholder": {
+        "default": "Search something",
+        "withContext": "Type something"
+      },
+      "sendMessage": "Send message",
+      "stopGenerating": "Stop generating"
+    },
+    "messages": {
+      "errorOccurred": "An error occurred",
+      "retry": "Retry{count, plural, =0 {} other { ({count})}}"
+    }
+  }
+}
+```
+
+#### Flattening for react-intl
+The `flattenMessages()` function converts nested JSON to dot-notation keys:
+```typescript
+// messages.ts
+function flattenMessages(nestedMessages, prefix = ""): Record<string, string> {
+  return Object.entries(nestedMessages).reduce((result, [key, value]) => {
+    const newKey = prefix ? `${prefix}.${key}` : key;
+    if (typeof value === "string") {
+      result[newKey] = value;
+    } else if (typeof value === "object" && value !== null) {
+      Object.assign(result, flattenMessages(value, newKey));
+    }
+    return result;
+  }, {});
+}
+
+// Result: { "chat.header.newChat": "New chat", ... }
+```
+
+#### Usage in Components
+```typescript
+import { useIntl } from "react-intl";
+
+function ChatHeader() {
+  const intl = useIntl();
+  
+  return (
+    <IconButton
+      aria-label={intl.formatMessage({ id: "chat.header.newChat" })}
+    >
+      <Icon icon={Pencil} />
+    </IconButton>
+  );
+}
+```
+
+#### IntlProvider Setup
+```typescript
+// App.tsx
+import { IntlProvider } from "./shared/i18n";
+
+export function App() {
+  const orchestrator = useChatOrchestrator();
+  
+  return (
+    <IntlProvider locale={orchestrator.locale}>
+      <ChatContainer ... />
+    </IntlProvider>
+  );
+}
+```
+
+#### Supported Locales
+- `en` - English (default)
+- `de` - German
+
+Locale is received from shell via INIT_CONTEXT PostMessage.
+
 ### Package Configuration
 ```json
 {

commitlint.config.ts

@@ -8,6 +8,7 @@ const Configuration: UserConfig = {
   rules: {
     "subject-case": [2, "never", ["upper-case", "pascal-case", "start-case"]],
     "footer-max-line-length": [RuleConfigSeverity.Error, "always", 200] as const,
+    "body-max-line-length": [RuleConfigSeverity.Error, "always", 400] as const,
     "type-enum": [
       2,
       "always",

framework/core/plugins/ai-agent/components/VcAiAgentPanel.vue

@@ -43,15 +43,15 @@ if (!aiAgentService) {
 
 // Destructure service properties
 const config = computed(
-  () => aiAgentService?.config.value ?? { url: "", title: "AI Assistant", width: 360, expandedWidth: 500 },
+  () => aiAgentService?.config.value ?? { url: "", title: "AI Assistant", width: 362, expandedWidth: 500 },
 );
 const isOpen = computed(() => aiAgentService?.isOpen.value ?? false);
 const isExpanded = computed(() => aiAgentService?.isExpanded.value ?? false);
 const totalItemsCount = computed(() => aiAgentService?.totalItemsCount.value ?? 0);
 
 // Panel style with dynamic width
 const panelStyle = computed(() => ({
-  width: isExpanded.value ? "50%" : `${config.value.width ?? 350}px`,
+  width: isExpanded.value ? "50%" : `${config.value.width ?? 362}px`,
 }));
 
 // Panel control methods

framework/core/plugins/ai-agent/components/_internal/VcAiAgentHeader.vue

@@ -1,88 +1,7 @@
 <template>
   <div class="vc-ai-agent-header">
     <div class="vc-ai-agent-header__icon">
-      <svg
-        width="22"
-        height="24"
-        viewBox="0 0 22 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.92406 0.537357C10.165 -0.179119 11.6939 -0.179119 12.9349 0.537357L19.8535 4.5319C21.0945 5.24838 21.8589 6.57248 21.8589 8.00543V15.9945C21.8589 17.4275 21.0945 18.7516 19.8535 19.4681L12.9349 23.4626C11.6939 24.1791 10.165 24.1791 8.92406 23.4626L2.00541 19.4681C0.764459 18.7516 0 17.4275 0 15.9945V8.00543C0 6.57248 0.764459 5.24838 2.00541 4.5319L8.92406 0.537357Z"
-          fill="white"
-        />
-        <g
-          clip-path="url(#paint0_angular_1004_8813_clip_path)"
-          data-figma-skip-parse="true"
-        >
-          <g transform="matrix(0 -0.0359275 0.0356829 0 10.9297 12.0001)">
-            <foreignObject
-              x="-334.01"
-              y="-334.01"
-              width="668.02"
-              height="668.02"
-              ><div
-                xmlns="http://www.w3.org/1999/xhtml"
-                style="
-                  background: conic-gradient(
-                    from 90deg,
-                    rgba(255, 149, 51, 1) 0deg,
-                    rgba(255, 79, 187, 1) 43.2deg,
-                    rgba(155, 255, 79, 1) 143.654deg,
-                    rgba(28, 145, 252, 1) 252.692deg,
-                    rgba(154, 45, 248, 1) 316.8deg,
-                    rgba(255, 149, 51, 1) 360deg
-                  );
-                  height: 100%;
-                  width: 100%;
-                  opacity: 1;
-                "
-              ></div
-            ></foreignObject>
-          </g>
-        </g>
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M16.4395 10.6925C17.4389 12.4342 17.5855 14.7605 17.0781 17.0412C16.5847 19.2587 15.479 21.3907 14.002 22.8459L12.9346 23.463C11.6937 24.1793 10.1647 24.1794 8.92383 23.463L4.81641 21.091C6.48014 21.2357 8.24755 21.0003 9.87402 20.4474C12.1457 19.6751 14.1798 18.2734 15.2773 16.3839C16.7064 13.9237 16.7787 11.8621 16.2246 10.339C16.296 10.4538 16.3694 10.5705 16.4395 10.6925ZM12.5723 6.5646C14.5851 6.56993 16.7106 7.56255 18.4668 9.09488C20.0162 10.4468 21.2529 12.1974 21.8594 14.0041V15.9943C21.8594 17.4272 21.0944 18.7514 19.8535 19.4679L15.4492 22.0109C16.4736 20.6151 17.2295 18.9083 17.6182 17.1613C18.1443 14.7966 18.0091 12.3169 16.9189 10.4171C15.5014 7.94691 13.7497 6.85357 12.1523 6.57339C12.2894 6.56875 12.4294 6.56423 12.5723 6.5646ZM0 11.2697C0.704632 12.7816 1.7891 14.1898 3.0791 15.3166C4.87894 16.8885 7.10461 17.9397 9.28906 17.9455C12.1367 17.9529 13.9586 16.9824 15 15.7394C14.9357 15.8599 14.8712 15.9836 14.7998 16.1066C13.7886 17.8473 11.8825 19.1804 9.69531 19.924C7.65984 20.6159 5.41309 20.7847 3.47656 20.3175L2.00586 19.4679C0.764906 18.7514 0 17.4272 0 15.9943V11.2697ZM5.95215 2.2521C5.01991 3.60523 4.37186 5.22291 4.0625 6.87613C3.62624 9.20794 3.85535 11.6456 4.94141 13.5382C6.36156 16.013 8.11707 17.1052 9.7168 17.383C9.57761 17.3878 9.43521 17.3931 9.29004 17.3927C7.27637 17.3873 5.17407 16.4121 3.44238 14.8996C1.82788 13.4893 0.56156 11.633 0 9.71988V8.00601C0 6.57306 0.764906 5.24885 2.00586 4.53238L5.95215 2.2521ZM11.3975 7.05093C12.0141 7.06601 12.6881 7.21751 13.376 7.5607C13.0837 7.49777 12.8006 7.49218 12.5459 7.55679L12.6816 8.09292C13.0083 8.00995 13.4967 8.1005 14.0215 8.41421C14.538 8.72301 15.057 9.23022 15.4326 9.91909C15.7285 10.4617 15.9343 11.1225 15.9805 11.8918C15.8889 11.6052 15.7517 11.3555 15.5674 11.1662L15.1709 11.5519C15.406 11.7933 15.5727 12.2611 15.5635 12.8722C15.5543 13.4739 15.3736 14.1772 14.9648 14.8468C14.642 15.3757 14.171 15.8854 13.5254 16.3107C13.73 16.0867 13.8799 15.8413 13.9521 15.5851L13.4189 15.4347C13.3275 15.7591 13.0058 16.1381 12.4717 16.4357C11.9461 16.7285 11.2471 16.9236 10.4629 16.9044C9.84516 16.8893 9.1696 16.7382 8.48047 16.3937C8.77503 16.4579 9.06081 16.4638 9.31738 16.3986L9.18066 15.8625C8.85403 15.9453 8.36539 15.8557 7.84082 15.5421C7.32436 15.2334 6.80623 14.7251 6.43066 14.0363C6.13467 13.4934 5.92691 12.8324 5.88086 12.0626C5.97253 12.3504 6.11088 12.6013 6.2959 12.7912L6.69141 12.4044C6.45639 12.163 6.28955 11.6951 6.29883 11.0841C6.30799 10.4824 6.48868 9.77922 6.89746 9.10952C7.21926 8.58233 7.68762 8.07306 8.33008 7.64859C8.12755 7.87138 7.97995 8.11577 7.9082 8.37027L8.44141 8.52066C8.53286 8.19625 8.8546 7.81729 9.38867 7.51968C9.91427 7.22684 10.6133 7.0318 11.3975 7.05093ZM8.92383 0.537258C10.1647 -0.179152 11.6937 -0.17902 12.9346 0.537258L16.832 2.78726C15.2289 2.68408 13.5406 2.93545 11.9824 3.47671C9.71315 4.26504 7.68197 5.68288 6.58496 7.57144C5.15353 10.0358 5.08346 12.1004 5.64062 13.6242C5.56755 13.507 5.49251 13.3876 5.4209 13.2628C4.41748 11.5142 4.18713 9.21872 4.60645 6.97769C4.99237 4.91536 5.92418 2.92968 7.26758 1.49331L8.92383 0.537258ZM12.1641 4.00015C14.0959 3.32907 16.2174 3.13043 18.084 3.51089L19.8535 4.53238C21.0944 5.24887 21.8594 6.57311 21.8594 8.00601V12.5626C21.1452 11.1171 20.0805 9.7689 18.8301 8.67788C17.0078 7.08795 14.7586 6.01663 12.5732 6.01089C9.72539 6.00349 7.90267 6.97374 6.86133 8.21695C6.92577 8.09606 6.9918 7.97218 7.06348 7.84878C8.07528 6.10725 9.97945 4.75906 12.1641 4.00015Z"
-          data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.58431375026702881,&#34;b&#34;:0.20000000298023224,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.30980393290519714,&#34;b&#34;:0.73333334922790527,&#34;a&#34;:1.0},&#34;position&#34;:0.11999999731779099},{&#34;color&#34;:{&#34;r&#34;:0.60888892412185669,&#34;g&#34;:1.0,&#34;b&#34;:0.30980393290519714,&#34;a&#34;:1.0},&#34;position&#34;:0.39903846383094788},{&#34;color&#34;:{&#34;r&#34;:0.10980392247438431,&#34;g&#34;:0.56862747669219971,&#34;b&#34;:0.98823529481887817,&#34;a&#34;:1.0},&#34;position&#34;:0.70192307233810425},{&#34;color&#34;:{&#34;r&#34;:0.60392159223556519,&#34;g&#34;:0.17647059261798859,&#34;b&#34;:0.97254902124404907,&#34;a&#34;:1.0},&#34;position&#34;:0.87999999523162842},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.58431375026702881,&#34;b&#34;:0.20000000298023224,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.58431375026702881,&#34;b&#34;:0.20000000298023224,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.30980393290519714,&#34;b&#34;:0.73333334922790527,&#34;a&#34;:1.0},&#34;position&#34;:0.11999999731779099},{&#34;color&#34;:{&#34;r&#34;:0.60888892412185669,&#34;g&#34;:1.0,&#34;b&#34;:0.30980393290519714,&#34;a&#34;:1.0},&#34;position&#34;:0.39903846383094788},{&#34;color&#34;:{&#34;r&#34;:0.10980392247438431,&#34;g&#34;:0.56862747669219971,&#34;b&#34;:0.98823529481887817,&#34;a&#34;:1.0},&#34;position&#34;:0.70192307233810425},{&#34;color&#34;:{&#34;r&#34;:0.60392159223556519,&#34;g&#34;:0.17647059261798859,&#34;b&#34;:0.97254902124404907,&#34;a&#34;:1.0},&#34;position&#34;:0.87999999523162842},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.58431375026702881,&#34;b&#34;:0.20000000298023224,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;transform&#34;:{&#34;m00&#34;:3.8149642949888984e-13,&#34;m01&#34;:71.365898132324219,&#34;m02&#34;:-24.753261566162109,&#34;m10&#34;:-71.855010986328125,&#34;m11&#34;:-5.4860135260525328e-14,&#34;m12&#34;:47.927650451660156},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"
-        />
-        <path
-          d="M16.0431 12.0324C16.0431 13.3654 16.5272 15.8012 13.4845 18.4291C14.5218 16.2507 12.419 17.1497 10.9259 17.1497C8.09967 17.1497 5.80859 14.8586 5.80859 12.0324C5.80859 9.20615 8.09967 6.91504 10.9259 6.91504C13.752 6.91504 16.0431 9.20615 16.0431 12.0324Z"
-          fill="white"
-        />
-        <ellipse
-          cx="10.9283"
-          cy="12.0328"
-          rx="0.898978"
-          ry="0.898992"
-          fill="#6C6C6C"
-        />
-        <ellipse
-          cx="13.4849"
-          cy="12.0328"
-          rx="0.898978"
-          ry="0.898992"
-          fill="#6C6C6C"
-        />
-        <ellipse
-          cx="8.36968"
-          cy="12.0328"
-          rx="0.898978"
-          ry="0.898992"
-          fill="#6C6C6C"
-        />
-        <defs>
-          <clipPath id="paint0_angular_1004_8813_clip_path">
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M16.4395 10.6925C17.4389 12.4342 17.5855 14.7605 17.0781 17.0412C16.5847 19.2587 15.479 21.3907 14.002 22.8459L12.9346 23.463C11.6937 24.1793 10.1647 24.1794 8.92383 23.463L4.81641 21.091C6.48014 21.2357 8.24755 21.0003 9.87402 20.4474C12.1457 19.6751 14.1798 18.2734 15.2773 16.3839C16.7064 13.9237 16.7787 11.8621 16.2246 10.339C16.296 10.4538 16.3694 10.5705 16.4395 10.6925ZM12.5723 6.5646C14.5851 6.56993 16.7106 7.56255 18.4668 9.09488C20.0162 10.4468 21.2529 12.1974 21.8594 14.0041V15.9943C21.8594 17.4272 21.0944 18.7514 19.8535 19.4679L15.4492 22.0109C16.4736 20.6151 17.2295 18.9083 17.6182 17.1613C18.1443 14.7966 18.0091 12.3169 16.9189 10.4171C15.5014 7.94691 13.7497 6.85357 12.1523 6.57339C12.2894 6.56875 12.4294 6.56423 12.5723 6.5646ZM0 11.2697C0.704632 12.7816 1.7891 14.1898 3.0791 15.3166C4.87894 16.8885 7.10461 17.9397 9.28906 17.9455C12.1367 17.9529 13.9586 16.9824 15 15.7394C14.9357 15.8599 14.8712 15.9836 14.7998 16.1066C13.7886 17.8473 11.8825 19.1804 9.69531 19.924C7.65984 20.6159 5.41309 20.7847 3.47656 20.3175L2.00586 19.4679C0.764906 18.7514 0 17.4272 0 15.9943V11.2697ZM5.95215 2.2521C5.01991 3.60523 4.37186 5.22291 4.0625 6.87613C3.62624 9.20794 3.85535 11.6456 4.94141 13.5382C6.36156 16.013 8.11707 17.1052 9.7168 17.383C9.57761 17.3878 9.43521 17.3931 9.29004 17.3927C7.27637 17.3873 5.17407 16.4121 3.44238 14.8996C1.82788 13.4893 0.56156 11.633 0 9.71988V8.00601C0 6.57306 0.764906 5.24885 2.00586 4.53238L5.95215 2.2521ZM11.3975 7.05093C12.0141 7.06601 12.6881 7.21751 13.376 7.5607C13.0837 7.49777 12.8006 7.49218 12.5459 7.55679L12.6816 8.09292C13.0083 8.00995 13.4967 8.1005 14.0215 8.41421C14.538 8.72301 15.057 9.23022 15.4326 9.91909C15.7285 10.4617 15.9343 11.1225 15.9805 11.8918C15.8889 11.6052 15.7517 11.3555 15.5674 11.1662L15.1709 11.5519C15.406 11.7933 15.5727 12.2611 15.5635 12.8722C15.5543 13.4739 15.3736 14.1772 14.9648 14.8468C14.642 15.3757 14.171 15.8854 13.5254 16.3107C13.73 16.0867 13.8799 15.8413 13.9521 15.5851L13.4189 15.4347C13.3275 15.7591 13.0058 16.1381 12.4717 16.4357C11.9461 16.7285 11.2471 16.9236 10.4629 16.9044C9.84516 16.8893 9.1696 16.7382 8.48047 16.3937C8.77503 16.4579 9.06081 16.4638 9.31738 16.3986L9.18066 15.8625C8.85403 15.9453 8.36539 15.8557 7.84082 15.5421C7.32436 15.2334 6.80623 14.7251 6.43066 14.0363C6.13467 13.4934 5.92691 12.8324 5.88086 12.0626C5.97253 12.3504 6.11088 12.6013 6.2959 12.7912L6.69141 12.4044C6.45639 12.163 6.28955 11.6951 6.29883 11.0841C6.30799 10.4824 6.48868 9.77922 6.89746 9.10952C7.21926 8.58233 7.68762 8.07306 8.33008 7.64859C8.12755 7.87138 7.97995 8.11577 7.9082 8.37027L8.44141 8.52066C8.53286 8.19625 8.8546 7.81729 9.38867 7.51968C9.91427 7.22684 10.6133 7.0318 11.3975 7.05093ZM8.92383 0.537258C10.1647 -0.179152 11.6937 -0.17902 12.9346 0.537258L16.832 2.78726C15.2289 2.68408 13.5406 2.93545 11.9824 3.47671C9.71315 4.26504 7.68197 5.68288 6.58496 7.57144C5.15353 10.0358 5.08346 12.1004 5.64062 13.6242C5.56755 13.507 5.49251 13.3876 5.4209 13.2628C4.41748 11.5142 4.18713 9.21872 4.60645 6.97769C4.99237 4.91536 5.92418 2.92968 7.26758 1.49331L8.92383 0.537258ZM12.1641 4.00015C14.0959 3.32907 16.2174 3.13043 18.084 3.51089L19.8535 4.53238C21.0944 5.24887 21.8594 6.57311 21.8594 8.00601V12.5626C21.1452 11.1171 20.0805 9.7689 18.8301 8.67788C17.0078 7.08795 14.7586 6.01663 12.5732 6.01089C9.72539 6.00349 7.90267 6.97374 6.86133 8.21695C6.92577 8.09606 6.9918 7.97218 7.06348 7.84878C8.07528 6.10725 9.97945 4.75906 12.1641 4.00015Z"
-            />
-          </clipPath>
-        </defs>
-      </svg>
+      <VcVirtoOzLogo :width="22" :height="24" show-dots />
     </div>
 
     <div class="vc-ai-agent-header__wrapper">
@@ -123,6 +42,7 @@
 
 <script lang="ts" setup>
 import { VcIcon } from "../../../../../ui/components";
+import VcVirtoOzLogo from "./VcVirtoOzLogo.vue";
 
 defineProps<{
   title?: string;