@sentry/junior-dashboard 0.273.0 → 0.274.0

package/src/client/conversations/useConversationFinishedIndicators.ts

@@ -12,6 +12,12 @@ type StoredConversationStates = Record<string, StoredConversationState>;
 
 type ConversationFinishedIndicators = {
   finishedConversationIds: ReadonlySet<string>;
+  /**
+   * The selected conversation when it was unread at the moment it opened.
+   * Lists keep it in its unread place until another conversation opens, so
+   * the row does not move under the pointer.
+   */
+  heldConversationId?: string;
   markRead(conversationId: string, lastReadAt: string): void;
 };
 
@@ -23,6 +29,23 @@ export function useConversationFinishedIndicators(
   pruneMissing: boolean,
 ): ConversationFinishedIndicators {
   const [storedStates, setStoredStates] = useState(readStoredStates);
+  const [held, setHeld] = useState<{ heldId?: string; selectedId?: string }>(
+    {},
+  );
+  // Read the unread state when the selection changes, before the effect
+  // below or the opened page marks it read. Hold only a row that the list
+  // already showed. A deep link has no row under the pointer, and the
+  // selected row never leads its section, so it does not move.
+  if (held.selectedId !== selectedId) {
+    const selected = conversations.find(({ id }) => id === selectedId);
+    setHeld({
+      heldId:
+        selected && finishedSinceRead(storedStates, selected)
+          ? selected.id
+          : undefined,
+      selectedId,
+    });
+  }
 
   useEffect(() => {
     if (!ready) return;
@@ -55,6 +78,7 @@ export function useConversationFinishedIndicators(
       () => finishedConversationIds(storedStates, conversations, selectedId),
       [conversations, selectedId, storedStates],
     ),
+    heldConversationId: held.heldId,
     markRead,
   };
 }
@@ -67,19 +91,27 @@ export function finishedConversationIds(
 ): ReadonlySet<string> {
   return new Set(
     conversations
-      .filter((conversation) => {
-        const state = states[conversation.id];
-        return (
+      .filter(
+        (conversation) =>
           conversation.id !== selectedId &&
-          conversation.status === "completed" &&
-          state !== undefined &&
-          isAfter(conversation.lastSeenAt, state.lastReadAt)
-        );
-      })
+          finishedSinceRead(states, conversation),
+      )
       .map((conversation) => conversation.id),
   );
 }
 
+function finishedSinceRead(
+  states: StoredConversationStates,
+  conversation: Conversation,
+): boolean {
+  const state = states[conversation.id];
+  return (
+    conversation.status === "completed" &&
+    state !== undefined &&
+    isAfter(conversation.lastSeenAt, state.lastReadAt)
+  );
+}
+
 /** Record reads and remove conversations outside the visible list. */
 export function reconcileStoredStates(
   current: StoredConversationStates,

package/src/client/pages/settings/SettingsPage.tsx

@@ -12,12 +12,14 @@ import {
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { Textarea } from "../../components/ui/textarea";
+import { Checkbox } from "../../components/ui/checkbox";
 import { Field, FieldDescription, FieldLabel } from "../../components/ui/field";
 import { RadioGroup, RadioGroupItem } from "../../components/ui/radio-group";
 import {
   useConversationStartPosition,
   type ConversationStartPosition,
 } from "../../conversations/transcriptReadPosition";
+import { useComposerAutocorrect } from "../../conversations/composerAutocorrect";
 import { InlineError } from "../../components/InlineError";
 import { Card } from "../../components/layout/Card";
 import { DashboardApiError, fetchDashboardJson, patch, put } from "../../http";
@@ -105,6 +107,7 @@ export function SettingsPage({ identity }: SettingsPageProps) {
         </Card>
       </form>
       <ConversationStartSetting />
+      <ComposerAutocorrectSetting />
       <CustomizationForm />
     </SettingsPageLayout>
   );
@@ -166,6 +169,31 @@ function ConversationStartSetting() {
   );
 }
 
+/** Let the user turn on keyboard autocorrect in the composer on this browser. */
+function ComposerAutocorrectSetting() {
+  const [autocorrect, setAutocorrect] = useComposerAutocorrect();
+  return (
+    <Card className="mt-6 mb-0" padding="md" variant="raised">
+      <h2 className="m-0 text-lg font-bold">Message box</h2>
+      <label className="mt-4 flex cursor-pointer items-start gap-3">
+        <Checkbox
+          checked={autocorrect}
+          className="mt-0.5"
+          onCheckedChange={setAutocorrect}
+        />
+        <span className="grid gap-0.5">
+          <span className="text-sm font-medium">Autocorrect</span>
+          <span className="text-xs text-dashboard-text-muted">
+            Let your keyboard correct spelling and capitalize sentences as you
+            type. This can change ids, paths, and code. This choice applies to
+            this browser.
+          </span>
+        </span>
+      </label>
+    </Card>
+  );
+}
+
 /**
  * Let the user save text that changes how the agent replies to them. The
  * server returns 404 when the app does not enable this experiment.

package/src/client/review-desk/ConversationReviewBar.tsx

@@ -1,10 +1,14 @@
 import { ChevronRight } from "lucide-react";
-import { useState } from "react";
+import { useSearchParams } from "react-router";
 
 import { Drawer } from "../components/Drawer";
 import { LoadMorePagination } from "../components/Pagination";
 import { ReviewItemCard } from "./ReviewItemCard";
 import { useReviewItemsData } from "./queries";
+import {
+  CONVERSATION_REVIEW_OPEN,
+  CONVERSATION_REVIEW_PARAM,
+} from "../conversations/conversationRoutes";
 
 /** `more` marks a count of the loaded pages only, such as "50+". */
 function itemCountLabel(count: number, more: boolean): string {
@@ -15,9 +19,23 @@ function itemCountLabel(count: number, more: boolean): string {
 /**
  * Show how many open Review items are linked to a Conversation, above its
  * message box. The bar opens a side panel where the viewer can act on each.
+ * The URL owns the panel, so a sidebar link can open it.
  */
 export function ConversationReviewBar(props: { conversationId: string }) {
-  const [open, setOpen] = useState(false);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const open =
+    searchParams.get(CONVERSATION_REVIEW_PARAM) === CONVERSATION_REVIEW_OPEN;
+  const setOpen = (value: boolean) =>
+    setSearchParams(
+      (current) => {
+        const next = new URLSearchParams(current);
+        if (value)
+          next.set(CONVERSATION_REVIEW_PARAM, CONVERSATION_REVIEW_OPEN);
+        else next.delete(CONVERSATION_REVIEW_PARAM);
+        return next;
+      },
+      { replace: true },
+    );
   const { items, query } = useReviewItemsData({
     conversationId: props.conversationId,
   });

package/src/client/review-desk/queries.ts

@@ -153,13 +153,20 @@ export function useReviewItemAction() {
   });
 }
 
-const NO_CONVERSATIONS: ReadonlySet<string> = new Set();
+/** Newest open Review item title and item count for one waiting Conversation. */
+export type WaitingConversation = { count: number; title: string };
+
+const NO_WAITING: ReadonlyMap<string, WaitingConversation> = new Map();
 
 /**
- * Return the Conversations that wait on the viewer. Today only the review
- * desk sets this: a linked open action item assigned to the viewer.
+ * Return the Conversations that wait on the viewer, by Conversation id. Today
+ * only the review desk sets this: a linked open action item assigned to the
+ * viewer.
  */
-export function useWaitingConversationIds(): ReadonlySet<string> {
+export function useWaitingConversations(): ReadonlyMap<
+  string,
+  WaitingConversation
+> {
   const query = useQuery({
     queryKey: [...REVIEW_ITEMS_QUERY_KEY, "waiting-conversations"],
     queryFn: ({ signal }) =>
@@ -171,6 +178,23 @@ export function useWaitingConversationIds(): ReadonlySet<string> {
     refetchInterval: COUNT_REFRESH_MS,
     retry: false,
   });
-  const ids = query.data?.conversationIds;
-  return useMemo(() => (ids ? new Set(ids) : NO_CONVERSATIONS), [ids]);
+  const conversations = query.data?.conversations;
+  return useMemo(
+    () =>
+      conversations
+        ? new Map(
+            conversations.map(({ conversationId, count, title }) => [
+              conversationId,
+              { count, title },
+            ]),
+          )
+        : NO_WAITING,
+    [conversations],
+  );
+}
+
+/** Return the ids of the Conversations that wait on the viewer. */
+export function useWaitingConversationIds(): ReadonlySet<string> {
+  const waiting = useWaitingConversations();
+  return useMemo(() => new Set(waiting.keys()), [waiting]);
 }

package/src/mock-reporting/routes.ts

@@ -331,7 +331,7 @@ export function createMockReportingApi(): Hono<{
     jsonResponse(reviewItemCountSchema, { needsViewer: 0 }),
   );
   app.get("/review-items/waiting-conversations", () =>
-    jsonResponse(reviewItemWaitingConversationsSchema, { conversationIds: [] }),
+    jsonResponse(reviewItemWaitingConversationsSchema, { conversations: [] }),
   );
   app.get("/review-items/:id", () =>
     errorResponse("Review item not found.", 404),