@opengeni/react-native 4.4.1 → 4.5.0

package/src/timeline/icon-nodes.generated.ts

@@ -2065,6 +2065,345 @@ export const iconNodes = {
       },
     ],
   ],
+  monitor: [
+    [
+      "rect",
+      {
+        width: "20",
+        height: "14",
+        x: "2",
+        y: "3",
+        rx: "2",
+      },
+    ],
+    [
+      "line",
+      {
+        x1: "8",
+        x2: "16",
+        y1: "21",
+        y2: "21",
+      },
+    ],
+    [
+      "line",
+      {
+        x1: "12",
+        x2: "12",
+        y1: "17",
+        y2: "21",
+      },
+    ],
+  ],
+  "file-spreadsheet": [
+    [
+      "path",
+      {
+        d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M14 2v5a1 1 0 0 0 1 1h5",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M8 13h2",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M14 13h2",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M8 17h2",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M14 17h2",
+      },
+    ],
+  ],
+  hourglass: [
+    [
+      "path",
+      {
+        d: "M5 22h14",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M5 2h14",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2",
+      },
+    ],
+  ],
+  download: [
+    [
+      "path",
+      {
+        d: "M 12 15V3",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "m7 10 5 5 5-5",
+      },
+    ],
+  ],
+  clipboard: [
+    [
+      "rect",
+      {
+        width: "8",
+        height: "4",
+        x: "8",
+        y: "2",
+        rx: "1",
+        ry: "1",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2",
+      },
+    ],
+  ],
+  video: [
+    [
+      "path",
+      {
+        d: "m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5",
+      },
+    ],
+    [
+      "rect",
+      {
+        x: "2",
+        y: "6",
+        width: "14",
+        height: "12",
+        rx: "2",
+      },
+    ],
+  ],
+  "circle-dot": [
+    [
+      "circle",
+      {
+        cx: "12",
+        cy: "12",
+        r: "10",
+      },
+    ],
+    [
+      "circle",
+      {
+        cx: "12",
+        cy: "12",
+        r: "1",
+      },
+    ],
+  ],
+  file: [
+    [
+      "path",
+      {
+        d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M14 2v5a1 1 0 0 0 1 1h5",
+      },
+    ],
+  ],
+  archive: [
+    [
+      "rect",
+      {
+        width: "20",
+        height: "5",
+        x: "2",
+        y: "3",
+        rx: "1",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M10 12h4",
+      },
+    ],
+  ],
+  "app-window": [
+    [
+      "rect",
+      {
+        x: "2",
+        y: "4",
+        width: "20",
+        height: "16",
+        rx: "2",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M10 4v4",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M2 8h20",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M6 4v4",
+      },
+    ],
+  ],
+  "book-open": [
+    [
+      "path",
+      {
+        d: "M 12 5v16",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z",
+      },
+    ],
+  ],
+  hand: [
+    [
+      "path",
+      {
+        d: "M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15",
+      },
+    ],
+  ],
+  activity: [
+    [
+      "path",
+      {
+        d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2",
+      },
+    ],
+  ],
+  "log-in": [
+    [
+      "path",
+      {
+        d: "m10 17 5-5-5-5",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M15 12H3",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4",
+      },
+    ],
+  ],
+  code: [
+    [
+      "path",
+      {
+        d: "m16 18 6-6-6-6",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "m8 6-6 6 6 6",
+      },
+    ],
+  ],
+  receipt: [
+    [
+      "path",
+      {
+        d: "M 12 17V7",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8",
+      },
+    ],
+    [
+      "path",
+      {
+        d: "M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z",
+      },
+    ],
+  ],
   eye: [
     [
       "path",

package/src/timeline/markdown-standalone-links.ts

@@ -33,3 +33,16 @@ export function isStandaloneLinkGroup(
   const content = (group.children ?? []).filter((child) => !isBlankNode(child));
   return content.length === 1 && content[0]!.type === "link";
 }
+
+/**
+ * The text group a list item holds when that group is its only content,
+ * looking through a lone paragraph (loose lists keep one). A list item whose
+ * only content is a host-drawn block link is drawn without its marker.
+ */
+export function soleTextGroupOf(item: MarkdownAstNode): MarkdownAstNode | undefined {
+  let blocks = (item.children ?? []).filter((child) => !isBlankNode(child));
+  if (blocks.length === 1 && blocks[0]!.type === "paragraph") {
+    blocks = (blocks[0]!.children ?? []).filter((child) => !isBlankNode(child));
+  }
+  return blocks.length === 1 && blocks[0]!.type === "textgroup" ? blocks[0] : undefined;
+}

package/src/timeline/markdown.tsx

@@ -22,7 +22,7 @@ import {
   type InteractivePreviewKind,
 } from "@opengeni/react/native-previews";
 import { Icon } from "./icon";
-import { isStandaloneLinkGroup } from "./markdown-standalone-links";
+import { isStandaloneLinkGroup, soleTextGroupOf } from "./markdown-standalone-links";
 import { withAlpha as withAlphaColor } from "./primitives";
 import type { NativeMarkdownRenderer } from "./message-timeline";
 import {
@@ -474,10 +474,14 @@ function webRules(
     // Every run of text is selectable, as on the web: a long press selects
     // words (and, inside a timeline message, offers Add note). A standalone
     // link the host drew as a block sits in a view instead, since a block
-    // nested in text does not lay out.
+    // nested in text does not lay out. The view spans the message: a paragraph
+    // lays its children out in a wrapping row, where a plain view would size
+    // to its content.
     textgroup: (node, children, _parent, styles) =>
       BLOCK_LINK_GROUPS.has(node) ? (
-        <View key={node.key}>{children}</View>
+        <View key={node.key} style={{ width: "100%" }}>
+          {children}
+        </View>
       ) : (
         <Text key={node.key} selectable style={styles.textgroup}>
           {children}
@@ -505,6 +509,16 @@ function webRules(
     },
     // Web lists use a disc marker in fg-subtle; the library's iOS default is a middle dot.
     list_item: (node, children, parent, styles, inheritedStyles = {}) => {
+      // A host-drawn block link is its own marker: the item drops the bullet or
+      // number and its indent, so it lines up with the same card on its own line.
+      const group = soleTextGroupOf(node);
+      if (group && BLOCK_LINK_GROUPS.has(group)) {
+        return (
+          <View key={node.key} style={{ marginBottom: 4 }}>
+            {children}
+          </View>
+        );
+      }
       if (parent.some((entry: { type: string }) => entry.type === "bullet_list")) {
         // A drawn disc: the text bullet glyph renders noticeably smaller than
         // the browser's list-disc marker at the same line height.

package/src/timeline/session-list.tsx

@@ -130,11 +130,20 @@ export interface SessionRowProps {
    * When set, a long press offers Pin or Unpin, and so does an accessibility action.
    */
   onTogglePin?: (() => void) | undefined;
+  /** The workspace the chat lives in, when it is not the one on screen (search results). */
+  workspaceName?: string | undefined;
   now?: Date | undefined;
 }
 
 /** One recent-session row, as the web home canvas renders it. */
-export function SessionRow({ session, models, onPress, onTogglePin, now }: SessionRowProps) {
+export function SessionRow({
+  session,
+  models,
+  onPress,
+  onTogglePin,
+  workspaceName,
+  now,
+}: SessionRowProps) {
   const theme = useNativeTimelineTheme();
   const m = useNativeTimelineMessages();
   const c = theme.colors;
@@ -145,6 +154,12 @@ export function SessionRow({ session, models, onPress, onTogglePin, now }: Sessi
   const model = recentSessionModelPresentation(session.model, rows);
   const repo = sessionRepoLabel(session);
   const meta = [model.label, repo].filter(Boolean).join(" · ");
+  const metaStyle = {
+    ...fontStyle(theme, 400),
+    fontSize: 11,
+    lineHeight: 16,
+    color: c["fg-subtle"],
+  };
   const pinned = Boolean(session.pinned);
   const pinLabel = pinned ? m.unpin : m.pin;
   const offerPin = () => {
@@ -170,7 +185,9 @@ export function SessionRow({ session, models, onPress, onTogglePin, now }: Sessi
   return (
     <Pressable
       accessibilityRole="button"
-      accessibilityLabel={pinned ? `${title}, ${m.pinned}` : title}
+      accessibilityLabel={[title, pinned ? m.pinned : null, workspaceName ?? null]
+        .filter(Boolean)
+        .join(", ")}
       accessibilityActions={onTogglePin ? [{ name: "pin", label: pinLabel }] : undefined}
       onAccessibilityAction={(event) => {
         if (event.nativeEvent.actionName === "pin") onTogglePin?.();
@@ -195,21 +212,28 @@ export function SessionRow({ session, models, onPress, onTogglePin, now }: Sessi
         >
           {title}
         </Text>
-        {meta ? (
+        {meta || workspaceName ? (
           <View style={{ flexDirection: "row", alignItems: "center", gap: 6, marginTop: 2 }}>
-            <ModelMark model={session.model} size={12} color={c["fg-muted"]} />
-            <Text
-              numberOfLines={1}
-              style={{
-                ...fontStyle(theme, 400),
-                fontSize: 11,
-                lineHeight: 16,
-                color: c["fg-subtle"],
-                flexShrink: 1,
-              }}
-            >
-              {meta}
-            </Text>
+            {workspaceName ? (
+              <>
+                <Icon name="folder" size={11} color={c["fg-muted"]} />
+                <Text
+                  numberOfLines={1}
+                  style={{ ...metaStyle, color: c["fg-muted"], flexShrink: 2 }}
+                >
+                  {workspaceName}
+                </Text>
+                {meta ? <Text style={metaStyle}>·</Text> : null}
+              </>
+            ) : null}
+            {meta ? (
+              <>
+                <ModelMark model={session.model} size={12} color={c["fg-muted"]} />
+                <Text numberOfLines={1} style={{ ...metaStyle, flexShrink: 1 }}>
+                  {meta}
+                </Text>
+              </>
+            ) : null}
           </View>
         ) : null}
       </View>
@@ -260,6 +284,8 @@ export function SessionRowList(props: {
   onOpen: (sessionId: string) => void;
   /** Pin or unpin a chat from its row (long press); omitted, rows offer no pin. */
   onTogglePin?: ((session: Session) => void) | undefined;
+  /** Labels rows from another workspace with that workspace's name. */
+  workspaceNameOf?: ((session: Session) => string | undefined) | undefined;
 }) {
   const theme = useNativeTimelineTheme();
   return (
@@ -282,6 +308,7 @@ export function SessionRowList(props: {
             models={props.models}
             onPress={() => props.onOpen(session.id)}
             onTogglePin={props.onTogglePin ? () => props.onTogglePin?.(session) : undefined}
+            workspaceName={props.workspaceNameOf?.(session)}
           />
         </View>
       ))}