@sentry/junior-dashboard 0.267.0 → 0.268.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.267.0",
+  "version": "0.268.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -39,10 +39,10 @@
     "remark-gfm": "^4.0.1",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior-plugin-api": "0.267.0"
+    "@sentry/junior-plugin-api": "0.268.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.267.0"
+    "@sentry/junior": "0.268.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -62,7 +62,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vitest": "^4.1.12",
-    "@sentry/junior": "0.267.0"
+    "@sentry/junior": "0.268.0"
   },
   "scripts": {
     "build": "pnpm --filter @sentry/junior-plugin-api build && pnpm --filter @sentry/junior build && pnpm run build:client && pnpm run build:css && pnpm run build:server",

package/src/client/App.tsx

@@ -66,6 +66,8 @@ import {
 } from "./pages/user/PluginUserPage";
 import { AdminPage } from "./pages/admin/AdminPage";
 import { buildPrimaryNavItems } from "./primaryNav";
+import { ReviewDeskPage } from "./review-desk/ReviewDeskPage";
+import { useReviewItemCountData } from "./review-desk/queries";
 import type { DashboardCoreData } from "./types";
 
 const dashboardNoise = {
@@ -111,11 +113,13 @@ export function DashboardShell() {
     ? (conversationDetailTitle(conversationDetail.data) ??
       conversationDisplayTitle(mobileConversation))
     : undefined;
+  const reviewCountQuery = useReviewItemCountData(loggedIn);
   const primaryNavItems = buildPrimaryNavItems({
     loading,
     loggedIn,
     pathname: location.pathname,
     primaryUserPages,
+    reviewCount: reviewCountQuery.data?.mine,
     userPagesPending: userPagesQuery.isPending,
   });
 
@@ -362,6 +366,22 @@ export function DashboardShell() {
             }
             path="/"
           />
+          <Route
+            element={
+              loading ? (
+                <PageRouteLoading
+                  description="Items that need a person, and who can act on them."
+                  label="Loading review desk"
+                  title="Review desk"
+                />
+              ) : loggedIn ? (
+                <ReviewDeskPage />
+              ) : (
+                <Navigate replace to="/" />
+              )
+            }
+            path="/review"
+          />
           <Route element={<CodePage />} path="/code" />
           {codeRepositoryTabs.map((tab) => (
             <Route

package/src/client/components/ParticipantAvatarStack.tsx

@@ -13,7 +13,8 @@ type ParticipantAvatarStackProps = {
   size: "detail" | "list";
 };
 
-function participantName(participant: ActorIdentity): string {
+/** Name an actor for display: full name first, then handle, email, or ID. */
+export function participantName(participant: ActorIdentity): string {
   return (
     participant.fullName?.trim() ||
     participant.slackUserName?.trim() ||

package/src/client/components/README.md

@@ -90,6 +90,10 @@ Rules for adopted components:
 - For a link that looks like a button, put `buttonVariants()` on the router
   `Link`. A form page has one `Button variant="primary"` for its main save
   action.
+- Use `Button variant="quiet"` for a secondary action beside the primary one,
+  such as Dismiss. It has no border, so the primary action stays dominant.
+- In a form, show each choice as a whole bordered row around `RadioGroupItem`
+  or `Checkbox`. The row shows hover and selected state. See `UserInputForm`.
 
 ## Foundations
 

package/src/client/components/UserInputForm.tsx

@@ -0,0 +1,283 @@
+import { useId, useRef, useState, type FormEvent, type ReactNode } from "react";
+import {
+  buttonUserInputField,
+  isEmptyUserInputAnswer,
+  normalizeUserInputAnswer,
+  type UserInputAnswer,
+  type UserInputField,
+  type UserInputRequest,
+} from "@sentry/junior/api/schema";
+
+import { cn } from "../styles";
+import { Button } from "./ui/button";
+import { Checkbox } from "./ui/checkbox";
+import { Field, FieldDescription, FieldLabel } from "./ui/field";
+import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
+import { Textarea } from "./ui/textarea";
+
+// Each choice is a whole selectable row, so the hit area and the selected
+// state read at a glance. The control inside keeps its own focus ring.
+const optionClass =
+  "flex cursor-pointer items-start gap-3 rounded-md border border-dashboard-border bg-dashboard-surface-panel px-3 py-2.5 text-sm transition-colors hover:border-dashboard-border-emphasis hover:bg-dashboard-surface-hover has-[[data-checked]]:border-dashboard-accent/60 has-[[data-checked]]:bg-dashboard-accent/10 has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-60";
+
+function OptionText(props: { description?: string; label: string }) {
+  return (
+    <span className="grid min-w-0 gap-0.5 break-words">
+      <span className="font-medium text-dashboard-text">{props.label}</span>
+      {props.description ? (
+        <span className="text-xs text-dashboard-text-muted">
+          {props.description}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+function ChoiceField(props: {
+  disabled: boolean;
+  field: Extract<UserInputField, { kind: "choice" | "multi_choice" }>;
+  onChange(values: string[]): void;
+  values: string[];
+}) {
+  const id = useId();
+  const { field } = props;
+  const legend = (
+    <legend className="mb-2 p-0 text-sm font-semibold text-dashboard-text">
+      {field.label}
+    </legend>
+  );
+  const description = field.description ? (
+    <FieldDescription className="-mt-1 mb-2" id={`${id}-help`}>
+      {field.description}
+    </FieldDescription>
+  ) : null;
+  const describedBy = field.description ? `${id}-help` : undefined;
+  if (field.kind === "choice") {
+    return (
+      <fieldset className="m-0 min-w-0 border-0 p-0">
+        {legend}
+        {description}
+        <RadioGroup
+          aria-describedby={describedBy}
+          aria-label={field.label}
+          className="grid gap-2"
+          disabled={props.disabled}
+          onValueChange={(value) => props.onChange([String(value)])}
+          value={props.values[0] ?? null}
+        >
+          {field.options.map((option) => (
+            <label className={optionClass} key={option.label}>
+              <RadioGroupItem className="mt-0.5" value={option.label} />
+              <OptionText
+                description={option.description}
+                label={option.label}
+              />
+            </label>
+          ))}
+        </RadioGroup>
+      </fieldset>
+    );
+  }
+  return (
+    <fieldset
+      aria-describedby={describedBy}
+      className="m-0 min-w-0 border-0 p-0"
+    >
+      {legend}
+      {description}
+      <div className="grid gap-2">
+        {field.options.map((option) => (
+          <label className={optionClass} key={option.label}>
+            <Checkbox
+              checked={props.values.includes(option.label)}
+              className="mt-0.5"
+              disabled={props.disabled}
+              onCheckedChange={(checked) =>
+                props.onChange(
+                  checked
+                    ? [...props.values, option.label]
+                    : props.values.filter((value) => value !== option.label),
+                )
+              }
+            />
+            <OptionText description={option.description} label={option.label} />
+          </label>
+        ))}
+      </div>
+    </fieldset>
+  );
+}
+
+function TextField(props: {
+  className?: string;
+  description?: string;
+  disabled: boolean;
+  label: string;
+  onChange(value: string): void;
+  value: string;
+}) {
+  const id = useId();
+  return (
+    <Field>
+      <FieldLabel htmlFor={id}>{props.label}</FieldLabel>
+      {props.description ? (
+        <FieldDescription className="-mt-1" id={`${id}-help`}>
+          {props.description}
+        </FieldDescription>
+      ) : null}
+      <Textarea
+        aria-describedby={props.description ? `${id}-help` : undefined}
+        className={cn("min-h-20 leading-relaxed", props.className)}
+        disabled={props.disabled}
+        id={id}
+        onChange={(event) => props.onChange(event.target.value)}
+        value={props.value}
+      />
+    </Field>
+  );
+}
+
+/**
+ * Render the answer controls of a `requestUserInput` request. A request with
+ * one short choice field shows one button per choice, and a click is the
+ * answer. Other requests show a form that the reader submits once. A failed
+ * `onSubmit` lets the reader try again. `secondaryActions`, such as Dismiss,
+ * sit in the same action row, after the answer controls.
+ */
+export function UserInputForm(props: {
+  onSubmit(answer: UserInputAnswer): Promise<void>;
+  request: UserInputRequest;
+  requestId: string;
+  secondaryActions?: ReactNode;
+}) {
+  const [sending, setSending] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [values, setValues] = useState<Record<string, string[]>>({});
+  const [other, setOther] = useState("");
+  const buttonField = buttonUserInputField(props.request);
+
+  // A ref blocks a second click before React renders the disabled controls.
+  // The lock stays after a sent answer; only a failed send can retry.
+  const sendLock = useRef(false);
+
+  async function send(answer: UserInputAnswer) {
+    if (sendLock.current) return;
+    sendLock.current = true;
+    setSending(true);
+    setFailed(false);
+    try {
+      await props.onSubmit(answer);
+    } catch {
+      sendLock.current = false;
+      setSending(false);
+      setFailed(true);
+    }
+  }
+
+  const answer: UserInputAnswer = {
+    other,
+    requestId: props.requestId,
+    values,
+  };
+  function submit(event: FormEvent) {
+    event.preventDefault();
+    if (
+      !isEmptyUserInputAnswer(normalizeUserInputAnswer(props.request, answer))
+    ) {
+      void send(answer);
+    }
+  }
+
+  const secondary = props.secondaryActions ? (
+    <div className="flex flex-wrap gap-1 sm:ml-auto">
+      {props.secondaryActions}
+    </div>
+  ) : null;
+
+  return (
+    <>
+      {buttonField ? (
+        <>
+          <div className="mt-3 flex flex-wrap items-center gap-2">
+            {buttonField.options.map((option) => (
+              <Button
+                disabled={sending}
+                key={option.label}
+                onClick={() =>
+                  void send({
+                    requestId: props.requestId,
+                    values: { [buttonField.id]: [option.label] },
+                  })
+                }
+                title={option.description}
+              >
+                {option.label}
+              </Button>
+            ))}
+            {secondary}
+          </div>
+          {buttonField.options.some((option) => option.description) ? (
+            <ul className="mb-0 mt-2 list-none p-0 text-xs text-dashboard-text-muted">
+              {buttonField.options
+                .filter((option) => option.description)
+                .map((option) => (
+                  <li key={option.label}>
+                    <span className="font-medium text-dashboard-text">
+                      {option.label}
+                    </span>
+                    : {option.description}
+                  </li>
+                ))}
+            </ul>
+          ) : null}
+        </>
+      ) : (
+        <form className="mt-4 grid gap-5" onSubmit={submit}>
+          {props.request.fields.map((field) =>
+            field.kind === "text" ? (
+              <TextField
+                description={field.description}
+                disabled={sending}
+                key={field.id}
+                label={field.label}
+                onChange={(value) =>
+                  setValues((current) => ({ ...current, [field.id]: [value] }))
+                }
+                value={values[field.id]?.[0] ?? ""}
+              />
+            ) : (
+              <ChoiceField
+                disabled={sending}
+                field={field}
+                key={field.id}
+                onChange={(picked) =>
+                  setValues((current) => ({ ...current, [field.id]: picked }))
+                }
+                values={values[field.id] ?? []}
+              />
+            ),
+          )}
+          <TextField
+            className="min-h-16"
+            description="Optional. Anything else, or an answer that is not listed."
+            disabled={sending}
+            label="Other"
+            onChange={setOther}
+            value={other}
+          />
+          <div className="flex flex-wrap items-center gap-2">
+            <Button disabled={sending} type="submit" variant="primary">
+              Send
+            </Button>
+            {secondary}
+          </div>
+        </form>
+      )}
+      {failed ? (
+        <p className="mb-0 mt-2 text-xs text-rose-300" role="alert">
+          Could not send your answer. Try again.
+        </p>
+      ) : null}
+    </>
+  );
+}

package/src/client/components/layout/DashboardHeader.tsx

@@ -15,11 +15,22 @@ import {
 import { cn, dashboardInteractiveTextClass } from "../../styles";
 
 export type DashboardHeaderNavItem = {
+  /** Shown beside the label when it is above zero. */
+  count?: number;
   key: string;
   label: string;
   to: string;
 };
 
+function NavCount(props: { count?: number }) {
+  if (!props.count) return null;
+  return (
+    <span className="ml-1.5 rounded-full bg-violet-300/20 px-1.5 py-0.5 text-xs text-violet-200">
+      {props.count.toLocaleString("en-US")}
+    </span>
+  );
+}
+
 /** Render the primary dashboard shell header and optional mobile nav sheet. */
 export function DashboardHeader(props: {
   /** Back target used on mobile conversation detail. */
@@ -151,6 +162,7 @@ export function DashboardHeader(props: {
           {props.navItems.map((item) => (
             <NavLink className={navLinkClass} key={item.key} to={item.to}>
               {item.label}
+              <NavCount count={item.count} />
             </NavLink>
           ))}
         </nav>
@@ -204,6 +216,7 @@ export function DashboardHeader(props: {
                     to={item.to}
                   >
                     {item.label}
+                    <NavCount count={item.count} />
                   </NavLink>
                 ))}
               </nav>

package/src/client/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cn } from "@dashboard/lib/utils";
 const commandButtonClass =
   "inline-flex h-9 max-w-full items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium leading-none focus-visible:outline-2 focus-visible:outline-offset-2";
 
-/** Style the dashboard command, primary, danger, icon, and menu row button surfaces. Links use it with `className`. */
+/** Style the dashboard command, primary, quiet, danger, icon, and menu row button surfaces. Links use it with `className`. */
 const buttonVariants = cva(
   "cursor-pointer font-sans no-underline transition-colors data-disabled:cursor-not-allowed data-disabled:opacity-50",
   {
@@ -13,6 +13,8 @@ const buttonVariants = cva(
       variant: {
         default: "",
         primary: "",
+        /** A secondary action beside a primary one, such as Dismiss. */
+        quiet: "",
         danger: "",
       },
       size: {
@@ -38,6 +40,14 @@ const buttonVariants = cva(
           "border-dashboard-text-solid bg-dashboard-text-solid text-dashboard-text-inverse hover:border-dashboard-text-subtle hover:bg-dashboard-text-subtle focus-visible:outline-dashboard-focus data-disabled:hover:border-dashboard-text-solid data-disabled:hover:bg-dashboard-text-solid",
         ),
       },
+      {
+        size: "default",
+        variant: "quiet",
+        className: cn(
+          commandButtonClass,
+          "border-transparent bg-transparent text-dashboard-text-muted hover:bg-dashboard-fill-strong hover:text-dashboard-text focus-visible:outline-dashboard-focus data-disabled:hover:bg-transparent data-disabled:hover:text-dashboard-text-muted",
+        ),
+      },
       {
         size: "default",
         variant: "danger",

package/src/client/conversations/ConversationHomeList.tsx

@@ -35,6 +35,7 @@ export function ConversationHomeList(props: {
   finishedConversationIds: ReadonlySet<string>;
   loading?: boolean;
   timeZone: string;
+  waitingConversationIds: ReadonlySet<string>;
 }) {
   const [archivedConversation, setArchivedConversation] =
     useState<Conversation>();
@@ -94,6 +95,7 @@ export function ConversationHomeList(props: {
             key={section.key}
             onArchiveError={handleArchiveError}
             onArchived={handleArchived}
+            waitingConversationIds={props.waitingConversationIds}
             section={section}
           />
         ))}
@@ -169,6 +171,7 @@ function ConversationCardSection(props: {
   onArchiveError(conversation: Conversation, wasArchiving: boolean): void;
   onArchived(conversation: Conversation): void;
   section: ConversationSection;
+  waitingConversationIds: ReadonlySet<string>;
 }) {
   return (
     <section aria-labelledby={`conversation-section-${props.section.key}`}>
@@ -188,6 +191,7 @@ function ConversationCardSection(props: {
             key={conversation.id}
             onArchiveError={props.onArchiveError}
             onArchived={props.onArchived}
+            waitingOnViewer={props.waitingConversationIds.has(conversation.id)}
           />
         ))}
       </div>
@@ -200,6 +204,7 @@ function ConversationCard(props: {
   finishedSinceSeen: boolean;
   onArchiveError(conversation: Conversation, wasArchiving: boolean): void;
   onArchived(conversation: Conversation): void;
+  waitingOnViewer: boolean;
 }) {
   const conversation = props.conversation;
   const archive = useArchiveConversation(conversation.id, {
@@ -231,6 +236,7 @@ function ConversationCard(props: {
               finishedSinceSeen={props.finishedSinceSeen}
               isPrivate={isPrivate}
               status={status}
+              waitingOnViewer={props.waitingOnViewer}
             />
           </span>
           <h4 className="m-0 truncate font-display text-base font-medium leading-snug text-dashboard-text">

package/src/client/conversations/ConversationListStatusIcon.tsx

@@ -4,12 +4,26 @@ import { ActiveIndicator } from "../components/ActiveIndicator";
 import { cn } from "../styles";
 import type { VisualStatus } from "../types";
 
-/** Render a conversation status marker, with new completions taking priority. */
+/**
+ * Render a conversation status marker. "Waiting on you" replaces every other
+ * marker, then new completions take priority.
+ */
 export function ConversationListStatusIcon(props: {
   finishedSinceSeen: boolean;
   isPrivate: boolean;
   status: VisualStatus;
+  waitingOnViewer: boolean;
 }) {
+  if (props.waitingOnViewer) {
+    return (
+      <span
+        aria-label="Waiting on you"
+        className="size-2 shrink-0 rounded-full bg-violet-300 shadow-[0_0_6px_rgba(196,181,253,0.7)]"
+        role="img"
+      />
+    );
+  }
+
   if (props.finishedSinceSeen) {
     return (
       <span

package/src/client/conversations/ConversationPage.tsx

@@ -93,6 +93,7 @@ import {
 } from "../components/ParticipantAvatarStack";
 import { ChatLayout } from "./ChatLayout";
 import { ComposerDock } from "./ComposerDock";
+import { ConversationReviewBar } from "../review-desk/ConversationReviewBar";
 import { Transcript } from "./TranscriptView";
 import { TranscriptLoading } from "./TranscriptLoading";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
@@ -547,9 +548,11 @@ export function ConversationPage(props: {
       {turnContext ? (
         <TranscriptSearchProvider query={search}>
           <TurnContextDetails
+            actor={turnContext.actor}
             contexts={turnContext.contexts}
             key={turnContext.id}
             onClose={closeTurnContext}
+            timestamp={turnContext.timestamp}
           />
         </TranscriptSearchProvider>
       ) : null}
@@ -801,6 +804,7 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
               request={props.userInputRequest}
             />
           ) : null}
+          <ConversationReviewBar conversationId={props.conversationId} />
           <PendingMailboxStack
             cancelError={cancelError}
             cancelPending={cancelPendingMessages.isPending}

package/src/client/conversations/ConversationSidebar.tsx

@@ -48,6 +48,7 @@ export function ConversationSidebar(props: {
   query: string;
   selectedId?: string;
   timeZone: string;
+  waitingConversationIds: ReadonlySet<string>;
   /**
    * `panel` = split-pane dock with internal scroll.
    * `landing` = flow nav under create compose (parent owns scroll).
@@ -186,6 +187,9 @@ export function ConversationSidebar(props: {
                   onArchiveError={handleArchiveError}
                   onArchived={handleArchived}
                   selected={entry.conversation.id === props.selectedId}
+                  waitingOnViewer={props.waitingConversationIds.has(
+                    entry.conversation.id,
+                  )}
                 />
               )
             }
@@ -271,6 +275,7 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
   onArchiveError(conversation: Conversation, wasArchiving: boolean): void;
   onArchived(conversation: Conversation): void;
   selected: boolean;
+  waitingOnViewer: boolean;
 }) {
   const archive = useArchiveConversation(props.conversation.id, {
     // Read the attempted direction from the mutation call, not the (possibly
@@ -316,6 +321,7 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
               finishedSinceSeen={props.finishedSinceSeen}
               isPrivate={isPrivate}
               status={status}
+              waitingOnViewer={props.waitingOnViewer}
             />
           </div>
           <div className="col-start-2 row-start-1 min-w-0 truncate font-sans text-sm font-medium leading-snug text-dashboard-text">

package/src/client/conversations/ConversationWorkspace.tsx

@@ -20,6 +20,7 @@ import { buildConversations, getDashboardTimeZone } from "../format";
 import { useDebouncedValue } from "../debouncedValue";
 import type { Conversation } from "../types";
 import { ConversationPage } from "./ConversationPage";
+import { useWaitingConversationIds } from "../review-desk/queries";
 import { useConversationFinishedIndicators } from "./useConversationFinishedIndicators";
 
 const CONVERSATION_PAGE_SIZE = 20;
@@ -61,6 +62,7 @@ export function ConversationWorkspace() {
   useEffect(() => {
     if (page > totalPages) setPage(totalPages);
   }, [page, totalPages]);
+  const waitingConversationIds = useWaitingConversationIds();
   const { finishedConversationIds, markRead } =
     useConversationFinishedIndicators(
       conversations,
@@ -107,6 +109,7 @@ export function ConversationWorkspace() {
               finishedConversationIds={finishedConversationIds}
               loading={feed.isPending}
               timeZone={getDashboardTimeZone()}
+              waitingConversationIds={waitingConversationIds}
             />
             <PagePagination
               className="pt-1"
@@ -135,6 +138,7 @@ export function ConversationWorkspace() {
           query={query}
           selectedId={selectedId}
           timeZone={getDashboardTimeZone()}
+          waitingConversationIds={waitingConversationIds}
         />
       </div>
       <section

package/src/client/conversations/TranscriptActivityGroup.tsx

@@ -9,6 +9,7 @@ import {
   TooltipTrigger,
 } from "../components/ui/tooltip";
 import { formatMs } from "../format";
+import { reviewItemIdFromToolCall } from "../review-desk/reviewItemFormat";
 import type { RenderedTranscriptEntry } from "./transcriptRenderModel";
 import { cn } from "../styles";
 import { useTranscriptSearch } from "./transcriptSearch";
@@ -29,6 +30,10 @@ export function isCollapsibleActivityEntry(
   // Child agent rows stay in the main view, like their result events.
   if (entry.kind === "subagent") return false;
   if (entry.kind === "message") return false;
+  // A review card stays visible where the agent added the item.
+  if (entry.kind === "tool" && reviewItemIdFromToolCall(entry.part)) {
+    return false;
+  }
   return true;
 }
 

package/src/client/conversations/TranscriptMessageContextView.tsx

@@ -3,7 +3,11 @@ import { useState } from "react";
 
 import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
 import { dashboardDisclosureChevronClass } from "../styles";
-import { formatMessageTimestamp, transcriptMessageActorLabel } from "../format";
+import {
+  formatMessageTimestamp,
+  transcriptMessageActor,
+  transcriptMessageActorLabel,
+} from "../format";
 import type { ConversationTranscript, TranscriptViewMessage } from "../types";
 import {
   TranscriptHeadingMeta,
@@ -61,8 +65,13 @@ export function TranscriptMessageContextView(props: {
           {!props.redacted && props.message.contexts?.length ? (
             <div className="mt-2">
               <TranscriptTurnContextView
+                actor={transcriptMessageActor(
+                  props.conversation,
+                  props.message,
+                )}
                 contexts={props.message.contexts}
                 messageId={props.message.messageId}
+                timestamp={props.message.timestamp}
               />
             </div>
           ) : null}
@@ -93,8 +102,10 @@ export function TranscriptMessageContextView(props: {
         {!props.redacted && props.message.contexts?.length ? (
           <div className="mt-2">
             <TranscriptTurnContextView
+              actor={transcriptMessageActor(props.conversation, props.message)}
               contexts={props.message.contexts}
               messageId={props.message.messageId}
+              timestamp={props.message.timestamp}
             />
           </div>
         ) : null}