laif-ds 0.2.80 → 0.2.84

package/dist/components/ui/app-editor.js

@@ -1,169 +1,207 @@
 "use client";
-import { jsx as r, jsxs as e, Fragment as s } from "react/jsx-runtime";
-import { ListNode as S, ListItemNode as T } from "../../node_modules/@lexical/list/LexicalList.prod.js";
-import { $convertToMarkdownString as L, $convertFromMarkdownString as k, TRANSFORMERS as A } from "../../node_modules/@lexical/markdown/LexicalMarkdown.prod.js";
-import { CheckListPlugin as j } from "../../node_modules/@lexical/react/LexicalCheckListPlugin.prod.js";
-import { ClearEditorPlugin as O } from "../../node_modules/@lexical/react/LexicalClearEditorPlugin.prod.js";
-import { LexicalComposer as $ } from "../../node_modules/@lexical/react/LexicalComposer.prod.js";
-import { useLexicalComposerContext as B } from "../../node_modules/@lexical/react/LexicalComposerContext.prod.js";
-import { LexicalErrorBoundary as D } from "../../node_modules/@lexical/react/LexicalErrorBoundary.prod.js";
-import { HistoryPlugin as H } from "../../node_modules/@lexical/react/LexicalHistoryPlugin.prod.js";
-import { ListPlugin as I } from "../../node_modules/@lexical/react/LexicalListPlugin.prod.js";
-import { OnChangePlugin as M } from "../../node_modules/@lexical/react/LexicalOnChangePlugin.prod.js";
-import { RichTextPlugin as U } from "../../node_modules/@lexical/react/LexicalRichTextPlugin.prod.js";
-import { HeadingNode as z, QuoteNode as Q } from "../../node_modules/@lexical/rich-text/LexicalRichText.prod.js";
-import { ParagraphNode as d, TextNode as f, $getRoot as p } from "../../node_modules/lexical/Lexical.prod.js";
-import { useState as _, useEffect as J } from "react";
-import { ContentEditable as q } from "../editor/editor-ui/content-editable.js";
-import { ActionsPlugin as G } from "../editor/plugins/actions/actions-plugin.js";
-import { ClearEditorActionPlugin as K } from "../editor/plugins/actions/clear-editor-plugin.js";
-import { CounterCharacterPlugin as W } from "../editor/plugins/actions/counter-character-plugin.js";
-import { FormatBulletedList as X } from "../editor/plugins/toolbar/block-format/format-bulleted-list.js";
-import { FormatCheckList as Y } from "../editor/plugins/toolbar/block-format/format-check-list.js";
-import { FormatHeading as Z } from "../editor/plugins/toolbar/block-format/format-heading.js";
-import { FormatNumberedList as V } from "../editor/plugins/toolbar/block-format/format-numbered-list.js";
-import { FormatParagraph as rr } from "../editor/plugins/toolbar/block-format/format-paragraph.js";
-import { FormatQuote as or } from "../editor/plugins/toolbar/block-format/format-quote.js";
-import { BlockFormatDropDown as er } from "../editor/plugins/toolbar/block-format-toolbar-plugin.js";
-import { FontFormatToolbarPlugin as l } from "../editor/plugins/toolbar/font-format-toolbar-plugin.js";
-import { ToolbarPlugin as c } from "../editor/plugins/toolbar/toolbar-plugin.js";
-import { editorTheme as tr } from "../editor/themes/editor-theme.js";
-import { TooltipProvider as ir } from "./tooltip.js";
-import { HistoryToolbarPlugin as nr } from "../editor/plugins/toolbar/history-toolbar-plugin.js";
-import { cn as ar } from "../../lib/utils.js";
-const lr = "Start typing...", mr = {
+import { jsx as r, jsxs as t, Fragment as p } from "react/jsx-runtime";
+import { ListNode as D, ListItemNode as H } from "../../node_modules/@lexical/list/LexicalList.prod.js";
+import { TRANSFORMERS as z, $convertToMarkdownString as U, $convertFromMarkdownString as _ } from "../../node_modules/@lexical/markdown/LexicalMarkdown.prod.js";
+import { CheckListPlugin as Q } from "../../node_modules/@lexical/react/LexicalCheckListPlugin.prod.js";
+import { ClearEditorPlugin as J } from "../../node_modules/@lexical/react/LexicalClearEditorPlugin.prod.js";
+import { LexicalComposer as q } from "../../node_modules/@lexical/react/LexicalComposer.prod.js";
+import { useLexicalComposerContext as G } from "../../node_modules/@lexical/react/LexicalComposerContext.prod.js";
+import { LexicalErrorBoundary as K } from "../../node_modules/@lexical/react/LexicalErrorBoundary.prod.js";
+import { HistoryPlugin as W } from "../../node_modules/@lexical/react/LexicalHistoryPlugin.prod.js";
+import { ListPlugin as X } from "../../node_modules/@lexical/react/LexicalListPlugin.prod.js";
+import { OnChangePlugin as Y } from "../../node_modules/@lexical/react/LexicalOnChangePlugin.prod.js";
+import { RichTextPlugin as Z } from "../../node_modules/@lexical/react/LexicalRichTextPlugin.prod.js";
+import { HeadingNode as V, QuoteNode as rr } from "../../node_modules/@lexical/rich-text/LexicalRichText.prod.js";
+import { ParagraphNode as g, TextNode as h, $nodesOfType as or, $getRoot as b } from "../../node_modules/lexical/Lexical.prod.js";
+import { useState as er, useMemo as tr, useEffect as ir } from "react";
+import { ContentEditable as nr } from "../editor/editor-ui/content-editable.js";
+import { MentionNode as S } from "../editor/nodes/mention-node.js";
+import { ActionsPlugin as lr } from "../editor/plugins/actions/actions-plugin.js";
+import { ClearEditorActionPlugin as ar } from "../editor/plugins/actions/clear-editor-plugin.js";
+import { CounterCharacterPlugin as sr } from "../editor/plugins/actions/counter-character-plugin.js";
+import { MENTION_TRANSFORMER as mr, MentionPlugin as cr, collectMentions as dr } from "../editor/plugins/mention-plugin.js";
+import { FormatBulletedList as fr } from "../editor/plugins/toolbar/block-format/format-bulleted-list.js";
+import { FormatCheckList as pr } from "../editor/plugins/toolbar/block-format/format-check-list.js";
+import { FormatHeading as ur } from "../editor/plugins/toolbar/block-format/format-heading.js";
+import { FormatNumberedList as gr } from "../editor/plugins/toolbar/block-format/format-numbered-list.js";
+import { FormatParagraph as hr } from "../editor/plugins/toolbar/block-format/format-paragraph.js";
+import { FormatQuote as br } from "../editor/plugins/toolbar/block-format/format-quote.js";
+import { BlockFormatDropDown as xr } from "../editor/plugins/toolbar/block-format-toolbar-plugin.js";
+import { FontFormatToolbarPlugin as d } from "../editor/plugins/toolbar/font-format-toolbar-plugin.js";
+import { MentionInsertToolbarPlugin as Nr } from "../editor/plugins/toolbar/mention-insert-toolbar-plugin.js";
+import { ToolbarPlugin as u } from "../editor/plugins/toolbar/toolbar-plugin.js";
+import { editorTheme as vr } from "../editor/themes/editor-theme.js";
+import { TooltipProvider as Er } from "./tooltip.js";
+import { HistoryToolbarPlugin as Fr } from "../editor/plugins/toolbar/history-toolbar-plugin.js";
+import { cn as Pr } from "../../lib/utils.js";
+const yr = "Start typing...", Cr = {
   format: ["underline"],
   tag: "++",
   type: "text-format"
-}, v = [
-  ...A,
-  mr
-], sr = (o) => o.replace(/<u>(.*?)<\/u>/g, "++$1++"), cr = (o) => o.replace(/\+\+(.+?)\+\+/g, "<u>$1</u>");
-function dr({
+}, w = [
+  ...z,
+  Cr
+], Rr = (o) => o.replace(/<u>(.*?)<\/u>/g, "++$1++"), Tr = (o) => o.replace(/\+\+(.+?)\+\+/g, "<u>$1</u>");
+function Sr({
   defaultValue: o,
-  onlyMarkdown: i
+  onlyMarkdown: a,
+  transformers: n
 }) {
-  const [n] = B();
-  return J(() => {
-    o && n.update(() => {
-      i ? k(
-        sr(o),
-        v
-      ) : p().append(
-        new d().append(new f(o))
+  const [s] = G();
+  return ir(() => {
+    o && s.update(() => {
+      a ? _(
+        Rr(o),
+        n
+      ) : b().append(
+        new g().append(new h(o))
       );
-      const a = p();
-      (a.getFirstChild() ?? a).selectStart();
+      const m = b();
+      (m.getFirstChild() ?? m).selectStart();
     });
-  }, [n, o, i]), null;
+  }, [s, o, a, n]), null;
 }
-function _r({
+function co({
   defaultValue: o,
-  onMarkdownEdit: i,
-  plugins: n = [],
-  toolbars: a = [],
-  placeholder: F = lr,
-  onlyMarkdown: h = !0,
-  className: C = "rounded-lg border border-d-border",
-  wrpClassName: E = ""
+  onMarkdownEdit: a,
+  onValueChange: n,
+  plugins: s = [],
+  toolbars: m = [],
+  placeholder: M = yr,
+  onlyMarkdown: x = !0,
+  className: L = "rounded-lg border border-d-border",
+  wrpClassName: A = "",
+  mentions: c,
+  mentionTrigger: N = "@"
 }) {
-  const [, P] = _(null), w = {
+  const [, k] = er(null), l = c !== void 0, v = tr(
+    () => l ? [mr, ...w] : w,
+    [l]
+  ), O = {
     namespace: "AppEditor",
-    theme: tr,
+    theme: vr,
     nodes: [
-      z,
-      d,
-      f,
-      Q,
-      S,
-      T
+      V,
+      g,
+      h,
+      rr,
+      D,
+      H,
+      ...l ? [S] : []
     ],
-    onError: (t) => {
-      console.error(t);
+    onError: (e) => {
+      console.error(e);
     },
-    ...o && !h ? {
+    ...o && !x ? {
       editorState: () => {
-        p().append(
-          new d().append(new f(o))
+        b().append(
+          new g().append(new h(o))
         );
       }
     } : {}
-  }, u = (t) => n.includes(t), m = (t) => a.includes(t), g = u("clear"), x = u("counter"), b = m("block-format"), y = m("font-format"), N = m("history");
-  return /* @__PURE__ */ r("div", { className: ar("bg-d-background flex h-96 flex-col", E), children: /* @__PURE__ */ r($, { initialConfig: w, children: /* @__PURE__ */ e(ir, { children: [
+  }, E = (e) => s.includes(e), f = (e) => m.includes(e), F = E("clear"), P = E("counter"), y = f("block-format"), I = f("font-format"), C = f("history");
+  return /* @__PURE__ */ r("div", { className: Pr("bg-d-background flex h-96 flex-col", A), children: /* @__PURE__ */ r(q, { initialConfig: O, children: /* @__PURE__ */ t(Er, { children: [
     o && /* @__PURE__ */ r(
-      dr,
+      Sr,
       {
         defaultValue: o,
-        onlyMarkdown: h
+        onlyMarkdown: x,
+        transformers: v
       }
     ),
-    /* @__PURE__ */ e("div", { className: "border-d-border flex items-center border-b", children: [
-      N && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ r(nr, {}) }) }),
-      b && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ e(er, { children: [
-        /* @__PURE__ */ r(rr, {}),
-        /* @__PURE__ */ r(Z, { levels: ["h1", "h2", "h3"] }),
-        /* @__PURE__ */ r(V, {}),
-        /* @__PURE__ */ r(X, {}),
-        /* @__PURE__ */ r(Y, {}),
-        /* @__PURE__ */ r(or, {})
+    l && /* @__PURE__ */ r(cr, { source: c, trigger: N }),
+    /* @__PURE__ */ t("div", { className: "border-d-border flex items-center border-b", children: [
+      C && /* @__PURE__ */ r(u, { children: () => /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ r(Fr, {}) }) }),
+      y && /* @__PURE__ */ r(u, { children: () => /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ t(xr, { children: [
+        /* @__PURE__ */ r(hr, {}),
+        /* @__PURE__ */ r(ur, { levels: ["h1", "h2", "h3"] }),
+        /* @__PURE__ */ r(gr, {}),
+        /* @__PURE__ */ r(fr, {}),
+        /* @__PURE__ */ r(pr, {}),
+        /* @__PURE__ */ r(br, {})
       ] }) }) }) }),
-      y && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ e("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: [
-        /* @__PURE__ */ r(l, { format: "bold" }),
-        /* @__PURE__ */ r(l, { format: "italic" }),
-        /* @__PURE__ */ r(l, { format: "underline" }),
-        /* @__PURE__ */ r(l, { format: "strikethrough" })
+      I && /* @__PURE__ */ r(u, { children: () => /* @__PURE__ */ t("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: [
+        /* @__PURE__ */ r(d, { format: "bold" }),
+        /* @__PURE__ */ r(d, { format: "italic" }),
+        /* @__PURE__ */ r(d, { format: "underline" }),
+        /* @__PURE__ */ r(d, { format: "strikethrough" }),
+        l && /* @__PURE__ */ r(
+          Nr,
+          {
+            trigger: N ?? "@"
+          }
+        )
       ] }) })
     ] }),
-    /* @__PURE__ */ e("div", { className: "relative flex min-h-0 w-full flex-1 flex-col", children: [
-      N && /* @__PURE__ */ r(H, {}),
+    /* @__PURE__ */ t("div", { className: "relative flex min-h-0 w-full flex-1 flex-col", children: [
+      C && /* @__PURE__ */ r(W, {}),
       /* @__PURE__ */ r(
-        U,
+        Z,
         {
-          ErrorBoundary: D,
+          ErrorBoundary: K,
           contentEditable: /* @__PURE__ */ r(
             "div",
             {
-              ref: P,
+              ref: k,
               className: "flex min-h-0 w-full flex-1 overflow-auto",
               children: /* @__PURE__ */ r(
-                q,
+                nr,
                 {
-                  placeholder: F,
-                  className: `border-d-border w-full rounded-none border-b ${C}`
+                  placeholder: M,
+                  className: `border-d-border w-full rounded-none border-b ${L}`
                 }
               )
             }
           )
         }
       ),
-      b && /* @__PURE__ */ e(s, { children: [
-        /* @__PURE__ */ r(I, {}),
-        /* @__PURE__ */ r(j, {})
+      y && /* @__PURE__ */ t(p, { children: [
+        /* @__PURE__ */ r(X, {}),
+        /* @__PURE__ */ r(Q, {})
       ] }),
-      (g || x) && /* @__PURE__ */ r(G, { children: /* @__PURE__ */ e("div", { className: "clear-both flex items-center justify-between gap-2 p-1", children: [
+      (F || P) && /* @__PURE__ */ r(lr, { children: /* @__PURE__ */ t("div", { className: "clear-both flex items-center justify-between gap-2 p-1", children: [
         /* @__PURE__ */ r("div", { className: "flex flex-1 justify-start" }),
-        /* @__PURE__ */ r("div", { children: x && /* @__PURE__ */ r(W, { charset: "UTF-16" }) }),
-        /* @__PURE__ */ r("div", { className: "flex flex-1 justify-end gap-2", children: g && /* @__PURE__ */ e(s, { children: [
-          /* @__PURE__ */ r(K, {}),
-          /* @__PURE__ */ r(O, {})
+        /* @__PURE__ */ r("div", { children: P && /* @__PURE__ */ r(sr, { charset: "UTF-16" }) }),
+        /* @__PURE__ */ r("div", { className: "flex flex-1 justify-end gap-2", children: F && /* @__PURE__ */ t(p, { children: [
+          /* @__PURE__ */ r(ar, {}),
+          /* @__PURE__ */ r(J, {})
         ] }) })
       ] }) })
     ] }),
     /* @__PURE__ */ r(
-      M,
+      Y,
       {
         ignoreSelectionChange: !0,
-        onChange: (t) => {
-          if (!i) return;
-          const R = t.read(
-            () => L(v)
+        onChange: (e) => {
+          if (!n && !a) return;
+          const R = Tr(
+            e.read(() => U(v))
           );
-          i(cr(R));
+          if (!n) {
+            a?.(R);
+            return;
+          }
+          let T = [];
+          if (l) {
+            const $ = e.read(
+              () => dr(or(S))
+            ), j = Array.isArray(c) ? c : [], B = new Map(
+              j.map((i) => [String(i.id), i])
+            );
+            T = $.map(
+              (i) => B.get(String(i.id)) ?? {
+                id: i.id,
+                label: i.label,
+                value: i.value
+              }
+            );
+          }
+          n(R, { mentions: T });
         }
       }
     )
   ] }) }) });
 }
 export {
-  _r as AppEditor
+  co as AppEditor
 };

package/dist/components/ui/chat.js

@@ -1,19 +1,19 @@
 "use client";
 import { jsxs as b, Fragment as y, jsx as t } from "react/jsx-runtime";
-import { forwardRef as A, useRef as M, useCallback as k, useState as O } from "react";
+import { forwardRef as A, useRef as O, useCallback as k, useState as q } from "react";
 import { Button as v } from "./button.js";
 import { CopyButton as S } from "./copy-button.js";
-import { MessageInput as q } from "./message-input.js";
-import { MessageList as H } from "./message-list.js";
-import { PromptSuggestions as J } from "./prompt-suggestions.js";
-import { useAutoScroll as K } from "../../hooks/use-auto-scroll.js";
-import { cn as Q } from "../../lib/utils.js";
+import { MessageInput as H } from "./message-input.js";
+import { MessageList as J } from "./message-list.js";
+import { PromptSuggestions as K } from "./prompt-suggestions.js";
+import { useAutoScroll as Q } from "../../hooks/use-auto-scroll.js";
+import { cn as V } from "../../lib/utils.js";
 import { Typo as z } from "./typo.js";
 import j from "../../node_modules/lucide-react/dist/esm/icons/save.js";
-import V from "../../node_modules/lucide-react/dist/esm/icons/thumbs-up.js";
-import W from "../../node_modules/lucide-react/dist/esm/icons/thumbs-down.js";
-import X from "../../node_modules/lucide-react/dist/esm/icons/arrow-down.js";
-function Y({
+import W from "../../node_modules/lucide-react/dist/esm/icons/thumbs-up.js";
+import X from "../../node_modules/lucide-react/dist/esm/icons/thumbs-down.js";
+import Y from "../../node_modules/lucide-react/dist/esm/icons/arrow-down.js";
+function Z({
   messages: o,
   welcomeTitle: n = "Da dove iniziamo?",
   handleSubmit: i,
@@ -29,11 +29,12 @@ function Y({
   transcribeAudio: D,
   allowAttachments: L = !1,
   onEdit: B,
-  onMessageSave: d
+  onMessageSave: d,
+  placeholder: P
 }) {
-  const P = o.at(-1), T = o.length === 0, I = P?.role === "user", C = M(o);
+  const U = o.at(-1), T = o.length === 0, I = U?.role === "user", C = O(o);
   C.current = o;
-  const U = k(() => {
+  const E = k(() => {
     if (s?.(), !x) return;
     const e = [...C.current], l = e.findLast(
       (a) => a.role === "assistant"
@@ -81,7 +82,7 @@ function Y({
       );
       a !== -1 && (e[a] = p, x(e));
     }
-  }, [s, x, C]), E = k(
+  }, [s, x, C]), M = k(
     (e) => ({
       actions: N ? /* @__PURE__ */ b(y, { children: [
         /* @__PURE__ */ t("div", { className: "border-d-border border-r pr-1", children: /* @__PURE__ */ t(
@@ -109,7 +110,7 @@ function Y({
             variant: "ghost",
             className: "h-6 w-6",
             onClick: () => N(e.id, "thumbs-up"),
-            children: /* @__PURE__ */ t(V, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ t(W, { className: "h-4 w-4" })
           }
         ),
         /* @__PURE__ */ t(
@@ -119,7 +120,7 @@ function Y({
             variant: "ghost",
             className: "h-6 w-6",
             onClick: () => N(e.id, "thumbs-down"),
-            children: /* @__PURE__ */ t(W, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ t(X, { className: "h-4 w-4" })
           }
         )
       ] }) : /* @__PURE__ */ b(y, { children: [
@@ -150,7 +151,7 @@ function Y({
     T && /* @__PURE__ */ t("div", { className: "flex flex-1 flex-col items-center justify-center p-8", children: m && u && /* @__PURE__ */ b(y, { children: [
       /* @__PURE__ */ t(z, { variant: "h3", className: "mb-8 text-center", children: n }),
       /* @__PURE__ */ t(
-        J,
+        K,
         {
           label: "",
           append: m,
@@ -158,12 +159,12 @@ function Y({
         }
       )
     ] }) }),
-    o.length > 0 ? /* @__PURE__ */ t(Z, { children: /* @__PURE__ */ t(
-      H,
+    o.length > 0 ? /* @__PURE__ */ t($, { children: /* @__PURE__ */ t(
+      J,
       {
         messages: o,
         isTyping: I,
-        messageOptions: E,
+        messageOptions: M,
         onEdit: B,
         onMessageSave: d
       }
@@ -176,31 +177,32 @@ function Y({
         isPending: w || I,
         handleSubmit: i,
         children: ({ files: e, setFiles: l }) => /* @__PURE__ */ t(
-          q,
+          H,
           {
             value: f,
             onChange: c,
             allowAttachments: L,
             files: e,
             setFiles: l,
-            stop: U,
+            stop: E,
             isGenerating: w,
-            transcribeAudio: D
+            transcribeAudio: D,
+            placeholder: P
           }
         )
       }
     )
   ] });
 }
-Y.displayName = "Chat";
-function Z({ children: o }) {
+Z.displayName = "Chat";
+function $({ children: o }) {
   const {
     containerRef: n,
     scrollToBottom: i,
     handleScroll: f,
     shouldAutoScroll: c,
     handleTouchStart: s
-  } = K();
+  } = Q();
   return /* @__PURE__ */ b(
     "div",
     {
@@ -217,7 +219,7 @@ function Z({ children: o }) {
             className: "animate-in fade-in-0 slide-in-from-bottom-1 pointer-events-auto h-8 w-8 rounded-full ease-in-out",
             size: "icon",
             variant: "ghost",
-            children: /* @__PURE__ */ t(X, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ t(Y, { className: "h-4 w-4" })
           }
         ) }) })
       ]
@@ -228,26 +230,26 @@ const F = A(({ className: o, ...n }, i) => /* @__PURE__ */ t(
   "div",
   {
     ref: i,
-    className: Q("flex h-full max-h-full w-full flex-col", o),
+    className: V("flex h-full max-h-full w-full flex-col", o),
     ...n
   }
 ));
 F.displayName = "ChatContainer";
 const _ = A(
   ({ children: o, handleSubmit: n, className: i }, f) => {
-    const [c, s] = O(null);
+    const [c, s] = q(null);
     return /* @__PURE__ */ t("form", { ref: f, onSubmit: (m) => {
       if (!c) {
         n(m);
         return;
       }
-      const u = $(c);
+      const u = G(c);
       n(m, { experimental_attachments: u }), s(null);
     }, className: i, children: o({ files: c, setFiles: s }) });
   }
 );
 _.displayName = "ChatForm";
-function $(o) {
+function G(o) {
   if (typeof window > "u")
     return {};
   const n = new DataTransfer();
@@ -256,8 +258,8 @@ function $(o) {
   return n.files;
 }
 export {
-  Y as Chat,
+  Z as Chat,
   F as ChatContainer,
   _ as ChatForm,
-  Z as ChatMessages
+  $ as ChatMessages
 };