@oxy.so/bloom 6.3.0 → 7.0.0

package/src/multi-agent-chat/use-replies.ts

@@ -0,0 +1,166 @@
+import type { RefObject } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { WORKING_SECONDS } from '../agent-avatar/working';
+import { useMessages } from '../locale/messages';
+import {
+  demoReply,
+  type Conversation,
+  type Message,
+  type Workspace,
+} from './data';
+import { MULTI_AGENT_CHAT_MESSAGES, formatChatMessage } from './messages';
+import { streamReply, waitForReply } from './stream-reply';
+import type { MultiAgentChatProps } from './types';
+
+let sequence = 0;
+export function chatId(prefix: string) {
+  return `${prefix}-${Date.now().toString(36)}-${(++sequence).toString(36)}`;
+}
+export function useReplies(
+  current: RefObject<Workspace>,
+  update: (change: (w: Workspace) => Workspace) => void,
+  onRespond: MultiAgentChatProps['onRespond'],
+) {
+  const { messages } = useMessages(MULTI_AGENT_CHAT_MESSAGES);
+  const jobs = useRef(new Map<string, AbortController>());
+  const [pending, setPending] = useState<Record<string, string>>({});
+  const [thinking, setThinking] = useState<Record<string, Message>>({});
+  const [streaming, setStreaming] = useState<Record<string, string>>({});
+  const [notice, setNotice] = useState('');
+  const stop = useCallback((id: string) => {
+    jobs.current.get(id)?.abort();
+    jobs.current.delete(id);
+    setPending((s) => {
+      const next = { ...s };
+      delete next[id];
+      return next;
+    });
+    setThinking((s) => {
+      const next = { ...s };
+      delete next[id];
+      return next;
+    });
+    setStreaming((s) => {
+      const next = { ...s };
+      delete next[id];
+      return next;
+    });
+  }, []);
+  useEffect(() => {
+    if (!notice) return;
+    const timer = setTimeout(() => setNotice(''), 3500);
+    return () => clearTimeout(timer);
+  }, [notice]);
+  useEffect(
+    () => () => {
+      jobs.current.forEach((job) => job.abort());
+      jobs.current.clear();
+    },
+    [],
+  );
+  const send = useCallback(
+    async (text: string, id: string, arrivalMs = 0, draft?: Conversation) => {
+      const chat = current.current.chats.find((c) => c.id === id) ?? draft;
+      if (!chat || !text.trim() || jobs.current.has(id)) return;
+      const participants = chat.agentIds.flatMap(
+        (agentId) =>
+          current.current.agents.find((agent) => agent.id === agentId) ?? [],
+      );
+      if (!participants.length) return;
+      const history: Message[] = [
+        ...chat.messages,
+        { id: chatId('message'), role: 'user', text: text.trim() },
+      ];
+      update((s) => ({
+        ...s,
+        activeId: id,
+        chats: s.chats.some((c) => c.id === id)
+          ? s.chats.map((c) => (c.id === id ? { ...c, messages: history } : c))
+          : [
+              {
+                ...chat,
+                title: participants.map((a) => a.name).join(' + '),
+                messages: history,
+              },
+              ...s.chats,
+            ],
+      }));
+      const controller = new AbortController();
+      jobs.current.set(id, controller);
+      setPending((s) => ({
+        ...s,
+        [id]: controller.signal.aborted ? '' : chatId('turn'),
+      }));
+      setNotice('');
+      const active = () =>
+        !controller.signal.aborted && jobs.current.get(id) === controller;
+      try {
+        for (const agent of participants) {
+          if (!active()) break;
+          const reply: Message = {
+            id: chatId('reply'),
+            role: 'agent',
+            agentId: agent.id,
+            text: '',
+          };
+          setThinking((s) => ({ ...s, [id]: reply }));
+          try {
+            const [response] = await Promise.all([
+              onRespond
+                ? onRespond(agent, history, controller.signal)
+                : Promise.resolve(
+                    demoReply(
+                      agent,
+                      history.filter((m) => m.role === 'user').length - 1,
+                    ),
+                  ),
+              waitForReply(
+                WORKING_SECONDS * 2000 +
+                  350 +
+                  (agent.id === participants[0]?.id ? arrivalMs : 0),
+                controller.signal,
+              ),
+            ]);
+            if (!active()) break;
+            update((s) => ({
+              ...s,
+              chats: s.chats.map((c) =>
+                c.id === id ? { ...c, messages: [...c.messages, reply] } : c,
+              ),
+            }));
+            setThinking((s) => {
+              const next = { ...s };
+              delete next[id];
+              return next;
+            });
+            setStreaming((s) => ({ ...s, [id]: reply.id }));
+            await waitForReply(180, controller.signal);
+            await streamReply(response, controller.signal, (visible) => {
+              if (!active()) return;
+              update((s) => ({
+                ...s,
+                chats: s.chats.map((c) =>
+                  c.id === id
+                    ? {
+                        ...c,
+                        messages: c.messages.map((m) =>
+                          m.id === reply.id ? { ...m, text: visible } : m,
+                        ),
+                      }
+                    : c,
+                ),
+              }));
+            });
+          } catch {
+            if (active())
+              setNotice(formatChatMessage(messages.responseFailed, agent.name));
+          }
+        }
+      } finally {
+        if (jobs.current.get(id) === controller) stop(id);
+      }
+    },
+    [current, update, onRespond, stop, messages],
+  );
+  return { pending, thinking, streaming, notice, setNotice, send, stop };
+}

package/src/multi-agent-chat/use-workspace.ts

@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Platform } from 'react-native';
+import { INITIAL_WORKSPACE, restoreWorkspace, type Workspace } from './data';
+import type { MultiAgentChatProps } from './types';
+
+export function useWorkspace({
+  initialWorkspace,
+  storageKey = 'bloom:multi-agent-chat',
+  onWorkspaceChange,
+}: MultiAgentChatProps) {
+  const [workspace, setWorkspace] = useState<Workspace>(
+    () => initialWorkspace ?? INITIAL_WORKSPACE,
+  );
+  const current = useRef(workspace);
+  const onChange = useRef(onWorkspaceChange);
+  onChange.current = onWorkspaceChange;
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => {
+    if (
+      !initialWorkspace &&
+      storageKey &&
+      Platform.OS === 'web' &&
+      typeof window !== 'undefined'
+    ) {
+      try {
+        const raw = window.localStorage.getItem(storageKey);
+        const saved = raw && restoreWorkspace(raw);
+        if (saved) {
+          current.current = saved;
+          setWorkspace(saved);
+        }
+      } catch {
+        /* Private storage is optional. */
+      }
+    }
+    setLoaded(true);
+  }, [initialWorkspace, storageKey]);
+  useEffect(() => {
+    if (
+      loaded &&
+      storageKey &&
+      Platform.OS === 'web' &&
+      typeof window !== 'undefined'
+    ) {
+      try {
+        window.localStorage.setItem(storageKey, JSON.stringify(workspace));
+      } catch {
+        /* Quota errors never discard in-memory work. */
+      }
+    }
+  }, [workspace, loaded, storageKey]);
+  const update = useCallback((change: (workspace: Workspace) => Workspace) => {
+    const next = change(current.current);
+    current.current = next;
+    setWorkspace(next);
+    onChange.current?.(next);
+  }, []);
+  return { workspace, current, update, loaded };
+}

package/src/page-header/EdgeScrim.tsx

@@ -6,7 +6,9 @@ import { useSvgIdPrefix } from '../styles/svg-id';
 
 /**
  * The floating header's EDGE EFFECT: the page colour at the top, fading to
- * nothing below the islands.
+ * nothing below the islands. `edge="bottom"` is the same ramp mirrored — the
+ * colour at the bottom, fading to nothing above — for chrome that floats at the
+ * bottom of a scroller (a pinned composer, a sidebar's lower edge).
  *
  * ── WHY IT IS A GRADIENT AND NOT A BLUR ─────────────────────────────────────
  *
@@ -90,15 +92,23 @@ export const SCRIM_STOPS = [
 export interface EdgeScrimProps {
   /** The page colour the ramp starts from — opaque, alpha travels separately. */
   color: string;
+  /**
+   * The edge the colour is solid at. `top` (default) fades downward; `bottom`
+   * fades upward. Mirrored in the gradient's own axis rather than with a
+   * `rotate` transform on the host, so the scrim's box stays where its layout
+   * put it on every platform.
+   */
+  edge?: 'top' | 'bottom';
   testID?: string;
 }
 
-const EdgeScrimComponent: React.FC<EdgeScrimProps> = ({ color, testID }) => {
+const EdgeScrimComponent: React.FC<EdgeScrimProps> = ({ color, edge = 'top', testID }) => {
   const id = `${useSvgIdPrefix('bloom-page-header-scrim')}gradient`;
+  const fromBottom = edge === 'bottom';
   return (
     <Svg width="100%" height="100%" style={StyleSheet.absoluteFill} testID={testID}>
       <Defs>
-        <LinearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+        <LinearGradient id={id} x1="0" y1={fromBottom ? '1' : '0'} x2="0" y2={fromBottom ? '0' : '1'}>
           {SCRIM_STOPS.map((stop) => (
             <Stop
               key={stop.offset}

package/src/page-header/index.ts

@@ -1,4 +1,6 @@
 export { PageHeader } from './PageHeader';
+export { EdgeScrim, SCRIM_TAIL_RATIO } from './EdgeScrim';
+export type { EdgeScrimProps } from './EdgeScrim';
 
 export type {
   PageHeaderBorder,

package/src/project-board/BoardTooltip.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { StyledView } from '../styles/styled-primitives';
+import { useProjectBoardPlatform } from './context';
+/** Source's 200ms hover delay, composed on Bloom's existing tooltip surface. */
+export function BoardTooltip({
+  label,
+  children,
+}: {
+  label: string;
+  children: ReactNode;
+}) {
+  const { Tooltip, TooltipTrigger, TooltipContent } = useProjectBoardPlatform();
+  const [visible, setVisible] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    [],
+  );
+  const leave = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+    setVisible(false);
+  };
+  return (
+    <Tooltip visible={visible} onVisibleChange={setVisible} position="bottom">
+      <TooltipTrigger>
+        <StyledView
+          onPointerEnter={() => {
+            timer.current = setTimeout(() => setVisible(true), 200);
+          }}
+          onPointerLeave={leave}
+        >
+          {children}
+        </StyledView>
+      </TooltipTrigger>
+      <TooltipContent label={label}>{label}</TooltipContent>
+    </Tooltip>
+  );
+}

package/src/project-board/CreateTicketDialog.tsx

@@ -0,0 +1,373 @@
+import { useRef, useState } from 'react';
+import type { TextInput } from 'react-native';
+import { useDialogControl } from '../dialog/context';
+import { useMessages } from '../locale/messages';
+import { Switch } from '../switch';
+import { Textarea } from '../textarea';
+import { DEFAULT_PROJECT, PRIORITIES } from './constants';
+import { useProjectBoardPlatform } from './context';
+import { PROJECT_BOARD_MESSAGES } from './messages';
+import { PropertySelect } from './ProjectBoardControls';
+import {
+  TicketAssigneeIcon,
+  TicketStatusIcon,
+  TicketUrgencyIcon,
+} from './ProjectBoardIcons';
+import {
+  SourceAvatar as Avatar,
+  SourceChip as Chip,
+  RiAddFill,
+  RiArrowRightSLine,
+  RiFolder6Line,
+  SourceText as Text,
+  SourceView as View,
+} from './SourcePrimitives';
+import type {
+  NewProjectTicket,
+  ProjectColumn,
+  ProjectMember,
+  TicketPriority,
+} from './types';
+const PRIORITY_STYLES = {
+  Low: 'bg-indigo-200 text-indigo-800 dark:bg-indigo-950/60 dark:text-indigo-300',
+  Medium: 'bg-status-yellow-background text-status-yellow-text',
+  High: 'bg-status-orange-background text-status-orange-text',
+  Urgent: 'bg-status-rose-background text-status-rose-text',
+};
+export function CreateTicketDialog({
+  title: boardTitle,
+  initialColumnId,
+  columns,
+  code,
+  projects,
+  members,
+  onClose,
+  onCreate,
+}: {
+  title: string;
+  initialColumnId?: string;
+  columns: ProjectColumn[];
+  code: string;
+  projects: readonly string[];
+  members: Readonly<Record<string, ProjectMember>>;
+  onClose: () => void;
+  onCreate: (ticket: NewProjectTicket) => void;
+}) {
+  const { messages: m } = useMessages(PROJECT_BOARD_MESSAGES);
+  const { Button, CloseButton, Dialog, TicketGenieSurface } =
+    useProjectBoardPlatform();
+  const control = useDialogControl();
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [columnId, setColumnId] = useState<string | null>(
+    initialColumnId ?? null,
+  );
+  const [priority, setPriority] = useState<TicketPriority | null>(null);
+  const [assignee, setAssignee] = useState<string | null>(null);
+  const [project, setProject] = useState<string | null>(null);
+  const [keepCreating, setKeepCreating] = useState(false);
+  const titleRef = useRef<TextInput>(null);
+  const member = assignee ? members[assignee] : undefined;
+  const selectedColumn = columns.find((column) => column.id === columnId);
+  const priorityChip = (value: TicketPriority) => (
+    <Chip className={`px-[7px] py-[3px] ${PRIORITY_STYLES[value]}`}>
+      {value}
+    </Chip>
+  );
+  function submit() {
+    if (!title.trim()) {
+      titleRef.current?.focus();
+      return;
+    }
+    onCreate({
+      title: title.trim(),
+      description: description.trim(),
+      columnId:
+        columnId ??
+        columns.find((c) => c.id === 'todo')?.id ??
+        columns[0]?.id ??
+        'todo',
+      priority: priority ?? PRIORITIES[0]!,
+      project:
+        project ??
+        projects.find((p) => p === DEFAULT_PROJECT) ??
+        projects[0] ??
+        DEFAULT_PROJECT,
+      assignees: member ? [member.id] : [],
+    });
+    if (keepCreating) {
+      setTitle('');
+      setDescription('');
+      titleRef.current?.focus();
+    } else control.close();
+  }
+  return (
+    <Dialog
+      control={control}
+      startOpen
+      onClose={onClose}
+      label={m.createTicket}
+      presentation="custom"
+      exitDuration={480}
+      placement="center"
+      width={560}
+      maxWidth={560}
+      contentPadding={0}
+      scrollable={false}
+      morph={false}
+      containerClassName="fixed inset-0 z-100 flex items-end justify-center overflow-clip px-4 pt-4 pb-10"
+      containerStyle={{
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 16,
+        paddingBottom: 40,
+      }}
+      panelStyle={{
+        position: 'relative',
+        top: undefined,
+        bottom: undefined,
+        left: undefined,
+        right: undefined,
+        width: '100%',
+        maxWidth: 560,
+        backgroundColor: 'transparent',
+      }}
+    >
+      <View
+        className="w-[560px] max-w-full outline-none"
+        style={{ width: '100%' }}
+      >
+        <TicketGenieSurface>
+          <View className="max-h-[calc(100dvh-56px)] overflow-y-auto rounded-3xl bg-background-primary-default p-4 outline-none">
+            <View className="flex flex-col gap-12">
+              <View className="flex flex-col gap-2.5">
+                <View className="flex items-start justify-between gap-3">
+                  <View className="flex min-w-0 items-center gap-0.5 text-body-2-medium text-text-secondary">
+                    <Text className="truncate text-body-2-medium text-text-secondary">
+                      {boardTitle}
+                    </Text>
+                    <RiArrowRightSLine className="size-[15px] shrink-0 text-foreground-icon-tertiary rtl:rotate-180" />
+                    <Text className="text-body-2-medium text-text-secondary">
+                      {code}
+                    </Text>
+                    <RiArrowRightSLine className="size-[15px] shrink-0 text-foreground-icon-tertiary rtl:rotate-180" />
+                    <Text className="whitespace-nowrap text-body-2-medium text-text-secondary">
+                      {m.newTicket}
+                    </Text>
+                  </View>
+                  <CloseButton
+                    size="sm"
+                    accessibilityLabel={m.closeCreate}
+                    onPress={() => control.close()}
+                  />
+                </View>
+                <View className="flex flex-col gap-1.5">
+                  <Textarea
+                    className="relative grid text-headline-medium text-text-primary"
+                    inputRef={titleRef}
+                    accessibilityLabel={m.ticketTitle}
+                    value={title}
+                    onValueChange={setTitle}
+                    required
+                    autoFocus
+                    rows={1}
+                    maxLength={200}
+                    autoResize
+                    maxRows={8}
+                    placeholder={m.enterTitle}
+                    fieldClassName="relative border-0 bg-transparent p-0"
+                    inputClassName="size-full resize-none overflow-hidden border-0 bg-transparent p-0 outline-none placeholder:text-text-secondary text-headline-medium text-text-primary"
+                    inputStyle={{ minHeight: 22 }}
+                  />
+                  <Textarea
+                    className="relative grid max-h-[200px] text-body-medium text-text-secondary max-sm:text-[16px]"
+                    accessibilityLabel={m.description}
+                    value={description}
+                    onValueChange={setDescription}
+                    rows={1}
+                    maxLength={5000}
+                    autoResize
+                    maxRows={10}
+                    placeholder={m.descriptionArea}
+                    fieldClassName="relative border-0 bg-transparent p-0"
+                    inputClassName="size-full resize-none border-0 bg-transparent p-0 outline-none placeholder:text-text-tertiary text-body-medium text-text-secondary max-sm:text-[16px]"
+                  />
+                </View>
+              </View>
+              <View className="flex flex-col gap-3">
+                <View className="flex flex-wrap items-center gap-x-4 gap-y-3">
+                  <PropertySelect
+                    create
+                    label={m.status}
+                    value={columnId ?? ''}
+                    onChange={setColumnId}
+                    renderValue={
+                      <View className="flex items-center gap-1.5">
+                        {selectedColumn ? (
+                          <>
+                            <TicketStatusIcon status={selectedColumn.id} />
+                            <Text className="text-body-medium text-text-secondary">
+                              {selectedColumn.title}
+                            </Text>
+                          </>
+                        ) : (
+                          <>
+                            <RiAddFill className="size-5 text-foreground-icon-tertiary" />
+                            <Text className="text-body-medium text-text-tertiary">
+                              {m.status}
+                            </Text>
+                          </>
+                        )}
+                      </View>
+                    }
+                    options={columns.map((c) => ({
+                      id: c.id,
+                      label: c.title,
+                      icon: (
+                        <TicketStatusIcon
+                          status={c.id}
+                          className="text-foreground-icon-secondary"
+                        />
+                      ),
+                    }))}
+                  />
+                  <PropertySelect
+                    create
+                    label={m.urgency}
+                    value={priority ?? ''}
+                    onChange={(v) => setPriority(v as TicketPriority)}
+                    renderValue={
+                      priority ? (
+                        priorityChip(priority)
+                      ) : (
+                        <View className="flex items-center gap-1.5">
+                          <TicketUrgencyIcon className="size-[18px] text-foreground-icon-tertiary" />
+                          <Text className="text-body-medium text-text-tertiary">
+                            {m.urgency}
+                          </Text>
+                        </View>
+                      )
+                    }
+                    options={PRIORITIES.map((v) => ({
+                      id: v,
+                      label: v,
+                      icon: priorityChip(v),
+                      hideLabel: true,
+                    }))}
+                  />
+                  <PropertySelect
+                    create
+                    label={m.assignee}
+                    value={assignee ?? ''}
+                    onChange={setAssignee}
+                    renderValue={
+                      <View className="flex items-center gap-1.5">
+                        {member ? (
+                          <>
+                            <Avatar
+                              source={member.avatar}
+                              initials={member.initials}
+                              className="size-[18px]"
+                            />
+                            <Text className="text-body-medium text-text-secondary">
+                              {member.name.split(' ')[0]}{' '}
+                              {member.name.split(' ')[1]?.[0]}.
+                            </Text>
+                          </>
+                        ) : (
+                          <>
+                            <TicketAssigneeIcon className="size-[18px] text-foreground-icon-tertiary" />
+                            <Text className="text-body-medium text-text-tertiary">
+                              {m.assignee}
+                            </Text>
+                          </>
+                        )}
+                      </View>
+                    }
+                    options={[
+                      {
+                        id: 'unassigned',
+                        label: m.unassigned,
+                        icon: (
+                          <TicketAssigneeIcon className="size-[18px] text-foreground-icon-secondary" />
+                        ),
+                      },
+                      ...Object.values(members).map((p) => ({
+                        id: p.id,
+                        label: p.name,
+                        icon: (
+                          <Avatar
+                            size="xs"
+                            source={p.avatar}
+                            initials={p.initials}
+                          />
+                        ),
+                      })),
+                    ]}
+                  />
+                  <PropertySelect
+                    create
+                    label={m.project}
+                    value={project ?? ''}
+                    onChange={setProject}
+                    renderValue={
+                      <View className="flex items-center gap-1.5">
+                        <RiFolder6Line className="size-[18px] text-text-primary opacity-30" />
+                        <Text
+                          className={
+                            project
+                              ? 'text-body-medium text-text-secondary'
+                              : 'text-body-medium text-text-tertiary'
+                          }
+                        >
+                          {project ?? m.project}
+                        </Text>
+                      </View>
+                    }
+                    options={projects.map((p) => ({
+                      id: p,
+                      label: p,
+                      icon: (
+                        <RiFolder6Line className="size-[18px] text-foreground-icon-secondary" />
+                      ),
+                    }))}
+                  />
+                </View>
+                <View className="flex flex-wrap items-center justify-between gap-3">
+                  <View className="flex items-center gap-2">
+                    <Switch
+                      size="sm"
+                      checked={keepCreating}
+                      onCheckedChange={setKeepCreating}
+                      accessibilityLabel={m.keepCreating}
+                    />
+                    <Text className="text-body-2-medium text-text-tertiary">
+                      {m.keepCreating}
+                    </Text>
+                  </View>
+                  <View className="ms-auto flex gap-2.5">
+                    <Button
+                      appearance="outline"
+                      tone="neutral"
+                      onPress={() => control.close()}
+                    >
+                      {m.cancel}
+                    </Button>
+                    <Button
+                      onPress={submit}
+                      testID="project-board-create-submit"
+                    >
+                      {m.createTicket}
+                    </Button>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </TicketGenieSurface>
+      </View>
+    </Dialog>
+  );
+}