@assistant-ui/core 0.3.20 → 0.3.21

package/src/react/primitives/message/MessageAttachments.tsx

@@ -1,4 +1,4 @@
-import type { CompleteAttachment } from "../../../types/attachment";
+import type { Attachment } from "../../../types/attachment";
 import {
   type ComponentType,
   type FC,
@@ -25,15 +25,19 @@ export namespace MessagePrimitiveAttachments {
         children?: never;
       }
     | {
-        /** Render function called for each attachment. Receives the attachment. */
-        children: (value: { attachment: CompleteAttachment }) => ReactNode;
+        /**
+         * Render function called for each attachment. Receives the attachment,
+         * which is still being prepared while the message is the composer's
+         * submission.
+         */
+        children: (value: { attachment: Attachment }) => ReactNode;
         components?: never;
       };
 }
 
 const getComponent = (
   components: MessageAttachmentsComponentConfig | undefined,
-  attachment: CompleteAttachment,
+  attachment: Attachment,
 ) => {
   const type = attachment.type;
   switch (type) {
@@ -54,7 +58,7 @@ const AttachmentComponent: FC<{
   const attachment = useAuiState((s) => s.attachment);
   if (!attachment) return null;
 
-  const Component = getComponent(components, attachment as CompleteAttachment);
+  const Component = getComponent(components, attachment);
   if (!Component) return null;
   return <Component />;
 };
@@ -90,12 +94,14 @@ MessagePrimitiveAttachmentByIndex.displayName =
   "MessagePrimitive.AttachmentByIndex";
 
 const MessagePrimitiveAttachmentsInner: FC<{
-  children: (value: { attachment: CompleteAttachment }) => ReactNode;
+  children: (value: { attachment: Attachment }) => ReactNode;
 }> = ({ children }) => {
   const attachmentIds = useAuiState(
     useShallowSelector((s) => {
       if (s.message.role !== "user") return [];
-      return (s.message.attachments ?? []).map((attachment) => attachment.id);
+      const attachments =
+        s.message.submission?.attachments ?? s.message.attachments;
+      return (attachments ?? []).map((attachment) => attachment.id);
     }),
   );
 
@@ -109,7 +115,7 @@ const MessagePrimitiveAttachmentsInner: FC<{
             {(getItem) =>
               children({
                 get attachment() {
-                  return getItem() as CompleteAttachment;
+                  return getItem();
                 },
               })
             }

package/src/react/primitives/message/MessageGroupedParts.test.tsx

@@ -1,22 +1,48 @@
 // @vitest-environment jsdom
 import { cleanup, render } from "@testing-library/react";
+import { useEffect } from "react";
 import { afterEach, describe, expect, it } from "vitest";
 import type { ThreadMessageLike } from "../../../runtime/utils/thread-message-like";
+import { useAui } from "@assistant-ui/store";
 import { AssistantRuntimeProvider } from "../../AssistantRuntimeProvider";
 import { ThreadPrimitiveMessages } from "../thread/ThreadMessages";
 import { useExternalStoreRuntime } from "../../runtimes/useExternalStoreRuntime";
 import { groupPartByType } from "../../utils/groupParts";
+import { useAssistantDataUI } from "../../model-context/useAssistantDataUI";
+import { useAssistantToolUI } from "../../model-context/useAssistantToolUI";
 import { MessagePrimitiveGroupedParts } from "./MessageGroupedParts";
 
+const NamedTool = () => <b>named</b>;
+const RegisterNamedTool = () => {
+  useAssistantToolUI({ toolName: "task", render: NamedTool });
+  return null;
+};
+
+const NamedData = ({ data }: { data: { value: string } }) => (
+  <b>{data.value}</b>
+);
+const RegisterNamedData = () => {
+  useAssistantDataUI({ name: "status", render: NamedData });
+  return null;
+};
+const RegisterFallbackData = () => {
+  const aui = useAui();
+  useEffect(() => aui.dataRenderers.setFallbackDataUI(NamedData), [aui]);
+  return null;
+};
+
 type Msg = {
   id: string;
-  content: readonly {
-    type: "tool-call";
-    toolCallId: string;
-    toolName: string;
-    args: {};
-    result?: { ok: true };
-  }[];
+  content: readonly (
+    | {
+        type: "tool-call";
+        toolCallId: string;
+        toolName: string;
+        args: {};
+        result?: { ok: true };
+      }
+    | { type: "data"; name: string; data: { value: string } }
+  )[];
 };
 
 const task = (
@@ -96,4 +122,122 @@ describe("MessagePrimitive.GroupedParts", () => {
     });
     expect(group?.indices).toHaveLength(3);
   });
+
+  it("renders registered tool UIs when the render function returns null", () => {
+    const GroupedParts = () => (
+      <>
+        <RegisterNamedTool />
+        <MessagePrimitiveGroupedParts groupBy={groupPartByType({})}>
+          {() => null}
+        </MessagePrimitiveGroupedParts>
+      </>
+    );
+
+    const App = () => {
+      const runtime = useExternalStoreRuntime<Msg>({
+        messages: [{ id: "assistant-1", content: [task("task-1", true)] }],
+        convertMessage,
+        onNew: async () => {},
+      });
+      return (
+        <AssistantRuntimeProvider runtime={runtime}>
+          <ThreadPrimitiveMessages components={{ Message: GroupedParts }} />
+        </AssistantRuntimeProvider>
+      );
+    };
+
+    expect(render(<App />).container.innerHTML).toContain("named");
+  });
+
+  it("renders a registered data UI when the render function returns null", () => {
+    const GroupedParts = () => (
+      <>
+        <RegisterNamedData />
+        <MessagePrimitiveGroupedParts groupBy={groupPartByType({})}>
+          {() => null}
+        </MessagePrimitiveGroupedParts>
+      </>
+    );
+
+    const App = () => {
+      const runtime = useExternalStoreRuntime<Msg>({
+        messages: [
+          {
+            id: "assistant-1",
+            content: [
+              { type: "data", name: "status", data: { value: "named" } },
+            ],
+          },
+        ],
+        convertMessage,
+        onNew: async () => {},
+      });
+      return (
+        <AssistantRuntimeProvider runtime={runtime}>
+          <ThreadPrimitiveMessages components={{ Message: GroupedParts }} />
+        </AssistantRuntimeProvider>
+      );
+    };
+
+    expect(render(<App />).container.innerHTML).toContain("named");
+  });
+
+  it("does not render registered UIs when a leaf returns an empty fragment", () => {
+    const GroupedParts = () => (
+      <>
+        <RegisterNamedTool />
+        <MessagePrimitiveGroupedParts groupBy={groupPartByType({})}>
+          {() => <></>}
+        </MessagePrimitiveGroupedParts>
+      </>
+    );
+
+    const App = () => {
+      const runtime = useExternalStoreRuntime<Msg>({
+        messages: [{ id: "assistant-1", content: [task("task-1", true)] }],
+        convertMessage,
+        onNew: async () => {},
+      });
+      return (
+        <AssistantRuntimeProvider runtime={runtime}>
+          <ThreadPrimitiveMessages components={{ Message: GroupedParts }} />
+        </AssistantRuntimeProvider>
+      );
+    };
+
+    expect(render(<App />).container.innerHTML).not.toContain("named");
+  });
+
+  it("renders the fallback data UI for an unregistered data part", () => {
+    const GroupedParts = () => (
+      <>
+        <RegisterFallbackData />
+        <MessagePrimitiveGroupedParts groupBy={groupPartByType({})}>
+          {() => null}
+        </MessagePrimitiveGroupedParts>
+      </>
+    );
+
+    const App = () => {
+      const runtime = useExternalStoreRuntime<Msg>({
+        messages: [
+          {
+            id: "assistant-1",
+            content: [
+              { type: "data", name: "unknown", data: { value: "fallback" } },
+            ],
+          },
+        ],
+        convertMessage,
+        onNew: async () => {},
+      });
+      return (
+        <AssistantRuntimeProvider runtime={runtime}>
+          <ThreadPrimitiveMessages components={{ Message: GroupedParts }} />
+        </AssistantRuntimeProvider>
+      );
+    };
+
+    expect(render(<App />).container.innerHTML).toContain("fallback");
+  });
 });

package/src/react/primitives/message/MessageGroupedParts.tsx

@@ -15,7 +15,11 @@ import {
   type GroupByContext,
   type GroupNode,
 } from "../../utils/groupParts";
-import { MessagePartChildren, type EnrichedPartState } from "./MessageParts";
+import {
+  DefaultPartFallback,
+  MessagePartChildren,
+  type EnrichedPartState,
+} from "./MessageParts";
 
 export namespace MessagePrimitiveGroupedParts {
   /** Per status tallies over the group's `indices`; they sum to `indices.length`. */
@@ -80,7 +84,9 @@ export namespace MessagePrimitiveGroupedParts {
      * For group nodes: the recursively-rendered subtree (subgroups +
      * leaf parts). For leaf parts: a sentinel that throws when rendered
      * — accidental fall-through (`default: return children;`) errors
-     * loudly instead of silently rendering nothing.
+     * loudly instead of silently rendering nothing. Returning `null` for a
+     * leaf renders its registered tool or data UI, when one exists; return an
+     * empty fragment to suppress that registered UI explicitly.
      */
     readonly children: ReactNode;
   };
@@ -135,11 +141,14 @@ export namespace MessagePrimitiveGroupedParts {
      * (when the `indicator` condition is met) once for the trailing
      * {@link IndicatorPart}. Switch on `part.type`: `"group-…"` cases wrap
      * `children`; real part types (`"text"`, `"tool-call"`, …) render the
-     * part directly; `"indicator"` renders status/loading UI.
+     * part directly. Returning `null` for a tool or data leaf uses its
+     * registered UI, while an empty fragment suppresses it; `"indicator"`
+     * renders status/loading UI.
      *
      * Leaf parts receive the same {@link EnrichedPartState} that
      * `<MessagePrimitive.Parts>` would produce (`toolUI`, `addResult`,
-     * `resume`, `respondToApproval`, `dataRendererUI`).
+     * `resume`, `respondToApproval`, `unstable_recordInteraction`,
+     * `dataRendererUI`).
      */
     readonly children: (info: RenderInfo<TKey>) => ReactNode;
   };
@@ -181,7 +190,7 @@ const PartChildrenSentinel: FC = () => {
   throw new Error(
     "MessagePrimitive.GroupedParts: rendered `children` under a leaf " +
       "part. `children` is only meaningful for `group-…` cases — add a " +
-      "matching case for the part type or return `null` to skip it.",
+      "matching case for the part type or return `null` to use registered UIs.",
   );
 };
 
@@ -199,7 +208,11 @@ const renderNode = <TKey extends `group-${string}`>(
         key={node.idKey ? `part-${node.idKey}` : `part-${node.index}`}
         index={node.index}
       >
-        {({ part }) => render({ part, children: <PartChildrenSentinel /> })}
+        {({ part }) =>
+          render({ part, children: <PartChildrenSentinel /> }) ?? (
+            <DefaultPartFallback />
+          )
+        }
       </MessagePartChildren>
     );
   }

package/src/react/primitives/message/MessageParts.test.tsx

@@ -0,0 +1,84 @@
+// @vitest-environment jsdom
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import type { ThreadMessageLike } from "../../../runtime/utils/thread-message-like";
+import { AssistantRuntimeProvider } from "../../AssistantRuntimeProvider";
+import { ThreadPrimitiveMessages } from "../thread/ThreadMessages";
+import { useExternalStoreRuntime } from "../../runtimes/useExternalStoreRuntime";
+import { MessagePrimitiveParts } from "./MessageParts";
+
+const Named = () => <b>named</b>;
+const Fallback = () => <i>fallback</i>;
+
+const renderParts = (
+  content: ThreadMessageLike["content"],
+  components: MessagePrimitiveParts.Props["components"],
+) => {
+  const Message = () => <MessagePrimitiveParts components={components} />;
+  const messages: ThreadMessageLike[] = [
+    { id: "message", role: "assistant", content },
+  ];
+  const App = () => {
+    const runtime = useExternalStoreRuntime({
+      messages,
+      convertMessage: (message) => message,
+      onNew: async () => {},
+    });
+    return (
+      <AssistantRuntimeProvider runtime={runtime}>
+        <ThreadPrimitiveMessages components={{ Message }} />
+      </AssistantRuntimeProvider>
+    );
+  };
+  return render(<App />).container.innerHTML;
+};
+
+const toolCall = (toolName: string): ThreadMessageLike["content"] => [
+  { type: "tool-call", toolCallId: "call", toolName, args: {} },
+];
+
+const dataPart = (name: string): ThreadMessageLike["content"] => [
+  { type: "data", name, data: 1 },
+];
+
+afterEach(cleanup);
+
+describe("MessagePrimitive.Parts", () => {
+  it.each(["toString", "constructor", "__proto__"])(
+    "falls back for a tool call named %s that only Object.prototype has",
+    (toolName) => {
+      expect(
+        renderParts(toolCall(toolName), {
+          tools: { by_name: { other: Named }, Fallback },
+        }),
+      ).toBe("<i>fallback</i>");
+    },
+  );
+
+  it.each(["toString", "constructor", "__proto__"])(
+    "falls back for a data part named %s that only Object.prototype has",
+    (name) => {
+      expect(
+        renderParts(dataPart(name), {
+          data: { by_name: { other: Named }, Fallback },
+        }),
+      ).toBe("<i>fallback</i>");
+    },
+  );
+
+  it("renders a tool UI registered under an inherited name", () => {
+    expect(
+      renderParts(toolCall("toString"), {
+        tools: { by_name: { toString: Named }, Fallback },
+      }),
+    ).toBe("<b>named</b>");
+  });
+
+  it("renders a data UI registered under an inherited name", () => {
+    expect(
+      renderParts(dataPart("toString"), {
+        data: { by_name: { toString: Named }, Fallback },
+      }),
+    ).toBe("<b>named</b>");
+  });
+});

package/src/react/primitives/message/MessageParts.tool-interaction.test.tsx

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MessagePartComponent } from "./MessageParts";
+
+const fixture = vi.hoisted(() => ({
+  recordInteraction: vi.fn(),
+  part: {
+    type: "tool-call",
+    toolCallId: "call-1",
+    toolName: "weather",
+    args: {},
+    argsText: "{}",
+    status: { type: "complete" },
+  },
+  state: {
+    tools: { toolUIs: {} as Record<string, unknown> },
+  },
+}));
+
+vi.mock("@assistant-ui/store", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@assistant-ui/store")>()),
+  useAui: () => ({
+    part: {
+      addToolResult: vi.fn(),
+      resumeToolCall: vi.fn(),
+      respondToToolApproval: vi.fn(),
+      unstable_recordInteraction: fixture.recordInteraction,
+    },
+  }),
+  useAuiState: <T,>(selector: (state: unknown) => T) =>
+    selector({ ...fixture.state, part: fixture.part }),
+}));
+
+const interaction = { type: "action" as const, payload: { choice: "retry" } };
+
+afterEach(cleanup);
+
+beforeEach(() => {
+  fixture.recordInteraction.mockReset();
+  fixture.state.tools.toolUIs = {};
+});
+
+describe("MessagePartComponent", () => {
+  it.each(["override", "registered"] as const)(
+    "forwards unstable_recordInteraction to the %s tool UI",
+    (kind) => {
+      const Tool = ({
+        unstable_recordInteraction,
+      }: {
+        unstable_recordInteraction?:
+          | ((input: typeof interaction) => Promise<void>)
+          | undefined;
+      }) => {
+        void unstable_recordInteraction?.(interaction);
+        return null;
+      };
+      const components =
+        kind === "override" ? { tools: { Override: Tool } } : {};
+      if (kind === "registered") {
+        fixture.state.tools.toolUIs = { weather: [{ render: Tool }] };
+      }
+
+      render(<MessagePartComponent components={components} />);
+
+      expect(fixture.recordInteraction).toHaveBeenCalledWith(interaction);
+    },
+  );
+});

package/src/react/primitives/message/MessageParts.tsx

@@ -423,6 +423,7 @@ export const MessagePartComponent: FC<MessagePartComponentProps> = ({
     const addResult = aui.part.addToolResult;
     const resume = aui.part.resumeToolCall;
     const respondToApproval = aui.part.respondToToolApproval;
+    const unstable_recordInteraction = aui.part.unstable_recordInteraction;
     if ("Override" in tools)
       return (
         <tools.Override
@@ -430,9 +431,13 @@ export const MessagePartComponent: FC<MessagePartComponentProps> = ({
           addResult={addResult}
           resume={resume}
           respondToApproval={respondToApproval}
+          {...(unstable_recordInteraction && { unstable_recordInteraction })}
         />
       );
-    const Tool = tools.by_name?.[part.toolName] ?? tools.Fallback;
+    const Tool =
+      (tools.by_name && Object.hasOwn(tools.by_name, part.toolName)
+        ? tools.by_name[part.toolName]
+        : undefined) ?? tools.Fallback;
     return (
       <ToolUIDisplay
         {...part}
@@ -440,6 +445,7 @@ export const MessagePartComponent: FC<MessagePartComponentProps> = ({
         addResult={addResult}
         resume={resume}
         respondToApproval={respondToApproval}
+        {...(unstable_recordInteraction && { unstable_recordInteraction })}
       />
     );
   }
@@ -467,7 +473,10 @@ export const MessagePartComponent: FC<MessagePartComponentProps> = ({
       return <Audio {...part} />;
 
     case "data": {
-      const Data = data?.by_name?.[part.name] ?? data?.Fallback;
+      const Data =
+        (data?.by_name && Object.hasOwn(data.by_name, part.name)
+          ? data.by_name[part.name]
+          : undefined) ?? data?.Fallback;
       return <DataUIDisplay {...part} Fallback={Data} />;
     }
 
@@ -494,9 +503,11 @@ export const MessagePartComponent: FC<MessagePartComponentProps> = ({
       );
     }
 
-    default:
-      console.warn(`Unknown message part type: ${type}`);
+    default: {
+      const unhandledType: never = type;
+      console.warn(`Unknown message part type: ${unhandledType}`);
       return null;
+    }
   }
 };
 
@@ -635,6 +646,7 @@ const RegisteredToolUI: FC = () => {
   const Render = useAuiState((s) =>
     s.part.type === "tool-call" ? resolveToolRender(s.tools, s.part) : null,
   );
+  const unstable_recordInteraction = aui.part.unstable_recordInteraction;
 
   if (!Render || part.type !== "tool-call") return null;
 
@@ -644,6 +656,7 @@ const RegisteredToolUI: FC = () => {
       addResult={aui.part.addToolResult}
       resume={aui.part.resumeToolCall}
       respondToApproval={aui.part.respondToToolApproval}
+      {...(unstable_recordInteraction && { unstable_recordInteraction })}
     />
   );
 };
@@ -678,7 +691,7 @@ const RegisteredDataRendererUI: FC = () => {
  *
  * To explicitly render nothing (suppressing registered UIs), return <></>.
  */
-const DefaultPartFallback: FC = () => {
+export const DefaultPartFallback: FC = () => {
   const partType = useAuiState((s) => s.part.type);
 
   if (partType === "tool-call") return <RegisteredToolUI />;
@@ -692,7 +705,8 @@ export type { PartState };
 /**
  * Enriched part state passed to children render functions.
  *
- * For tool-call parts, adds `toolUI`, `addResult`, and `resume`.
+ * For tool-call parts, adds `toolUI`, `addResult`, `resume`, and
+ * `unstable_recordInteraction`.
  * For data parts, adds `dataRendererUI`.
  *
  * The render function is also invoked once with a synthetic empty text part
@@ -711,6 +725,9 @@ export type EnrichedPartState =
       resume: ToolCallMessagePartProps["resume"];
       /** Respond to a server-side tool approval gate. */
       respondToApproval: ToolCallMessagePartProps["respondToApproval"];
+      unstable_recordInteraction?:
+        | ToolCallMessagePartProps["unstable_recordInteraction"]
+        | undefined;
     })
   | (Extract<PartState, { type: "data" }> & {
       /** The registered data renderer UI element, or null if none registered. */
@@ -727,8 +744,8 @@ const EMPTY_RUNNING_TEXT_PART: Extract<EnrichedPartState, { type: "text" }> =
 
 /**
  * Renders a single part by index, calling `children` with the
- * {@link EnrichedPartState} (tool/data UI enrichments + addResult/resume
- * for tool calls). Shared between `<MessagePrimitive.Parts>` and
+ * {@link EnrichedPartState} (tool/data UI enrichments + tool methods).
+ * Shared between `<MessagePrimitive.Parts>` and
  * `<MessagePrimitive.GroupedParts>`. Returns whatever `children`
  * returns — callers decide how to handle a `null` return.
  */
@@ -763,6 +780,10 @@ const MessagePartChildrenInner: FC<
                 addResult: partMethods.addToolResult,
                 resume: partMethods.resumeToolCall,
                 respondToApproval: partMethods.respondToToolApproval,
+                ...(partMethods.unstable_recordInteraction && {
+                  unstable_recordInteraction:
+                    partMethods.unstable_recordInteraction,
+                }),
               };
             }
             if (state.type === "data") {

package/src/react/primitives/thread/ThreadSuggestions.test.tsx

@@ -0,0 +1,97 @@
+/** @vitest-environment jsdom */
+import { render, screen } from "@testing-library/react";
+import { useState, type ReactNode } from "react";
+import { describe, expect, it, vi } from "vitest";
+import type { SuggestionState } from "../../../store/scopes/suggestion";
+
+const mocks = vi.hoisted(() => ({
+  suggestions: [] as SuggestionState[],
+  aui: {
+    suggestions: {
+      suggestion: ({ index }: { index: number }) => ({
+        getState: () => mocks.suggestions[index],
+      }),
+    },
+  },
+}));
+
+vi.mock("@assistant-ui/store", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@assistant-ui/store")>()),
+  useAui: () => mocks.aui,
+  useAuiState: (selector: (state: unknown) => unknown) =>
+    selector({ suggestions: { suggestions: mocks.suggestions } }),
+  RenderChildrenWithAccessor: ({
+    getItemState,
+    children,
+  }: {
+    getItemState: (aui: typeof mocks.aui) => SuggestionState;
+    children: (getItem: () => SuggestionState) => ReactNode;
+  }) => children(() => getItemState(mocks.aui)),
+}));
+
+vi.mock("../../providers/SuggestionByIndexProvider", () => ({
+  SuggestionByIndexProvider: ({ children }: { children: ReactNode }) =>
+    children,
+}));
+
+import { ThreadPrimitiveSuggestions } from "./ThreadSuggestions";
+
+const suggestion = (prompt: string): SuggestionState => ({
+  title: prompt,
+  label: prompt,
+  prompt,
+});
+
+const StatefulSuggestion = ({
+  suggestion,
+}: {
+  suggestion: SuggestionState;
+}) => {
+  const [initialPrompt] = useState(suggestion.prompt);
+  return <span>{initialPrompt}</span>;
+};
+
+const renderSuggestions = () => (
+  <ThreadPrimitiveSuggestions>
+    {({ suggestion }) => <StatefulSuggestion suggestion={suggestion} />}
+  </ThreadPrimitiveSuggestions>
+);
+
+describe("ThreadPrimitiveSuggestions", () => {
+  it("does not reuse component state for a different suggestion", () => {
+    mocks.suggestions = [suggestion("first prompt"), suggestion("second")];
+
+    const view = render(renderSuggestions());
+
+    mocks.suggestions = [mocks.suggestions[1]!];
+    view.rerender(renderSuggestions());
+
+    expect(screen.queryByText("second")).not.toBeNull();
+    expect(screen.queryByText("first prompt")).toBeNull();
+  });
+
+  it("keeps a surviving suggestion's state when an earlier one is removed", () => {
+    mocks.suggestions = [
+      suggestion("alpha"),
+      suggestion("beta"),
+      suggestion("gamma"),
+    ];
+
+    const view = render(renderSuggestions());
+
+    mocks.suggestions = [mocks.suggestions[0]!, mocks.suggestions[2]!];
+    view.rerender(renderSuggestions());
+
+    expect(screen.queryByText("alpha")).not.toBeNull();
+    expect(screen.queryByText("gamma")).not.toBeNull();
+    expect(screen.queryByText("beta")).toBeNull();
+  });
+
+  it("renders suggestions that share a prompt under distinct keys", () => {
+    mocks.suggestions = [suggestion("same"), suggestion("same")];
+
+    render(renderSuggestions());
+
+    expect(screen.queryAllByText("same")).toHaveLength(2);
+  });
+});