@agent-native/dispatch 0.0.0-beta-20260819155526

package/src/components/dispatch-control-plane.tsx

@@ -0,0 +1,416 @@
+import {
+  navigateWithAgentChatViewTransition,
+  useChatModels,
+} from "@agent-native/core/client/agent-chat";
+import { PromptComposer } from "@agent-native/core/client/composer";
+import { useActionQuery } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { IconChevronDown, IconClockHour4, IconPlus } from "@tabler/icons-react";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { Link, useNavigate } from "react-router";
+
+import type { ConnectedAppSummary } from "../lib/other-apps";
+import { cn } from "../lib/utils";
+import {
+  orderWorkspaceApps,
+  useWorkspaceAppLayout,
+  workspaceAppMatchesQuery,
+} from "../lib/workspace-app-layout";
+import {
+  isWorkspaceAppVisibleInDefaultLaunchers,
+  type WorkspaceAppSummary,
+} from "../lib/workspace-apps";
+import { ActionQueryError } from "./action-query-error";
+import {
+  APP_LIST_GRID_CLASS,
+  AppList,
+  APP_LIST_GRID_ROW_CLASS,
+} from "./app-list-row";
+import { CreateAppPopover } from "./create-app-popover";
+import { useSetPageTitle } from "./layout/HeaderActions";
+import { mergeOtherAppEntries, OtherAppsSection } from "./other-apps-section";
+import { Button } from "./ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "./ui/collapsible";
+import { Skeleton } from "./ui/skeleton";
+import { WorkspaceAppCard } from "./workspace-app-card";
+import {
+  WorkspaceAppSearch,
+  WorkspaceAppSearchEmpty,
+} from "./workspace-app-search";
+import type { CuratedWorkspaceTemplatesResult } from "./workspace-template-card";
+
+function SectionHeader({
+  title,
+  action,
+}: {
+  title: string;
+  action?: ReactNode;
+}) {
+  return (
+    <div className="flex min-w-0 items-center justify-between gap-3">
+      <h2 className="truncate text-sm font-semibold text-foreground">
+        {title}
+      </h2>
+      {action ? <div className="shrink-0">{action}</div> : null}
+    </div>
+  );
+}
+
+function CommandPanel() {
+  const t = useT();
+  const {
+    availableModels,
+    isLoading: modelListLoading,
+    onEffortChange,
+    onModelChange,
+    selectedEffort,
+    selectedEngine,
+    selectedModel,
+  } = useChatModels({ storageKey: "dispatch" });
+  const navigate = useNavigate();
+  const promptSuggestions = [
+    t("dispatch.pages.suggestionOnboardingApp", {
+      defaultValue: "Create an app for onboarding requests",
+    }),
+    t("dispatch.pages.suggestionAnalyticsAgents", {
+      defaultValue: "Check which agents can help with analytics",
+    }),
+  ];
+
+  function send(message: string) {
+    const trimmed = message.trim();
+    if (!trimmed) return;
+
+    navigateWithAgentChatViewTransition(navigate, "/chat", {
+      state: {
+        dispatchPrompt: {
+          id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+          message: trimmed,
+          selectedModel,
+          selectedEngine,
+          selectedEffort,
+        },
+      },
+    });
+  }
+
+  return (
+    <section className="flex flex-col">
+      <div className="mx-auto flex w-full max-w-[750px] flex-col pt-4 sm:pt-6">
+        <div className="mb-5 text-center">
+          <h2 className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">
+            {t("dispatch.pages.chatAcrossApps", {
+              defaultValue: "Chat across your apps",
+            })}
+          </h2>
+          <p className="mx-auto mt-2 max-w-xl text-sm leading-6 text-muted-foreground">
+            {t("dispatch.pages.chatAcrossAppsDescription", {
+              defaultValue:
+                "Route work, inspect status, or create something new from one place.",
+            })}
+          </p>
+        </div>
+        <PromptComposer
+          availableModels={availableModels}
+          modelListLoading={modelListLoading}
+          placeholder={t("dispatch.pages.overviewPromptPlaceholder", {
+            defaultValue: "Ask Dispatch anything...",
+          })}
+          selectedEffort={selectedEffort}
+          selectedEngine={selectedEngine}
+          selectedModel={selectedModel}
+          rootClassName="bg-card"
+          onEffortChange={onEffortChange}
+          onModelChange={onModelChange}
+          onSubmit={(text) => send(text)}
+        />
+        <div className="mt-3 flex flex-wrap justify-center gap-2">
+          {promptSuggestions.map((suggestion) => (
+            <button
+              key={suggestion}
+              type="button"
+              onClick={() => send(suggestion)}
+              className="cursor-pointer rounded-md border border-transparent bg-muted/60 px-2.5 py-1.5 text-xs text-muted-foreground transition-[background-color,color] hover:bg-muted hover:text-foreground"
+            >
+              {suggestion}
+            </button>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function AppsPanel({
+  apps,
+  isLoading,
+  connectedApps,
+  connectedAppsError,
+  connectedAppsLoading,
+  onRetryConnectedApps,
+  curatedTemplates,
+  curatedTemplatesError,
+  curatedTemplatesLoading,
+  onRetryCuratedTemplates,
+}: {
+  apps: WorkspaceAppSummary[];
+  isLoading: boolean;
+  connectedApps: ConnectedAppSummary[];
+  connectedAppsError?: Error | null;
+  connectedAppsLoading: boolean;
+  onRetryConnectedApps: () => void;
+  curatedTemplates?: CuratedWorkspaceTemplatesResult;
+  curatedTemplatesError?: Error | null;
+  curatedTemplatesLoading: boolean;
+  onRetryCuratedTemplates: () => void;
+}) {
+  const t = useT();
+  const [showPending, setShowPending] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const { layout, persistenceError, togglePinned } = useWorkspaceAppLayout();
+  const visibleApps = apps.filter(
+    (app) => isWorkspaceAppVisibleInDefaultLaunchers(app) && !app.archived,
+  );
+  const activeApps = visibleApps.filter((app) => app.status !== "pending");
+  const pendingApps = visibleApps.filter((app) => app.status === "pending");
+  const orderedActiveApps = orderWorkspaceApps(activeApps, layout);
+  const orderedPendingApps = orderWorkspaceApps(pendingApps, layout);
+  const filteredActiveApps = orderedActiveApps.filter((app) =>
+    workspaceAppMatchesQuery(app, searchQuery),
+  );
+  const filteredPendingApps = orderedPendingApps.filter((app) =>
+    workspaceAppMatchesQuery(app, searchQuery),
+  );
+  const hasSearchResults =
+    filteredActiveApps.length > 0 || filteredPendingApps.length > 0;
+  const otherAppEntries = mergeOtherAppEntries({
+    templates: curatedTemplates,
+    connectedApps,
+    workspaceApps: apps,
+  });
+  const showSkeletons =
+    isLoading && activeApps.length === 0 && pendingApps.length === 0;
+
+  return (
+    <section className="mx-auto flex w-full max-w-[1000px] flex-col gap-3">
+      <SectionHeader
+        title="Apps"
+        action={
+          <div className="flex min-w-0 flex-wrap items-center justify-end gap-1.5">
+            <Button variant="ghost" size="sm" asChild>
+              <Link to="/apps" className="text-muted-foreground">
+                View all
+              </Link>
+            </Button>
+            {!showSkeletons && visibleApps.length > 0 ? (
+              <WorkspaceAppSearch
+                className="w-[220px]"
+                query={searchQuery}
+                onQueryChange={setSearchQuery}
+              />
+            ) : null}
+            <CreateAppPopover
+              align="end"
+              trigger={
+                <Button variant="default" size="sm" className="gap-1.5">
+                  <IconPlus size={14} />
+                  {t("dispatch.pages.newApp", { defaultValue: "New" })}
+                </Button>
+              }
+            />
+          </div>
+        }
+      />
+      {!showSkeletons && visibleApps.length > 0 && persistenceError ? (
+        <p className="text-xs text-muted-foreground" role="status">
+          {persistenceError === "both"
+            ? t("dispatch.pages.appPinSaveFailed", {
+                defaultValue: "App pins could not be saved.",
+              })
+            : t("dispatch.pages.appPinSavedLocally", {
+                defaultValue: "App pins are saved on this device only.",
+              })}
+        </p>
+      ) : null}
+      {showSkeletons ? (
+        <OverviewAppsSkeleton />
+      ) : searchQuery.trim() && !hasSearchResults ? (
+        <WorkspaceAppSearchEmpty
+          query={searchQuery}
+          onClear={() => setSearchQuery("")}
+        />
+      ) : (
+        <>
+          <AppList className={APP_LIST_GRID_CLASS}>
+            {filteredActiveApps.map((app) => (
+              <WorkspaceAppCard
+                key={app.id}
+                app={app}
+                className={APP_LIST_GRID_ROW_CLASS}
+                isPinned={layout.pinnedIds.includes(app.id)}
+                onTogglePinned={() => togglePinned(app.id)}
+              />
+            ))}
+            {filteredActiveApps.length === 0 &&
+            !searchQuery.trim() &&
+            otherAppEntries.length === 0 &&
+            !curatedTemplatesLoading &&
+            !connectedAppsLoading &&
+            !curatedTemplatesError &&
+            !connectedAppsError ? (
+              <p className="px-4 py-3 text-sm text-muted-foreground">
+                {t("dispatch.pages.noApps", {
+                  defaultValue: "No apps yet.",
+                })}
+              </p>
+            ) : null}
+            {!searchQuery.trim() ? (
+              <OtherAppsSection
+                templates={curatedTemplates}
+                connectedApps={connectedApps}
+                workspaceApps={apps}
+                templatesLoading={curatedTemplatesLoading}
+                connectedAppsLoading={connectedAppsLoading}
+                templatesError={curatedTemplatesError}
+                connectedAppsError={connectedAppsError}
+                onRetryTemplates={onRetryCuratedTemplates}
+                onRetryConnectedApps={onRetryConnectedApps}
+                heading={null}
+                embeddedInList
+              />
+            ) : null}
+          </AppList>
+        </>
+      )}
+      {pendingApps.length > 0 &&
+      (!searchQuery.trim() || filteredPendingApps.length > 0) ? (
+        <Collapsible
+          open={showPending || Boolean(searchQuery.trim())}
+          onOpenChange={setShowPending}
+        >
+          <div className="space-y-3 border-t pt-3">
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <div className="flex min-w-0 items-center gap-2">
+                <IconClockHour4
+                  size={15}
+                  className="shrink-0 text-muted-foreground"
+                />
+                <div className="min-w-0">
+                  <h3 className="text-xs font-semibold text-foreground">
+                    {t("dispatch.pages.pendingApps")}
+                  </h3>
+                  <p className="text-xs text-muted-foreground">
+                    {t("dispatch.pages.pendingAppsDescription", {
+                      count: pendingApps.length,
+                    })}
+                  </p>
+                </div>
+              </div>
+              <CollapsibleTrigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 gap-1.5 px-2 text-xs"
+                >
+                  {showPending || Boolean(searchQuery.trim())
+                    ? t("dispatch.pages.hidePendingApps")
+                    : t("dispatch.pages.showPendingApps")}
+                  <IconChevronDown
+                    size={13}
+                    className={
+                      showPending || searchQuery.trim()
+                        ? "rotate-180"
+                        : undefined
+                    }
+                  />
+                </Button>
+              </CollapsibleTrigger>
+            </div>
+            <CollapsibleContent>
+              <AppList className={APP_LIST_GRID_CLASS}>
+                {filteredPendingApps.map((app) => (
+                  <WorkspaceAppCard
+                    key={app.id}
+                    app={app}
+                    className={APP_LIST_GRID_ROW_CLASS}
+                  />
+                ))}
+              </AppList>
+            </CollapsibleContent>
+          </div>
+        </Collapsible>
+      ) : null}
+    </section>
+  );
+}
+
+function OverviewAppsSkeleton() {
+  return (
+    <AppList className={APP_LIST_GRID_CLASS}>
+      {Array.from({ length: 4 }).map((_, index) => (
+        <div
+          key={index}
+          className={cn(
+            "flex min-w-0 items-center gap-3 border-b px-4 py-3.5 last:border-b-0",
+            APP_LIST_GRID_ROW_CLASS,
+          )}
+        >
+          <Skeleton className="size-8 shrink-0 rounded-xl" />
+          <div className="min-w-0 flex-1 space-y-2">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-3 w-2/3" />
+          </div>
+          <Skeleton className="h-9 w-24 shrink-0 rounded-md" />
+        </div>
+      ))}
+    </AppList>
+  );
+}
+
+export function DispatchControlPlane() {
+  useSetPageTitle(<span aria-hidden />);
+  const appsQuery = useActionQuery<WorkspaceAppSummary[]>(
+    "list-workspace-apps",
+    { includeAgentCards: false, includeArchived: true },
+  );
+  const connectedAppsQuery = useActionQuery<ConnectedAppSummary[]>(
+    "list-connected-agents",
+    {},
+  );
+  const curatedTemplatesQuery = useActionQuery<CuratedWorkspaceTemplatesResult>(
+    "list-curated-workspace-templates",
+    {},
+  );
+  const { data: workspaceApps = [], isLoading: appsLoading } = appsQuery;
+
+  return (
+    <div className="flex flex-col gap-8">
+      <CommandPanel />
+      {appsQuery.isError ? (
+        <ActionQueryError
+          error={appsQuery.error}
+          onRetry={() => void appsQuery.refetch()}
+        />
+      ) : (
+        <AppsPanel
+          apps={workspaceApps ?? []}
+          isLoading={appsLoading}
+          connectedApps={connectedAppsQuery.data ?? []}
+          connectedAppsError={connectedAppsQuery.error}
+          connectedAppsLoading={connectedAppsQuery.isLoading}
+          onRetryConnectedApps={() => void connectedAppsQuery.refetch()}
+          curatedTemplates={curatedTemplatesQuery.data}
+          curatedTemplatesError={curatedTemplatesQuery.error}
+          curatedTemplatesLoading={curatedTemplatesQuery.isLoading}
+          onRetryCuratedTemplates={() => void curatedTemplatesQuery.refetch()}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/dispatch-shell.tsx

@@ -0,0 +1,59 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconInfoCircle } from "@tabler/icons-react";
+import { type ReactNode } from "react";
+import { useLocation } from "react-router";
+
+import { dispatchDocsHrefForPath, DocsLink } from "./docs-link";
+import { useSetPageTitle } from "./layout/HeaderActions";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+
+/**
+ * DispatchShell renders the per-page title (with an optional click-to-open
+ * description popover) into the global header via the HeaderActions store.
+ * The actual chrome (sidebar, AgentSidebar, header bar with AgentToggleButton)
+ * is provided by `Layout` mounted in `root.tsx`.
+ */
+export function DispatchShell({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: string;
+  children: ReactNode;
+}) {
+  const t = useT();
+  const location = useLocation();
+  const docsHref = dispatchDocsHrefForPath(location.pathname);
+  useSetPageTitle(
+    <div className="flex items-center gap-2 min-w-0">
+      <h1 className="text-lg font-semibold tracking-tight truncate text-foreground">
+        {title}
+      </h1>
+      {docsHref ? (
+        <DocsLink href={docsHref} label={`Open ${title} documentation`} />
+      ) : description ? (
+        <Popover>
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              className="inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/70 hover:bg-accent hover:text-foreground cursor-pointer"
+              aria-label={t("dispatch.sidebar.aboutPage", { title })}
+            >
+              <IconInfoCircle className="h-3.5 w-3.5" />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent
+            side="bottom"
+            align="start"
+            className="max-w-72 text-xs leading-relaxed"
+          >
+            {description}
+          </PopoverContent>
+        </Popover>
+      ) : null}
+    </div>,
+  );
+
+  return <>{children}</>;
+}

package/src/components/docs-link.tsx

@@ -0,0 +1,52 @@
+import { IconHelpCircle } from "@tabler/icons-react";
+
+import { cn } from "../lib/utils";
+
+export const DISPATCH_DOCS = {
+  dispatch: "https://agent-native.com/docs/dispatch#what-it-does",
+  workspace: "https://agent-native.com/docs/agent-resources#global-resources",
+  integrations: "https://agent-native.com/docs/dispatch#secret-vault",
+  audit: "https://agent-native.com/docs/audit-log",
+  threadDebug: "https://agent-native.com/docs/dispatch#reliability",
+  dreams: "https://agent-native.com/docs/dispatch#dreams",
+  settings: "https://agent-native.com/docs/agent-surfaces",
+} as const;
+
+export function dispatchDocsHrefForPath(pathname: string): string | undefined {
+  if (pathname === "/admin/workspace") return DISPATCH_DOCS.workspace;
+  if (pathname === "/admin/integrations") return DISPATCH_DOCS.integrations;
+  if (pathname === "/admin/audit") return DISPATCH_DOCS.audit;
+  if (pathname === "/admin/thread-debug") return DISPATCH_DOCS.threadDebug;
+  if (pathname === "/admin/dreams") return DISPATCH_DOCS.dreams;
+  if (pathname.startsWith("/admin/")) return DISPATCH_DOCS.dispatch;
+  if (pathname === "/settings" || pathname.startsWith("/settings/")) {
+    return DISPATCH_DOCS.settings;
+  }
+  return undefined;
+}
+
+export function DocsLink({
+  href,
+  label,
+  className,
+}: {
+  href: string;
+  label: string;
+  className?: string;
+}) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={label}
+      title={label}
+      className={cn(
+        "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-accent/60 hover:text-foreground",
+        className,
+      )}
+    >
+      <IconHelpCircle className="size-3" />
+    </a>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Public dispatch UI components. Most consumers only use `dispatchRoutes`
+ * and never import from here directly — components are exported as a
+ * customization escape hatch for embedding (e.g. mount `<DispatchShell>`
+ * inside a parent layout, or render `<AppKeysPopover>` next to a custom
+ * card list).
+ */
+export { DispatchShell } from "./dispatch-shell.js";
+export { AdminShell } from "./admin-navigation.js";
+export { Layout, NavContent } from "./layout/Layout.js";
+export type {
+  DispatchExtensionConfig,
+  DispatchNavIcon,
+  DispatchNavItem,
+  DispatchNavSection,
+} from "./layout/Layout.js";
+export { CreateAppPopover, CreateAppFlow } from "./create-app-popover.js";
+export { AppKeysPopover } from "./app-keys-popover.js";
+export { ActionQueryError } from "./action-query-error.js";
+export { SimpleAgentsPanel } from "./simple-agents-panel.js";
+export { WorkspaceAppCard } from "./workspace-app-card.js";

package/src/components/layout/Header.tsx

@@ -0,0 +1,100 @@
+import { AgentToggleButton } from "@agent-native/core/client/agent-chat";
+import { RunsTray } from "@agent-native/core/client/progress";
+import { IconLayoutSidebar } from "@tabler/icons-react";
+import { useLocation, useNavigate } from "react-router";
+
+import { Button } from "../ui/button";
+import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
+
+const pageTitles: Record<string, string> = {
+  "/": "Overview",
+  "/overview": "Overview",
+  "/vault": "Vault",
+  "/integrations": "Integrations",
+  "/workspace": "Resources",
+  "/messaging": "Messaging",
+  "/agents": "Agents",
+  "/destinations": "Destinations",
+  "/identities": "Identities",
+  "/approvals": "Approvals",
+  "/automations": "Automations",
+  "/audit": "Audit",
+  "/dreams": "Dreams",
+  "/thread-debug": "Thread Debug",
+  "/transactional-email": "Transactional email",
+  "/settings": "Settings",
+};
+
+function resolveTitle(pathname: string): string {
+  if (pathname === "/admin" || pathname === "/admin/") return "Admin";
+  if (pathname.startsWith("/admin/")) {
+    const adminPath = pathname.slice("/admin".length);
+    return pageTitles[adminPath] ?? "Admin";
+  }
+  if (pageTitles[pathname]) return pageTitles[pathname];
+
+  if (pathname.startsWith("/extensions")) return "Extensions";
+
+  return "Dispatch";
+}
+
+export function Header({
+  onOpenMobile,
+  showAgentToggle = true,
+}: {
+  onOpenMobile?: () => void;
+  showAgentToggle?: boolean;
+}) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const title = useHeaderTitle();
+  const actions = useHeaderActions();
+
+  function openRunThread(threadId: string) {
+    navigate("/chat", {
+      state: {
+        dispatchThread: {
+          id: `${Date.now()}-${threadId}`,
+          threadId,
+        },
+      },
+    });
+    window.requestAnimationFrame(() => {
+      window.dispatchEvent(
+        new CustomEvent("agent-chat:open-thread", {
+          detail: { threadId },
+        }),
+      );
+    });
+  }
+
+  return (
+    <header className="flex h-12 shrink-0 items-center gap-3 border-b border-border bg-background px-4 lg:px-6">
+      {onOpenMobile ? (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 lg:hidden cursor-pointer"
+          onClick={onOpenMobile}
+          aria-label="Open navigation"
+        >
+          <IconLayoutSidebar />
+        </Button>
+      ) : null}
+      <div className="flex items-center gap-3 flex-1 min-w-0">
+        {title ?? (
+          <h1 className="text-lg font-semibold tracking-tight truncate">
+            {resolveTitle(location.pathname)}
+          </h1>
+        )}
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        {actions}
+        <RunsTray limit={8} onOpenThread={openRunThread} />
+        {showAgentToggle ? (
+          <AgentToggleButton className="h-8 w-8 rounded-md hover:bg-accent" />
+        ) : null}
+      </div>
+    </header>
+  );
+}

package/src/components/layout/HeaderActions.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/app-shell";

package/src/components/layout/Layout.app-chat.spec.ts

@@ -0,0 +1,31 @@
+import { readFileSync } from "node:fs";
+
+import { describe, expect, it } from "vitest";
+
+const layoutSource = readFileSync(
+  new URL("./Layout.tsx", import.meta.url),
+  "utf8",
+);
+const railSource = readFileSync(
+  new URL("../workspace-app-host.tsx", import.meta.url),
+  "utf8",
+);
+
+describe("Dispatch workspace app chat rail", () => {
+  it("routes the open-app rail through the shared app-chat component", () => {
+    // Both app surfaces must share one rail: a second inlined AgentSidebar is
+    // how one of them silently keeps talking to Dispatch's own agent.
+    expect(layoutSource).toContain("<WorkspaceAppChatRail");
+    expect(layoutSource).toContain("data-dispatch-workspace-app-frame");
+    expect(layoutSource).toContain(
+      'window.dispatchEvent(new Event("agent-panel:toggle"))',
+    );
+    expect(layoutSource).not.toContain('openStorageKey="dispatch-app-chat"');
+  });
+
+  it("persists app-specific threads and points the rail at the app's own agent", () => {
+    expect(railSource).toContain('openStorageKey="dispatch-app-chat"');
+    expect(railSource).toContain("storageKey={`dispatch-app-chat:${appId}`}");
+    expect(railSource).toContain("apiUrl={appChat.apiUrl}");
+  });
+});