@tuturuuu/ui 0.2.0 → 0.3.2

package/src/components/ui/chat/chat-agent-details-sidebar.tsx

@@ -155,7 +155,10 @@ export function ChatAgentDetailsSidebar({
   if (!open) return null;
 
   return (
-    <aside className="hidden w-96 min-w-0 shrink-0 overflow-hidden border-l bg-background md:flex md:flex-col">
+    <aside
+      className="hidden w-96 min-w-0 shrink-0 overflow-hidden border-l bg-background md:flex md:flex-col"
+      data-chat-agent-details-sidebar="true"
+    >
       <Tabs
         className="min-h-0 flex-1 gap-0"
         defaultValue="setup"
@@ -192,7 +195,7 @@ export function ChatAgentDetailsSidebar({
           </TabsList>
         </div>
 
-        <ScrollArea className="min-h-0 flex-1">
+        <ScrollArea className="[&_[data-radix-scroll-area-viewport]>div]:!block [&_[data-radix-scroll-area-viewport]>div]:!min-w-0 min-h-0 min-w-0 flex-1 overflow-hidden [&_[data-radix-scroll-area-viewport]>div]:w-full [&_[data-radix-scroll-area-viewport]>div]:max-w-full">
           {renderContent({
             agentsError: agentsQuery.error,
             agentsLoading: agentsQuery.isLoading,
@@ -263,7 +266,7 @@ function renderContent({
 
   if (agentsLoading) {
     return (
-      <div className="flex items-center justify-center p-6 text-muted-foreground text-sm">
+      <div className="flex min-w-0 items-center justify-center p-6 text-muted-foreground text-sm">
         <LoaderCircle className="mr-2 size-4 animate-spin" />
         {t('loading_ai_settings')}
       </div>
@@ -285,7 +288,10 @@ function renderContent({
 
   return (
     <>
-      <TabsContent className="m-0 p-3" value={'setup' satisfies AgentTab}>
+      <TabsContent
+        className="m-0 min-w-0 max-w-full overflow-hidden p-3"
+        value={'setup' satisfies AgentTab}
+      >
         <AgentSetupForm
           agent={agent}
           channel={channel}
@@ -293,13 +299,18 @@ function renderContent({
           onSubmit={onSave}
         />
       </TabsContent>
-      <TabsContent className="m-0 p-3" value={'operations' satisfies AgentTab}>
+      <TabsContent
+        className="m-0 min-w-0 max-w-full overflow-hidden p-3"
+        value={'operations' satisfies AgentTab}
+      >
         <AgentOperationsPanel
+          agentId={agent.id}
           channel={channel}
           isPending={isPending}
           onCopySecret={onCopySecret}
           onDeploy={onDeploy}
           onPause={onPause}
+          onRefresh={onRefresh}
           onRotateSecret={onRotateSecret}
           onTest={onTest}
           secretPreview={secretPreview}
@@ -307,7 +318,10 @@ function renderContent({
         />
       </TabsContent>
       {tabs.includes('thread') ? (
-        <TabsContent className="m-0 p-3" value={'thread' satisfies AgentTab}>
+        <TabsContent
+          className="m-0 min-w-0 max-w-full overflow-hidden p-3"
+          value={'thread' satisfies AgentTab}
+        >
           <AgentExternalThreadPanel metadata={metadata} onRefresh={onRefresh} />
         </TabsContent>
       ) : null}
@@ -323,7 +337,7 @@ function SidebarNotice({
   secondary?: string | null;
 }) {
   return (
-    <div className="space-y-2 p-4 text-sm">
+    <div className="min-w-0 space-y-2 overflow-hidden p-4 text-sm">
       <p className="text-muted-foreground">{message}</p>
       {secondary ? (
         <p className="break-words rounded-md border bg-muted/20 p-2 text-muted-foreground text-xs">

package/src/components/ui/chat/chat-agent-details-utils.test.ts

@@ -5,6 +5,7 @@ import { describe, expect, it } from 'vitest';
 import {
   buildAgentPayload,
   readAgentConversationMetadata,
+  secretNamesForChannel,
 } from './chat-agent-details-utils';
 
 function conversation(metadata: Record<string, unknown>): ChatConversation {
@@ -158,4 +159,76 @@ describe('buildAgentPayload', () => {
       name: 'Updated name',
     });
   });
+
+  it('preserves personal Zalo channel mode and credentials when saving setup edits', () => {
+    const agent: AiAgentDefinition = {
+      channels: [
+        {
+          adapter: 'zalo',
+          autoRespond: true,
+          displayName: 'Personal Zalo',
+          enabled: true,
+          externalChannelId: 'zalo-thread',
+          historySyncEnabled: true,
+          id: 'zalo-personal',
+          lastDeployedAt: null,
+          lastError: null,
+          lastEventAt: null,
+          mentionRoleIds: [],
+          secrets: [
+            {
+              configured: true,
+              lastFour: 'json',
+              name: 'personalCookieJson',
+            },
+          ],
+          status: 'deployed',
+          webhookUrl: null,
+          workspaceId: 'workspace-1',
+          zaloAccountMode: 'personal',
+          zaloPersonalOwnId: 'own-1',
+        },
+      ],
+      createdAt: null,
+      enabled: true,
+      id: 'agent-1',
+      instructions: 'Old instructions',
+      modelId: 'old-model',
+      name: 'Old name',
+      temperature: null,
+      tools: [],
+      updatedAt: null,
+    };
+    const formData = new FormData();
+    formData.set('agentEnabled', 'on');
+    formData.set('name', 'Updated name');
+    formData.set('modelId', 'updated-model');
+    formData.set('instructions', 'Updated instructions');
+    formData.set('channelDisplayName', 'Personal Zalo');
+    formData.set('channelEnabled', 'on');
+    formData.set('channelAutoRespond', 'on');
+    formData.set('channelHistorySyncEnabled', 'on');
+    formData.set('externalChannelId', 'zalo-thread');
+    formData.set('workspaceId', 'workspace-1');
+    formData.set('zaloPersonalOwnId', 'own-1');
+
+    expect(secretNamesForChannel(agent.channels[0]!)).toEqual([
+      'personalCookieJson',
+      'personalImei',
+      'personalUserAgent',
+    ]);
+    expect(
+      buildAgentPayload(formData, agent, agent.channels[0]!)
+    ).toMatchObject({
+      channels: [
+        {
+          adapter: 'zalo',
+          id: 'zalo-personal',
+          zaloAccountMode: 'personal',
+          zaloOfficialAccountId: null,
+          zaloPersonalOwnId: 'own-1',
+        },
+      ],
+    });
+  });
 });

package/src/components/ui/chat/chat-agent-details-utils.tsx

@@ -78,10 +78,10 @@ export function PanelSection({
   title: string;
 }) {
   return (
-    <section className="space-y-3 rounded-md border bg-muted/10 p-3">
-      <h3 className="flex items-center gap-2 font-medium text-sm">
-        {icon}
-        {title}
+    <section className="min-w-0 space-y-3 overflow-hidden rounded-md border bg-muted/10 p-3">
+      <h3 className="flex min-w-0 items-center gap-2 font-medium text-sm">
+        <span className="shrink-0">{icon}</span>
+        <span className="min-w-0 truncate">{title}</span>
       </h3>
       {children}
     </section>
@@ -108,7 +108,7 @@ export function Field({
 export function KeyValue({ label, value }: { label: string; value: string }) {
   return (
     <div className="flex min-w-0 items-center justify-between gap-3 text-sm">
-      <span className="text-muted-foreground">{label}</span>
+      <span className="shrink-0 text-muted-foreground">{label}</span>
       <span className="min-w-0 truncate font-medium">{value}</span>
     </div>
   );
@@ -169,12 +169,61 @@ export function secretNamesForChannel(channel: AiAgentChannelConfig) {
   const required =
     channel.adapter === 'discord'
       ? ['applicationId', 'publicKey', 'botToken']
-      : ['botToken', 'webhookSecret'];
+      : isPersonalZaloChannel(channel)
+        ? ['personalCookieJson', 'personalImei', 'personalUserAgent']
+        : ['botToken', 'webhookSecret'];
   return [
     ...new Set([...required, ...channel.secrets.map((item) => item.name)]),
   ];
 }
 
+export function isPersonalZaloChannel(channel: AiAgentChannelConfig) {
+  return channel.adapter === 'zalo' && channel.zaloAccountMode === 'personal';
+}
+
+const ZALO_PERSONAL_ERROR_KEYS = {
+  ai_agent_zalo_personal_channel_required:
+    'agent_zalo_personal_channel_required',
+  zalo_personal_cookie_json_invalid: 'agent_zalo_personal_cookie_json_invalid',
+  zalo_personal_credentials_missing: 'agent_zalo_personal_credentials_missing',
+  zalo_personal_feature_disabled: 'agent_zalo_personal_feature_disabled',
+  zalo_personal_phone_sync_timed_out: 'agent_zalo_personal_sync_phone_failed',
+  zalo_personal_phone_sync_no_payload:
+    'agent_zalo_personal_sync_phone_no_payload',
+  zalo_personal_phone_sync_waiting_for_phone:
+    'agent_zalo_personal_sync_phone_waiting',
+  zalo_personal_web_sync_browser_unavailable:
+    'agent_zalo_personal_sync_web_browser_unavailable',
+  zalo_personal_web_sync_failed: 'agent_zalo_personal_sync_web_failed',
+  zalo_personal_web_sync_login_required:
+    'agent_zalo_personal_sync_web_login_required',
+  zalo_personal_web_sync_timed_out: 'agent_zalo_personal_sync_web_timed_out',
+  zalo_personal_web_sync_waiting_for_phone:
+    'agent_zalo_personal_sync_phone_waiting',
+  zalo_personal_qr_aborted: 'agent_zalo_personal_qr_aborted',
+  zalo_personal_qr_credentials_missing:
+    'agent_zalo_personal_qr_credentials_missing',
+  zalo_personal_qr_declined: 'agent_zalo_personal_qr_declined',
+  zalo_personal_qr_expired: 'agent_zalo_personal_qr_expired',
+} as const;
+
+export function formatZaloPersonalError(
+  error: string | null | undefined,
+  t: ReturnType<typeof useTranslations>
+) {
+  if (!error) return null;
+
+  const key =
+    ZALO_PERSONAL_ERROR_KEYS[error as keyof typeof ZALO_PERSONAL_ERROR_KEYS];
+  if (key) return t(key);
+
+  if (error.startsWith('zalo_personal_qr_')) {
+    return t('agent_zalo_personal_qr_failed');
+  }
+
+  return error;
+}
+
 export async function copyToClipboard(
   value: string,
   labels: { error: string; success: string }
@@ -212,17 +261,30 @@ function buildSelectedChannelPayload(
       String(formData.get('workspaceId') ?? '').trim() || channel.workspaceId,
   };
 
-  return channel.adapter === 'discord'
-    ? {
-        ...base,
-        discordGuildId:
-          String(formData.get('discordGuildId') ?? '').trim() || null,
-      }
-    : {
-        ...base,
-        zaloOfficialAccountId:
-          String(formData.get('zaloOfficialAccountId') ?? '').trim() || null,
-      };
+  if (channel.adapter === 'discord') {
+    return {
+      ...base,
+      discordGuildId:
+        String(formData.get('discordGuildId') ?? '').trim() || null,
+    };
+  }
+
+  const zaloAccountMode = channel.zaloAccountMode ?? 'official';
+
+  return {
+    ...base,
+    zaloAccountMode,
+    zaloOfficialAccountId:
+      zaloAccountMode === 'official'
+        ? String(formData.get('zaloOfficialAccountId') ?? '').trim() || null
+        : null,
+    zaloPersonalOwnId:
+      zaloAccountMode === 'personal'
+        ? String(formData.get('zaloPersonalOwnId') ?? '').trim() ||
+          channel.zaloPersonalOwnId ||
+          null
+        : null,
+  };
 }
 
 function buildExistingChannelPayload(
@@ -241,15 +303,27 @@ function buildExistingChannelPayload(
     workspaceId: channel.workspaceId,
   };
 
-  return channel.adapter === 'discord'
-    ? {
-        ...base,
-        discordGuildId: channel.discordGuildId ?? null,
-      }
-    : {
-        ...base,
-        zaloOfficialAccountId: channel.zaloOfficialAccountId ?? null,
-      };
+  if (channel.adapter === 'discord') {
+    return {
+      ...base,
+      discordGuildId: channel.discordGuildId ?? null,
+    };
+  }
+
+  const zaloAccountMode = channel.zaloAccountMode ?? 'official';
+
+  return {
+    ...base,
+    zaloAccountMode,
+    zaloOfficialAccountId:
+      zaloAccountMode === 'official'
+        ? (channel.zaloOfficialAccountId ?? null)
+        : null,
+    zaloPersonalOwnId:
+      zaloAccountMode === 'personal'
+        ? (channel.zaloPersonalOwnId ?? null)
+        : null,
+  };
 }
 
 function readSecretPayload(formData: FormData) {