prime-ui-kit 0.15.0 → 0.17.0

package/dist/skill/reference/components/chat/examples/reactions.tsx

@@ -73,31 +73,26 @@ const toggleOwn = (reactions: MessageReaction[], emoji: string): MessageReaction
 export default function ChatReactionsExample() {
   const [requests, setRequests] = React.useState(REQUESTS);
 
-  const toggle = React.useCallback(
-    (id: string, emoji: string) =>
-      setRequests((current) =>
-        current.map((request) =>
-          request.id === id
-            ? { ...request, reactions: toggleOwn(request.reactions, emoji) }
-            : request,
-        ),
+  const toggle = (id: string, emoji: string) =>
+    setRequests((current) =>
+      current.map((request) =>
+        request.id === id
+          ? { ...request, reactions: toggleOwn(request.reactions, emoji) }
+          : request,
       ),
-    [],
-  );
+    );
 
-  const renderMessage = React.useCallback(
-    (request: Request) => (
-      <Message.Root
-        direction={request.author === "me" ? "outgoing" : "incoming"}
-        time={request.sentAt}
-        status={request.author === "me" ? "read" : undefined}
-        onReactionToggle={(emoji) => toggle(request.id, emoji)}
-      >
-        <Message.Text>{request.text}</Message.Text>
-        {request.reactions.length ? <Message.Reactions items={request.reactions} /> : null}
-      </Message.Root>
-    ),
-    [toggle],
+  // A reaction renders again only the request it changed.
+  const renderMessage = (request: Request) => (
+    <Message.Root
+      direction={request.author === "me" ? "outgoing" : "incoming"}
+      time={request.sentAt}
+      status={request.author === "me" ? "read" : undefined}
+      onReactionToggle={(emoji) => toggle(request.id, emoji)}
+    >
+      <Message.Text>{request.text}</Message.Text>
+      {request.reactions.length ? <Message.Reactions items={request.reactions} /> : null}
+    </Message.Root>
   );
 
   return (

package/dist/skill/reference/components/chat/examples/screen.module.css

@@ -1,5 +1,5 @@
 /* Messenger: a work screen — the header carries the title, the page fills the app panel
-   (`AppShell.Root fillViewport` + `PageContent.Root fill`); each pane is a card with a scrolling
+   (`AppShell.Root fillViewport` + `Page.Root fill`); each pane is a card with a scrolling
    region. */
 
 .paneCard {

package/dist/skill/reference/components/chat/examples/screen.tsx

@@ -1,13 +1,12 @@
-/** A support messenger as a work screen: the title and the unread count in the app header, the dialogs with a search over them beside the conversation (one pane at a time on a phone), history that loads above as you scroll up, the unread band, reply and edit from the menu, the typing signal both ways, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `hasOlder`, `onLoadOlder`, `typing`. */
+/** A support messenger as a work screen: the title and the unread count in its top bar, the dialogs with a search over them beside the conversation (one pane at a time on a phone), history that loads above as you scroll up, the unread band, reply and edit from the menu, the typing signal both ways, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `hasOlder`, `onLoadOlder`, `typing`. */
 import {
-  AppHeader,
   Avatar,
   Card,
   Chat,
   ChatList,
+  type ChatMessageEntry,
   Composer,
   type ComposerActivity,
-  type ComposerMediaItem,
   type ComposerMessage,
   type ComposerRecording,
   Dropdown,
@@ -16,7 +15,7 @@ import {
   Icon,
   Message,
   type MessageStatus,
-  PageContent,
+  Page,
   type UploadContext,
   useUploadQueue,
   VoicePlayer,
@@ -232,12 +231,8 @@ const excerpt = (message: ChatMessage) => {
   }
 };
 
-/** An album holds up to ten photos and videos: more go as the next album. */
-const ALBUM_MAX = 10;
-const albumsOf = (media: readonly ComposerMediaItem[]) =>
-  Array.from({ length: Math.ceil(media.length / ALBUM_MAX) }, (_, index) =>
-    media.slice(index * ALBUM_MAX, (index + 1) * ALBUM_MAX),
-  );
+/** A dialog's history as the server returns it: its own message objects for every load. */
+const historyOf = () => HISTORY.map((message) => ({ ...message }));
 
 /** The local object URLs a message plays from (photos, videos and recordings sent here). */
 const localSourcesOf = (message: Content): string[] =>
@@ -282,7 +277,7 @@ type ChatComposerProps = {
 };
 
 /** The Composer with its upload queue: an upload tick re-renders the composer, not the thread. */
-const ChatComposer = React.memo(function ChatComposer({
+function ChatComposer({
   replyTo,
   replyAuthor,
   editing,
@@ -304,15 +299,15 @@ const ChatComposer = React.memo(function ChatComposer({
   if (!editing && editedId !== null) setEditedId(null);
 
   // Optimistic: every message is in the list at once with `sending`, so the send returns at once
-  // and the field is free for the next one. The bar's `value` says what it answers or edits.
-  // Photos and videos go as albums with the text as their caption, other files as file messages.
-  // The tray's previews are revoked after the send, so an album plays from its own URLs.
-  const send = ({ text, media, files, replyTo: reply, editOf }: ComposerMessage) => {
+  // and the field is free for the next one. The bar's `messageId` says what it answers or edits.
+  // Photos and videos go as albums, the text as the first one's caption, other files as file
+  // messages. The tray's previews are revoked after the send, so an album plays from its own URLs.
+  const send = ({ text, albums, files, replyTo: reply, editOf }: ComposerMessage) => {
     if (editOf) {
       onSave(editOf, text);
       return;
     }
-    albumsOf(media).forEach((album, index) => {
+    albums.forEach((album, index) => {
       onPost(
         {
           kind: "media",
@@ -329,7 +324,7 @@ const ChatComposer = React.memo(function ChatComposer({
     for (const item of files) {
       onPost({ kind: "file", name: item.file.name, size: item.file.size, href: "#" }, reply);
     }
-    if (text && media.length === 0) onPost({ kind: "text", text }, reply);
+    if (text && albums.length === 0) onPost({ kind: "text", text }, reply);
   };
 
   const sendVoice = ({ blob, durationMs, waveform }: ComposerRecording) =>
@@ -355,7 +350,7 @@ const ChatComposer = React.memo(function ChatComposer({
     >
       <Composer.Attach />
       {replyTo ? (
-        <Composer.Context value={replyTo.id} onDismiss={onReplyDismiss}>
+        <Composer.Context messageId={replyTo.id} onDismiss={onReplyDismiss}>
           <Composer.Title>Ответ {replyTo.from === "me" ? "себе" : replyAuthor}</Composer.Title>
           <Composer.Description>{excerpt(replyTo)}</Composer.Description>
         </Composer.Context>
@@ -363,7 +358,7 @@ const ChatComposer = React.memo(function ChatComposer({
       {editing ? (
         <Composer.Context
           mode="edit"
-          value={editing.id}
+          messageId={editing.id}
           onDismiss={() => {
             onEditDismiss();
             setDraft("");
@@ -375,11 +370,11 @@ const ChatComposer = React.memo(function ChatComposer({
       ) : null}
     </Composer.Root>
   );
-});
+}
 
 export default function ChatScreenExample() {
   const [dialogId, setDialogId] = React.useState<string | null>("vector");
-  const [messages, setMessages] = React.useState<ChatMessage[]>(HISTORY);
+  const [messages, setMessages] = React.useState<ChatMessage[]>(historyOf);
   const [hasOlder, setHasOlder] = React.useState(true);
   const [replyTo, setReplyTo] = React.useState<ChatMessage | null>(null);
   const [editing, setEditing] = React.useState<ChatMessage | null>(null);
@@ -430,7 +425,11 @@ export default function ChatScreenExample() {
   const [loadedId, setLoadedId] = React.useState<string | null>(null);
   React.useEffect(() => {
     if (!dialogId) return;
-    const timer = window.setTimeout(() => setLoadedId(dialogId), DIALOG_MS);
+    const timer = window.setTimeout(() => {
+      setMessages(historyOf());
+      setHasOlder(true);
+      setLoadedId(dialogId);
+    }, DIALOG_MS);
     return () => window.clearTimeout(timer);
   }, [dialogId]);
 
@@ -444,19 +443,16 @@ export default function ChatScreenExample() {
     setHasOlder(false);
   };
 
-  // Every update touches one message: the rest keep their objects, so their rows stay memoized.
-  const patch = React.useCallback(
-    (id: string, next: (message: ChatMessage) => Partial<ChatMessage>) =>
-      setMessages((current) =>
-        current.map((message) =>
-          message.id === id ? ({ ...message, ...next(message) } as ChatMessage) : message,
-        ),
+  // Every update touches one message: the rest keep their objects, so their rows stay as they are.
+  const patch = (id: string, next: (message: ChatMessage) => Partial<ChatMessage>) =>
+    setMessages((current) =>
+      current.map((message) =>
+        message.id === id ? ({ ...message, ...next(message) } as ChatMessage) : message,
       ),
-    [],
-  );
+    );
 
   /** The client reads, waits while you are still typing, types for a moment and answers. */
-  const clientAnswers = React.useCallback(async () => {
+  const clientAnswers = async () => {
     await wait(MESSAGE_SEND_MS + MESSAGE_READ_MS);
     while (myActivity.current !== null) await wait(500);
     setClientTyping(true);
@@ -468,251 +464,225 @@ export default function ChatScreenExample() {
       ...current,
       { id: `client-${Date.now()}`, from: "client", sentAt: new Date(), kind: "text", text },
     ]);
-  }, []);
+  };
 
   /**
    * Adds an outgoing message at once (it rises from the composer into the list), sends it, then
    * marks it read when the client opens it. The id stays: the row is never re-keyed.
    */
-  const post = React.useCallback(
-    (content: Content, replyToId?: string) => {
-      for (const url of localSourcesOf(content)) localUrls.current.add(url);
-      const id = `own-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
-      const message = {
-        ...content,
-        id,
-        from: "me",
-        sentAt: new Date(),
-        status: "sending",
-        replyTo: replyToId,
-      } as ChatMessage;
-      setMessages((current) => [...current, message]);
-      window.setTimeout(() => patch(id, () => ({ status: "sent" })), MESSAGE_SEND_MS);
-      window.setTimeout(
-        () => patch(id, () => ({ status: "read" })),
-        MESSAGE_SEND_MS + MESSAGE_READ_MS,
-      );
-      void clientAnswers();
-    },
-    [patch, clientAnswers],
-  );
+  const post = (content: Content, replyToId?: string) => {
+    for (const url of localSourcesOf(content)) localUrls.current.add(url);
+    const id = `own-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+    const message = {
+      ...content,
+      id,
+      from: "me",
+      sentAt: new Date(),
+      status: "sending",
+      replyTo: replyToId,
+    } as ChatMessage;
+    setMessages((current) => [...current, message]);
+    window.setTimeout(() => patch(id, () => ({ status: "sent" })), MESSAGE_SEND_MS);
+    window.setTimeout(
+      () => patch(id, () => ({ status: "read" })),
+      MESSAGE_SEND_MS + MESSAGE_READ_MS,
+    );
+    void clientAnswers();
+  };
 
-  const save = React.useCallback(
-    (id: string, text: string) => patch(id, () => ({ text, edited: true })),
-    [patch],
-  );
+  const save = (id: string, text: string) => patch(id, () => ({ text, edited: true }));
 
-  const editLast = React.useCallback(() => {
+  const editLast = () => {
     const last = [...messages].reverse().find((item) => item.from === "me" && item.kind === "text");
     if (!last) return;
     setReplyTo(null);
     setEditing(last);
-  }, [messages]);
+  };
 
-  const startEdit = React.useCallback((message: ChatMessage) => {
+  const startEdit = (message: ChatMessage) => {
     setReplyTo(null);
     setEditing(message);
-  }, []);
+  };
 
-  const startReply = React.useCallback((message: ChatMessage) => {
+  const startReply = (message: ChatMessage) => {
     setEditing(null);
     setReplyTo(message);
-  }, []);
+  };
 
-  const reportActivity = React.useCallback((activity: ComposerActivity | null) => {
+  const reportActivity = (activity: ComposerActivity | null) => {
     // A real chat sends it over its socket; here the simulated client reads it.
     myActivity.current = activity;
-  }, []);
-
-  const remove = React.useCallback(
-    (id: string) => setMessages((current) => current.filter((item) => item.id !== id)),
-    [],
-  );
+  };
 
-  const dismissReply = React.useCallback(() => setReplyTo(null), []);
-  const dismissEdit = React.useCallback(() => setEditing(null), []);
+  const remove = (id: string) => setMessages((current) => current.filter((item) => item.id !== id));
 
-  // The newest messages for what a row looks up (a reply's original), without making every row
-  // render again when one message changes.
-  const messagesRef = React.useRef(messages);
-  messagesRef.current = messages;
   const contact = dialog.contact;
 
-  // A message renders again only when its data, its place or this function change: a status or an
-  // upload tick re-renders the one message it touches.
-  const renderMessage = React.useCallback(
-    (message: ChatMessage) => {
-      const own = message.from === "me";
-      const original = message.replyTo
-        ? messagesRef.current.find((item) => item.id === message.replyTo)
-        : undefined;
-      return (
-        <Message.Root
-          direction={own ? "outgoing" : "incoming"}
-          time={message.sentAt}
-          status={message.status}
-          edited={message.edited}
-        >
-          {original ? (
-            <Message.Reply author={original.from === "me" ? "Вы" : contact} target={original.id}>
-              {excerpt(original)}
-            </Message.Reply>
-          ) : null}
-          {renderContent(message)}
-          <Message.Menu>
-            <Dropdown.Item onSelect={() => startReply(message)}>
+  // A message renders again only when its data or its place change: a status or an upload tick
+  // re-renders the one message it touches. A dialog loads its own messages, so a row never
+  // outlives the contact it names; a reply's original comes from the list (`entry.find`).
+  const renderMessage = (message: ChatMessage, entry: ChatMessageEntry<ChatMessage>) => {
+    const own = message.from === "me";
+    const original = message.replyTo ? entry.find(message.replyTo) : undefined;
+    return (
+      <Message.Root
+        direction={own ? "outgoing" : "incoming"}
+        time={message.sentAt}
+        status={message.status}
+        edited={message.edited}
+      >
+        {original ? (
+          <Message.Reply author={original.from === "me" ? "Вы" : contact} target={original.id}>
+            {excerpt(original)}
+          </Message.Reply>
+        ) : null}
+        {renderContent(message)}
+        <Message.Menu>
+          <Dropdown.Item onSelect={() => startReply(message)}>
+            <Dropdown.ItemIcon>
+              <Icon name="action.reply" />
+            </Dropdown.ItemIcon>
+            Ответить
+          </Dropdown.Item>
+          {own && message.kind === "text" ? (
+            <Dropdown.Item onSelect={() => startEdit(message)}>
               <Dropdown.ItemIcon>
-                <Icon name="action.reply" />
+                <Icon name="action.edit" />
               </Dropdown.ItemIcon>
-              Ответить
+              Изменить
             </Dropdown.Item>
-            {own && message.kind === "text" ? (
-              <Dropdown.Item onSelect={() => startEdit(message)}>
-                <Dropdown.ItemIcon>
-                  <Icon name="action.edit" />
-                </Dropdown.ItemIcon>
-                Изменить
-              </Dropdown.Item>
-            ) : null}
-            <Dropdown.Item onSelect={() => navigator.clipboard?.writeText(excerpt(message))}>
+          ) : null}
+          <Dropdown.Item onSelect={() => navigator.clipboard?.writeText(excerpt(message))}>
+            <Dropdown.ItemIcon>
+              <Icon name="action.copy" />
+            </Dropdown.ItemIcon>
+            Скопировать
+          </Dropdown.Item>
+          {own ? (
+            <Dropdown.Item tone="danger" onSelect={() => remove(message.id)}>
               <Dropdown.ItemIcon>
-                <Icon name="action.copy" />
+                <Icon name="action.delete" />
               </Dropdown.ItemIcon>
-              Скопировать
+              Удалить
             </Dropdown.Item>
-            {own ? (
-              <Dropdown.Item tone="danger" onSelect={() => remove(message.id)}>
-                <Dropdown.ItemIcon>
-                  <Icon name="action.delete" />
-                </Dropdown.ItemIcon>
-                Удалить
-              </Dropdown.Item>
-            ) : null}
-          </Message.Menu>
-        </Message.Root>
-      );
-    },
-    [contact, startReply, startEdit, remove],
-  );
+          ) : null}
+        </Message.Menu>
+      </Message.Root>
+    );
+  };
 
   return (
-    <>
-      {/* A work screen: in an app this header fills the shell's `header` slot and carries the page —
-          the only h1 and one line of data; main has no PageContent.Header. */}
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            Поддержка
-            <AppHeader.Description>{unreadLabel(unreadTotal)}</AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-      </AppHeader.Root>
-
-      <PageContent.Root fill>
-        <PageContent.Body>
-          <PageContent.Split
-            open={dialogId !== null}
-            onOpenChange={(next) => {
-              if (!next) setDialogId(null);
-            }}
-          >
-            <PageContent.List aria-label="Диалоги">
-              <Card.Root className={styles.paneCard}>
-                <ChatList.Root
-                  items={foundDialogs}
-                  getKey={(item) => item.id}
-                  value={dialogId}
-                  onValueChange={setDialogId}
-                  search={dialogQuery}
-                  onSearchChange={setDialogQuery}
+    <Page.Root fill>
+      {/* A work screen titles itself in its top bar: the only h1 and one line of data. */}
+      <Page.TopBar>
+        <Page.Heading>
+          <Page.Title>Поддержка</Page.Title>
+          <Page.Description>{unreadLabel(unreadTotal)}</Page.Description>
+        </Page.Heading>
+      </Page.TopBar>
+      <Page.Body>
+        <Page.Split
+          open={dialogId !== null}
+          onOpenChange={(next) => {
+            if (!next) setDialogId(null);
+          }}
+        >
+          <Page.List>
+            <Card.Root className={styles.paneCard}>
+              <ChatList.Root
+                items={foundDialogs}
+                getKey={(item) => item.id}
+                value={dialogId}
+                onValueChange={setDialogId}
+                search={dialogQuery}
+                onSearchChange={setDialogQuery}
+                now={NOW}
+                renderItem={(item) => {
+                  const last = lastOf(item);
+                  return (
+                    <ChatList.Item
+                      time={last?.sentAt ?? item.at}
+                      status={last?.from === "me" ? last.status : undefined}
+                      unread={unread[item.id] ?? 0}
+                      typing={item.id === dialogId && clientTyping}
+                    >
+                      <ChatList.ItemIcon>
+                        <Avatar.Root color={hueOf(item.id)}>
+                          <Avatar.Fallback>{item.initials}</Avatar.Fallback>
+                          {item.id === "vector" ? <Avatar.Status status="online" /> : null}
+                        </Avatar.Root>
+                      </ChatList.ItemIcon>
+                      <ChatList.ItemText>{item.name}</ChatList.ItemText>
+                      <ChatList.ItemDescription author={last?.from === "me" ? "Вы" : undefined}>
+                        {previewOf(item)}
+                      </ChatList.ItemDescription>
+                    </ChatList.Item>
+                  );
+                }}
+              />
+            </Card.Root>
+          </Page.List>
+
+          <Page.Detail>
+            <Card.Root className={styles.paneCard}>
+              <Chat.Root typing={clientTyping}>
+                <Chat.Header>
+                  <Page.BackButton />
+                  <Avatar.Root color={hueOf(dialog.id)}>
+                    <Avatar.Fallback>{dialog.initials}</Avatar.Fallback>
+                    {dialog.id === "vector" ? <Avatar.Status status="online" /> : null}
+                  </Avatar.Root>
+                  <Chat.Title>{dialog.name}</Chat.Title>
+                  <Chat.Description>{dialog.contact}</Chat.Description>
+                  <Chat.Actions>
+                    <Chat.SearchButton />
+                  </Chat.Actions>
+                </Chat.Header>
+                <Chat.Search />
+                <Chat.Messages
+                  loading={loadedId !== dialogId}
+                  items={messages}
+                  getKey={(message) => message.id}
+                  getAuthor={(message) => message.from}
+                  getDate={(message) => message.sentAt}
+                  renderMessage={renderMessage}
+                  unread={FIRST_UNREAD}
                   now={NOW}
-                  renderItem={(item) => {
-                    const last = lastOf(item);
-                    return (
-                      <ChatList.Item
-                        time={last?.sentAt ?? item.at}
-                        status={last?.from === "me" ? last.status : undefined}
-                        unread={unread[item.id] ?? 0}
-                        typing={item.id === dialogId && clientTyping}
-                      >
-                        <ChatList.ItemIcon>
-                          <Avatar.Root color={hueOf(item.id)}>
-                            <Avatar.Fallback>{item.initials}</Avatar.Fallback>
-                            {item.id === "vector" ? <Avatar.Status status="online" /> : null}
-                          </Avatar.Root>
-                        </ChatList.ItemIcon>
-                        <ChatList.ItemText>{item.name}</ChatList.ItemText>
-                        <ChatList.ItemDescription author={last?.from === "me" ? "Вы" : undefined}>
-                          {previewOf(item)}
-                        </ChatList.ItemDescription>
-                      </ChatList.Item>
-                    );
+                  hasOlder={hasOlder}
+                  onLoadOlder={loadOlder}
+                  onNewMessage={(_, { direction }) => {
+                    if (direction !== "incoming" || !dialogId) return;
+                    setUnread((current) => ({
+                      ...current,
+                      [dialogId]: (current[dialogId] ?? 0) + 1,
+                    }));
+                  }}
+                  onRead={(values) => {
+                    if (!dialogId) return;
+                    setUnread((current) => ({
+                      ...current,
+                      [dialogId]: Math.max(0, (current[dialogId] ?? 0) - values.length),
+                    }));
                   }}
                 />
-              </Card.Root>
-            </PageContent.List>
-
-            <PageContent.Detail aria-label="Переписка">
-              <Card.Root className={styles.paneCard}>
-                <Chat.Root typing={clientTyping}>
-                  <Chat.Header>
-                    <PageContent.BackButton />
-                    <Avatar.Root color={hueOf(dialog.id)}>
-                      <Avatar.Fallback>{dialog.initials}</Avatar.Fallback>
-                      {dialog.id === "vector" ? <Avatar.Status status="online" /> : null}
-                    </Avatar.Root>
-                    <Chat.Title>{dialog.name}</Chat.Title>
-                    <Chat.Description>{dialog.contact}</Chat.Description>
-                    <Chat.Actions>
-                      <Chat.SearchButton />
-                    </Chat.Actions>
-                  </Chat.Header>
-                  <Chat.Search />
-                  <Chat.Messages
-                    loading={loadedId !== dialogId}
-                    items={messages}
-                    getKey={(message) => message.id}
-                    getAuthor={(message) => message.from}
-                    getDate={(message) => message.sentAt}
-                    renderMessage={renderMessage}
-                    unread={FIRST_UNREAD}
-                    now={NOW}
-                    hasOlder={hasOlder}
-                    onLoadOlder={loadOlder}
-                    onNewMessage={(_, { direction }) => {
-                      if (direction !== "incoming" || !dialogId) return;
-                      setUnread((current) => ({
-                        ...current,
-                        [dialogId]: (current[dialogId] ?? 0) + 1,
-                      }));
-                    }}
-                    onRead={(values) => {
-                      if (!dialogId) return;
-                      setUnread((current) => ({
-                        ...current,
-                        [dialogId]: Math.max(0, (current[dialogId] ?? 0) - values.length),
-                      }));
-                    }}
+                <Chat.Footer>
+                  <ChatComposer
+                    replyTo={replyTo}
+                    replyAuthor={dialog.contactTo}
+                    editing={editing}
+                    onReplyDismiss={() => setReplyTo(null)}
+                    onEditDismiss={() => setEditing(null)}
+                    onEditLast={editLast}
+                    onPost={post}
+                    onSave={save}
+                    onActivityChange={reportActivity}
                   />
-                  <Chat.Footer>
-                    <ChatComposer
-                      replyTo={replyTo}
-                      replyAuthor={dialog.contactTo}
-                      editing={editing}
-                      onReplyDismiss={dismissReply}
-                      onEditDismiss={dismissEdit}
-                      onEditLast={editLast}
-                      onPost={post}
-                      onSave={save}
-                      onActivityChange={reportActivity}
-                    />
-                  </Chat.Footer>
-                </Chat.Root>
-              </Card.Root>
-            </PageContent.Detail>
-          </PageContent.Split>
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+                </Chat.Footer>
+              </Chat.Root>
+            </Card.Root>
+          </Page.Detail>
+        </Page.Split>
+      </Page.Body>
+    </Page.Root>
   );
 }