@tuturuuu/ui 0.23.0 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## [0.25.0](https://github.com/tutur3u/platform/compare/ui-v0.24.0...ui-v0.25.0) (2026-08-06)
+
+
+### Features
+
+* **chat:** add external parity reconciliation ([#5086](https://github.com/tutur3u/platform/issues/5086)) ([5ef796f](https://github.com/tutur3u/platform/commit/5ef796f7812ec6a9f9a62193ba21633cd2503001))
+* **chat:** complete connected-site operational parity ([#5093](https://github.com/tutur3u/platform/issues/5093)) ([397e11b](https://github.com/tutur3u/platform/commit/397e11bd87d583fe1c65f83a2b8019c287650e19))
+* **chat:** complete connected-site parity ([fd4061d](https://github.com/tutur3u/platform/commit/fd4061d8b2f654e521c40ea9819a348ae81575c9))
+
+
+### Bug Fixes
+
+* **chat:** harden connected-site parity ([a0d3148](https://github.com/tutur3u/platform/commit/a0d31483a87ed0ebd59f2be5c3bdbb342bd67855))
+
+## [0.24.0](https://github.com/tutur3u/platform/compare/ui-v0.23.0...ui-v0.24.0) (2026-08-04)
+
+
+### Features
+
+* **chat:** add connected site sync bridge ([05c27f5](https://github.com/tutur3u/platform/commit/05c27f5ac4a545af366097ee2a919ec755970b9b))
+* **chat:** add connected site sync bridge ([#5078](https://github.com/tutur3u/platform/issues/5078)) ([3de1a07](https://github.com/tutur3u/platform/commit/3de1a07dfa2fec96982aa0d116e003d0aa3fe47c))
+* **finance:** reconcile inventory provider sales ([56650e0](https://github.com/tutur3u/platform/commit/56650e066c473337700998d8af607380e8ea6202))
+* **inventory:** allocate bundle revenue and add cash checkout ([bd465f9](https://github.com/tutur3u/platform/commit/bd465f9bb35fad16d259378fa49611a8eb5ba95b))
+* **meet:** revamp collaborative scheduling ([9124a5d](https://github.com/tutur3u/platform/commit/9124a5d559e071c7e6c1c713cfbca4d9f5205611))
+* **onboarding:** connect product guidance across apps ([68cf626](https://github.com/tutur3u/platform/commit/68cf626c9650e5044b6c123f9423a6cebf1bba9a))
+
+
+### Bug Fixes
+
+* **chat:** address external bridge review findings ([30533fc](https://github.com/tutur3u/platform/commit/30533fc64093fed4b25279bc0e45d43bdb7a6cde))
+* **chat:** close bridge edge cases ([db585c8](https://github.com/tutur3u/platform/commit/db585c8486064837dcbce615a30f66c38c0a3ec0))
+* **chat:** harden bridge review edge cases ([0ecfad7](https://github.com/tutur3u/platform/commit/0ecfad7c66454fdb3bcd971f1362d3789287f086))
+* **chat:** harden connected site migration ([73cccd0](https://github.com/tutur3u/platform/commit/73cccd04e9bd85a443891f3e52b443ef755570cb))
+* **chat:** harden connected site sync ([70e8785](https://github.com/tutur3u/platform/commit/70e8785967e145a77330272e671ca58dfc38fbee))
+* **chat:** harden external bridge boundaries ([2d25202](https://github.com/tutur3u/platform/commit/2d252023e5cfb1c7414ee2ed2d161e7f5de613f8))
+* **chat:** harden external bridge synchronization ([63ccf91](https://github.com/tutur3u/platform/commit/63ccf9129ff8e7cf255bef8c74a3e096ab45cb7d))
+* **chat:** mount query state adapter ([#5084](https://github.com/tutur3u/platform/issues/5084)) ([60253f8](https://github.com/tutur3u/platform/commit/60253f82477fc54923556706d12e4dc525a7a170))
+* **chat:** preserve native message behavior ([fc09530](https://github.com/tutur3u/platform/commit/fc095301f2d26ca2bc39de02ce17b1f341327de9))
+* **deps:** align Streamdown with Shiki 4 ([0d89f55](https://github.com/tutur3u/platform/commit/0d89f555b3228307e893a5d7723aaf8db8505d63))
+* **platform:** stabilize offline and calendar initialization ([8ef8fbc](https://github.com/tutur3u/platform/commit/8ef8fbc1274e108930adf38bb8e998384551058b))
+* **ui:** preserve hosted workspace logos ([1f8e8b2](https://github.com/tutur3u/platform/commit/1f8e8b28c23f659952ad58f00a2a371acd8fcef9))
+* **workspaces:** route satellite creation through setup ([754bf1b](https://github.com/tutur3u/platform/commit/754bf1b81360e4755a171819f3a8e6a7c102f351))
+
 ## [0.23.0](https://github.com/tutur3u/platform/compare/ui-v0.22.0...ui-v0.23.0) (2026-07-28)
 
 

package/biome.json

@@ -1,5 +1,5 @@
 {
   "root": false,
-  "$schema": "https://biomejs.dev/schemas/2.5.5/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.5.6/schema.json",
   "extends": "//"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -21,36 +21,36 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@dqcai/vn-lunar": "^1.0.1",
-    "@hookform/resolvers": "^5.4.0",
+    "@hookform/resolvers": "^5.7.1",
     "@json-render/core": "^0.19.0",
     "@json-render/react": "^0.19.0",
-    "@radix-ui/react-accordion": "^1.2.18",
-    "@radix-ui/react-alert-dialog": "^1.1.21",
-    "@radix-ui/react-aspect-ratio": "^1.1.13",
-    "@radix-ui/react-avatar": "^1.2.4",
-    "@radix-ui/react-checkbox": "^1.3.9",
-    "@radix-ui/react-collapsible": "^1.1.18",
-    "@radix-ui/react-context-menu": "^2.3.5",
-    "@radix-ui/react-dialog": "^1.1.21",
-    "@radix-ui/react-dropdown-menu": "^2.1.22",
-    "@radix-ui/react-hover-card": "^1.1.21",
-    "@radix-ui/react-label": "^2.1.13",
-    "@radix-ui/react-menubar": "^1.1.22",
-    "@radix-ui/react-navigation-menu": "^1.2.20",
-    "@radix-ui/react-popover": "^1.1.21",
-    "@radix-ui/react-progress": "^1.1.14",
-    "@radix-ui/react-radio-group": "^1.4.5",
-    "@radix-ui/react-scroll-area": "^1.2.16",
-    "@radix-ui/react-select": "^2.3.5",
-    "@radix-ui/react-separator": "^1.1.13",
-    "@radix-ui/react-slider": "^1.4.5",
-    "@radix-ui/react-slot": "^1.3.1",
-    "@radix-ui/react-switch": "^1.3.5",
-    "@radix-ui/react-tabs": "^1.1.19",
-    "@radix-ui/react-toast": "^1.2.21",
-    "@radix-ui/react-toggle": "^1.1.16",
-    "@radix-ui/react-toggle-group": "^1.1.17",
-    "@radix-ui/react-tooltip": "^1.2.14",
+    "@radix-ui/react-accordion": "^1.2.20",
+    "@radix-ui/react-alert-dialog": "^1.1.23",
+    "@radix-ui/react-aspect-ratio": "^1.1.15",
+    "@radix-ui/react-avatar": "^1.2.6",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-context-menu": "^2.3.7",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-hover-card": "^1.1.23",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-menubar": "^1.1.24",
+    "@radix-ui/react-navigation-menu": "^1.2.22",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-progress": "^1.1.16",
+    "@radix-ui/react-radio-group": "^1.4.7",
+    "@radix-ui/react-scroll-area": "^1.2.18",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slider": "^1.4.7",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-toast": "^1.2.23",
+    "@radix-ui/react-toggle": "^1.1.18",
+    "@radix-ui/react-toggle-group": "^1.1.19",
+    "@radix-ui/react-tooltip": "^1.2.16",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",
     "@streamdown/math": "^1.0.2",
@@ -59,40 +59,40 @@
     "@tanstack/react-pacer": "^0.22.1",
     "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.14.8",
-    "@tiptap/core": "3.28.0",
-    "@tiptap/extension-collaboration": "3.28.0",
-    "@tiptap/extension-collaboration-caret": "3.28.0",
-    "@tiptap/extension-color": "3.28.0",
-    "@tiptap/extension-drag-handle": "3.28.0",
-    "@tiptap/extension-drag-handle-react": "3.28.0",
-    "@tiptap/extension-highlight": "3.28.0",
-    "@tiptap/extension-horizontal-rule": "3.28.0",
-    "@tiptap/extension-image": "3.28.0",
-    "@tiptap/extension-link": "3.28.0",
-    "@tiptap/extension-list": "3.28.0",
-    "@tiptap/extension-node-range": "3.28.0",
-    "@tiptap/extension-placeholder": "3.28.0",
-    "@tiptap/extension-strike": "3.28.0",
-    "@tiptap/extension-subscript": "3.28.0",
-    "@tiptap/extension-superscript": "3.28.0",
-    "@tiptap/extension-table": "3.28.0",
-    "@tiptap/extension-table-cell": "3.28.0",
-    "@tiptap/extension-table-header": "3.28.0",
-    "@tiptap/extension-table-row": "3.28.0",
-    "@tiptap/extension-text-align": "3.28.0",
-    "@tiptap/extension-text-style": "3.28.0",
-    "@tiptap/extension-youtube": "3.28.0",
-    "@tiptap/pm": "3.28.0",
-    "@tiptap/react": "3.28.0",
-    "@tiptap/starter-kit": "3.28.0",
-    "@tuturuuu/ai": "0.6.0",
-    "@tuturuuu/apis": "0.10.0",
+    "@tanstack/react-virtual": "^3.14.9",
+    "@tiptap/core": "3.29.2",
+    "@tiptap/extension-collaboration": "3.29.2",
+    "@tiptap/extension-collaboration-caret": "3.29.2",
+    "@tiptap/extension-color": "3.29.2",
+    "@tiptap/extension-drag-handle": "3.29.2",
+    "@tiptap/extension-drag-handle-react": "3.29.2",
+    "@tiptap/extension-highlight": "3.29.2",
+    "@tiptap/extension-horizontal-rule": "3.29.2",
+    "@tiptap/extension-image": "3.29.2",
+    "@tiptap/extension-link": "3.29.2",
+    "@tiptap/extension-list": "3.29.2",
+    "@tiptap/extension-node-range": "3.29.2",
+    "@tiptap/extension-placeholder": "3.29.2",
+    "@tiptap/extension-strike": "3.29.2",
+    "@tiptap/extension-subscript": "3.29.2",
+    "@tiptap/extension-superscript": "3.29.2",
+    "@tiptap/extension-table": "3.29.2",
+    "@tiptap/extension-table-cell": "3.29.2",
+    "@tiptap/extension-table-header": "3.29.2",
+    "@tiptap/extension-table-row": "3.29.2",
+    "@tiptap/extension-text-align": "3.29.2",
+    "@tiptap/extension-text-style": "3.29.2",
+    "@tiptap/extension-youtube": "3.29.2",
+    "@tiptap/pm": "3.29.2",
+    "@tiptap/react": "3.29.2",
+    "@tiptap/starter-kit": "3.29.2",
+    "@tuturuuu/ai": "0.8.0",
+    "@tuturuuu/apis": "0.11.0",
     "@tuturuuu/hooks": "0.1.0",
     "@tuturuuu/icons": "0.1.0",
-    "@tuturuuu/internal-api": "0.25.0",
+    "@tuturuuu/internal-api": "0.28.0",
     "@tuturuuu/supabase": "0.5.0",
-    "@tuturuuu/utils": "0.21.0",
+    "@tuturuuu/utils": "0.22.0",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
@@ -104,41 +104,41 @@
     "debug": "^4.4.3",
     "embla-carousel-react": "^8.6.0",
     "eventemitter3": "^5.0.4",
-    "framer-motion": "^12.42.2",
+    "framer-motion": "^12.43.0",
     "gsap": "^3.15.0",
-    "html2canvas-pro": "^2.3.1",
+    "html2canvas-pro": "^2.3.3",
     "input-otp": "^1.4.2",
     "katex": "^0.18.1",
     "lodash": "4.18.1",
     "moment": "^2.30.1",
-    "motion": "^12.42.2",
-    "next": "^16.3.0-preview.9",
+    "motion": "^12.43.0",
+    "next": "^16.3.0",
     "next-intl": "^4.13.4",
     "next-themes": "^0.4.6",
-    "nuqs": "^2.9.1",
+    "nuqs": "^2.9.3",
     "prosemirror-state": "^1.4.4",
-    "prosemirror-view": "1.42.1",
+    "prosemirror-view": "1.42.2",
     "qrcode.react": "^4.2.0",
     "react": "^19.2.8",
     "react-colorful": "^5.8.0",
     "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.8",
-    "react-dropzone": "^19.1.1",
-    "react-hook-form": "^7.82.0",
+    "react-dropzone": "^20.0.0",
+    "react-hook-form": "^7.84.0",
     "react-markdown": "^10.1.0",
     "react-papaparse": "^4.4.0",
     "react-pdf": "^10.4.1",
     "react-resizable": "^4.0.2",
     "react-resizable-panels": "^4.12.2",
     "react-syntax-highlighter": "^16.1.1",
-    "recharts": "3.10.0",
+    "recharts": "3.10.1",
     "slot-text": "^0.3.3",
     "sonner": "^2.0.7",
     "streamdown": "^2.5.0",
     "tailwind-scrollbar": "^4.0.2",
     "tailwind-scrollbar-hide": "^4.0.0",
     "tailwindcss-animate": "^1.0.7",
-    "tiptap-extension-resize-image": "^1.4.4",
+    "tiptap-extension-resize-image": "^1.4.5",
     "use-debounce": "^10.1.1",
     "vaul": "^1.1.2",
     "y-protocols": "^1.0.7",
@@ -152,20 +152,20 @@
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
-    "@tuturuuu/types": "0.24.0",
+    "@tuturuuu/types": "0.27.0",
     "@tuturuuu/typescript-config": "0.1.1",
     "@types/html2canvas": "^1.0.0",
-    "@types/lodash": "^4.17.24",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@types/lodash": "^4.17.25",
+    "@types/node": "^26.1.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "@types/react-resizable": "^4.0.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/uuid": "^11.0.0",
-    "@vitejs/plugin-react": "^6.0.4",
+    "@vitejs/plugin-react": "^6.0.5",
     "autoprefixer": "^10.5.4",
-    "jsdom": "^29.1.1",
-    "postcss": "^8.5.22",
+    "jsdom": "^30.0.1",
+    "postcss": "^8.5.25",
     "postcss-load-config": "^6.0.1",
     "tailwindcss": "^4.3.3",
     "typescript": "7.0.2",

package/src/components/ui/calendar-app/components/require-workspace-timezone-dialog.test.tsx

@@ -0,0 +1,121 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { RequireWorkspaceTimezoneDialog } from './require-workspace-timezone-dialog';
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ refresh: vi.fn() }),
+}));
+
+vi.mock('next-intl', () => ({
+  useTranslations: (namespace: string) => (key: string) =>
+    `${namespace}.${key}`,
+}));
+
+vi.mock('../../dialog', () => ({
+  Dialog: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  DialogContent: ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DialogDescription: ({ children }: { children: ReactNode }) => (
+    <p>{children}</p>
+  ),
+  DialogFooter: ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DialogHeader: ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DialogTitle: ({ children }: { children: ReactNode }) => <h2>{children}</h2>,
+}));
+
+vi.mock('../../sonner', () => ({
+  toast: { error: vi.fn(), success: vi.fn() },
+}));
+
+function renderDialog() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      mutations: { retry: false },
+      queries: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <RequireWorkspaceTimezoneDialog
+        onCompleted={vi.fn()}
+        wsId="workspace-1"
+      />
+    </QueryClientProvider>
+  );
+}
+
+describe('RequireWorkspaceTimezoneDialog E2EE initialization', () => {
+  beforeEach(() => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+        const url = String(input);
+
+        if (url.endsWith('/calendar-settings')) {
+          return Response.json({
+            first_day_of_week: 'monday',
+            timezone: 'UTC',
+          });
+        }
+
+        if (url.endsWith('/encryption') && init?.method === 'POST') {
+          return Response.json({ error: 'temporary failure' }, { status: 500 });
+        }
+
+        if (url.endsWith('/encryption')) {
+          return Response.json({ enabled: true, hasKey: false });
+        }
+
+        throw new Error(`Unexpected request: ${url}`);
+      })
+    );
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('attempts once automatically and waits for an explicit retry', async () => {
+    const view = renderDialog();
+
+    await screen.findByRole('button', { name: 'common.retry' });
+
+    const postCount = () =>
+      vi.mocked(fetch).mock.calls.filter(([, init]) => init?.method === 'POST')
+        .length;
+
+    expect(postCount()).toBe(1);
+
+    view.rerender(
+      <QueryClientProvider
+        client={
+          new QueryClient({
+            defaultOptions: {
+              mutations: { retry: false },
+              queries: { retry: false },
+            },
+          })
+        }
+      >
+        <RequireWorkspaceTimezoneDialog
+          onCompleted={vi.fn()}
+          wsId="workspace-1"
+        />
+      </QueryClientProvider>
+    );
+
+    await waitFor(() => expect(postCount()).toBe(1));
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.retry' }));
+
+    await waitFor(() => expect(postCount()).toBe(2));
+  });
+});

package/src/components/ui/calendar-app/components/require-workspace-timezone-dialog.tsx

@@ -4,7 +4,7 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import { Clock, Loader2, ShieldCheck } from '@tuturuuu/icons';
 import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { detectLocaleFirstDay } from '../../../../lib/calendar-settings-resolver';
 import { Button } from '../../button';
 import {
@@ -55,7 +55,9 @@ export function RequireWorkspaceTimezoneDialog({
   onCompleted,
 }: RequireWorkspaceTimezoneDialogProps) {
   const t = useTranslations('calendar');
+  const tCommon = useTranslations('common');
   const router = useRouter();
+  const autoEnableAttemptedWorkspace = useRef<string | null>(null);
 
   const browserTimezone = useMemo(() => detectBrowserTimezone(), []);
   const timezones = useMemo(() => getSupportedTimezones(), []);
@@ -216,11 +218,28 @@ export function RequireWorkspaceTimezoneDialog({
   // This happens automatically since E2EE is mandatory for calendar to work
   const isEnablingE2EE = enableE2EE.isPending;
   const isFetchingE2EE = e2eeQuery.isFetching;
+  const enableE2EEMutate = enableE2EE.mutate;
   useEffect(() => {
-    if (needsE2EESetup && !isEnablingE2EE && !isFetchingE2EE && !hasE2EE) {
-      enableE2EE.mutate();
+    if (
+      !needsE2EESetup ||
+      isEnablingE2EE ||
+      isFetchingE2EE ||
+      hasE2EE ||
+      autoEnableAttemptedWorkspace.current === wsId
+    ) {
+      return;
     }
-  }, [needsE2EESetup, isEnablingE2EE, isFetchingE2EE, hasE2EE, enableE2EE]);
+
+    autoEnableAttemptedWorkspace.current = wsId;
+    enableE2EEMutate();
+  }, [
+    needsE2EESetup,
+    isEnablingE2EE,
+    isFetchingE2EE,
+    hasE2EE,
+    wsId,
+    enableE2EEMutate,
+  ]);
 
   // Keep local selects in sync with server values once fetched.
   useEffect(() => {
@@ -375,6 +394,20 @@ export function RequireWorkspaceTimezoneDialog({
                       {t('e2ee.already_enabled')}
                     </span>
                   </div>
+                ) : enableE2EE.isError ? (
+                  <div className="flex items-center justify-between gap-3 rounded-lg border border-dynamic-red/50 bg-dynamic-red/10 p-3">
+                    <span className="font-medium text-dynamic-red text-sm">
+                      {t('e2ee.key_generation_failed')}
+                    </span>
+                    <Button
+                      onClick={() => enableE2EEMutate()}
+                      size="sm"
+                      type="button"
+                      variant="outline"
+                    >
+                      {tCommon('retry')}
+                    </Button>
+                  </div>
                 ) : (
                   <div className="flex items-center gap-2 rounded-lg border border-dynamic-blue/50 bg-dynamic-blue/10 p-3">
                     <Loader2 className="h-4 w-4 animate-spin text-dynamic-blue" />

package/src/components/ui/chat/ai-message-markdown.tsx

@@ -8,7 +8,12 @@ import { Component, type ErrorInfo, type ReactNode } from 'react';
 import { Streamdown } from 'streamdown';
 
 const math = createMathPlugin({ singleDollarTextMath: true });
-const markdownPlugins = { code, mermaid: mermaidPlugin, math, cjk };
+const markdownPlugins = {
+  code,
+  mermaid: mermaidPlugin,
+  math,
+  cjk,
+};
 
 class AiMarkdownErrorBoundary extends Component<
   { children: ReactNode; fallback: ReactNode },

package/src/components/ui/chat/chat-external-context-sidebar.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { LoaderCircle, MapPin } from '@tuturuuu/icons';
+import {
+  type ExternalChatConversationContext,
+  getExternalChatConversationContext,
+} from '@tuturuuu/internal-api';
+import { useTranslations } from 'next-intl';
+import { ScrollArea } from '../scroll-area';
+import { formatChatTime } from './utils';
+
+export function ChatExternalContextSidebar({
+  conversationId,
+  open,
+  wsId,
+}: {
+  conversationId?: string | null;
+  open: boolean;
+  wsId: string;
+}) {
+  const t = useTranslations('chat');
+  const query = useQuery({
+    enabled: open && Boolean(conversationId),
+    queryFn: () =>
+      getExternalChatConversationContext(wsId, conversationId as string),
+    queryKey: ['chat', wsId, conversationId, 'external-context'],
+  });
+  if (!open) return null;
+  return (
+    <aside className="hidden w-80 min-w-0 shrink-0 overflow-hidden border-l bg-background md:flex md:flex-col">
+      <div className="border-b p-3">
+        <h2 className="font-semibold text-sm">{t('visitor_context')}</h2>
+      </div>
+      <ScrollArea className="min-h-0 flex-1">
+        {query.isLoading ? (
+          <div className="flex items-center justify-center p-6 text-muted-foreground text-sm">
+            <LoaderCircle className="mr-2 size-4 animate-spin" />
+            {t('loading_visitor_context')}
+          </div>
+        ) : query.data ? (
+          <ContextContent context={query.data} />
+        ) : (
+          <p className="p-4 text-muted-foreground text-sm">
+            {t('visitor_context_unavailable')}
+          </p>
+        )}
+      </ScrollArea>
+    </aside>
+  );
+}
+
+function ContextContent({
+  context,
+}: {
+  context: ExternalChatConversationContext;
+}) {
+  const t = useTranslations('chat');
+  return (
+    <div className="space-y-5 p-4">
+      <dl className="space-y-3">
+        <Detail label={t('visitor_name')} value={context.profile.displayName} />
+        <Detail label={t('visitor_phone')} value={context.profile.phone} />
+        <Detail label={t('visitor_email')} value={context.profile.email} />
+        <Detail label={t('network_hint')} value={context.networkHint} />
+        <Detail
+          label={t('first_activity')}
+          value={formatChatTime(context.firstActivityAt)}
+        />
+        <Detail
+          label={t('last_activity')}
+          value={formatChatTime(context.lastActivityAt)}
+        />
+      </dl>
+      <section>
+        <h3 className="font-semibold text-muted-foreground text-xs uppercase">
+          {t('visited_routes')}
+        </h3>
+        <div className="mt-2 space-y-2">
+          {context.routes.length ? (
+            context.routes.map((route) => (
+              <div
+                className="flex gap-2 border-l-2 pl-3 text-sm"
+                key={`${route.occurredAt}:${route.location}`}
+              >
+                <MapPin className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
+                <div className="min-w-0">
+                  <p className="break-all">{route.location}</p>
+                  <p className="text-muted-foreground text-xs">
+                    {formatChatTime(route.occurredAt)}
+                  </p>
+                </div>
+              </div>
+            ))
+          ) : (
+            <p className="text-muted-foreground text-sm">
+              {t('no_visited_routes')}
+            </p>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function Detail({ label, value }: { label: string; value: string | null }) {
+  return (
+    <div>
+      <dt className="text-muted-foreground text-xs">{label}</dt>
+      <dd className="mt-0.5 break-words text-sm">{value || '-'}</dd>
+    </div>
+  );
+}

package/src/components/ui/chat/chat-sidebar-conversation-groups.tsx

@@ -48,6 +48,7 @@ export function ConversationGroups({
   isFetchingMoreConversations,
   onArchiveConversation,
   onLoadMoreConversations,
+  onlineConversationIds,
   onPinConversation,
   onSelectConversation,
   scope,
@@ -61,6 +62,7 @@ export function ConversationGroups({
   isFetchingMoreConversations?: boolean;
   onArchiveConversation?: (conversationId: string) => void;
   onLoadMoreConversations?: () => Promise<unknown> | undefined;
+  onlineConversationIds?: ReadonlySet<string>;
   onPinConversation?: (conversationId: string, pinned: boolean) => void;
   onSelectConversation: (conversationId: string) => void;
   scope?: ChatConversationScope;
@@ -166,7 +168,8 @@ export function ConversationGroups({
     count: items.length,
     estimateSize: (index) => {
       const item = items[index];
-      if (item?.type === 'conversation') return 36;
+      if (item?.type === 'conversation')
+        return item.conversation.metadata.externalChat === true ? 66 : 36;
       if (item?.type === 'loader') return 44;
       if (item?.type === 'source-group-label') return 34;
       return 30;
@@ -252,6 +255,7 @@ export function ConversationGroups({
                   conversation={item.conversation}
                   currentUserId={currentUserId}
                   isSelected={item.conversation.id === selectedConversationId}
+                  isOnline={onlineConversationIds?.has(item.conversation.id)}
                   onArchiveConversation={onArchiveConversation}
                   onPinConversation={onPinConversation}
                   onSelectConversation={onSelectConversation}