@mawaru/sdk 0.39.0 → 0.40.0

package/views/_parts/FilePreview.tsx

@@ -0,0 +1,180 @@
+import { type CSSProperties, useEffect, useState } from "react"
+import { useViewBridge } from "../_bridge.js"
+import type { FileRef } from "./fileRef.js"
+
+// file 参照の閲覧表示：private バケットなので描画のたびに閲覧用署名 URL を（ホストに頼んで）取り、
+// 画像（GIF 含む）と PDF はそのままインラインで見せる。それ以外は名前チップのリンクにする。
+// NodeIoCards の IoFileItem と同じ経路だが、こちらは「見て判断する」ための大きさで出す。
+// PDF は請求書・契約書のように「現物を見て承認する」書類で必要になる（承認画面の中で
+// 完結させたいので、別タブへ飛ばさない）
+
+const chipStyle: CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "4px",
+  maxWidth: "100%",
+  border: "var(--border-w) solid var(--border)",
+  borderRadius: "var(--radius-s)",
+  background: "var(--surface-2)",
+  padding: "2px 8px",
+  fontSize: "var(--text-xs)",
+  color: "var(--ink)",
+  textDecoration: "none",
+}
+
+// mime_type は上流が入れてくれないことがあるので拡張子でも判定する
+const isImageFile = (file: FileRef): boolean =>
+  file.mime_type?.startsWith("image/") ??
+  /\.(gif|png|jpe?g|webp|avif|svg)$/i.test(file.name)
+
+const isPdfFile = (file: FileRef): boolean =>
+  file.mime_type === "application/pdf" || /\.pdf$/i.test(file.name)
+
+export const FilePreview = ({
+  file,
+  maxHeight = "420px",
+}: {
+  file: FileRef
+  maxHeight?: string
+}) => {
+  const bridge = useViewBridge()
+  const [url, setUrl] = useState<string | null>(null)
+  // 署名 URL を取れなかった（ファイルが消えた・パスが違う）ことを「読み込み中」と
+  // 区別する：失敗を黙って読み込み中のまま固めると、原因が画面から分からない
+  const [failed, setFailed] = useState(false)
+  useEffect(() => {
+    let alive = true
+    setUrl(null)
+    setFailed(false)
+    bridge
+      .fileUrl(file)
+      .then((signed) => {
+        if (alive) setUrl(signed)
+      })
+      .catch(() => {
+        if (alive) setFailed(true)
+      })
+    return () => {
+      alive = false
+    }
+  }, [bridge, file])
+
+  const caption = (
+    <span style={{ fontSize: "var(--text-xs)", color: "var(--muted)" }}>
+      {file.name}
+    </span>
+  )
+
+  // PDF はブラウザ内蔵ビューアに任せる（依存を増やさない）。maxHeight は画像では
+  // 上限だが、PDF では枠の高さそのものになる（内側でスクロールさせるため）
+  if (isPdfFile(file)) {
+    return (
+      <figure style={{ margin: 0, display: "grid", gap: "var(--space-1)" }}>
+        {url ? (
+          <iframe
+            src={url}
+            title={file.name}
+            style={{
+              display: "block",
+              width: "100%",
+              height: maxHeight,
+              background: "var(--surface-2)",
+              borderRadius: "var(--radius-s)",
+              border: "var(--border-w) solid var(--border)",
+            }}
+          />
+        ) : (
+          <div
+            style={{
+              display: "grid",
+              placeItems: "center",
+              height: maxHeight,
+              background: "var(--surface-2)",
+              borderRadius: "var(--radius-s)",
+              border: "var(--border-w) dashed var(--border)",
+              fontSize: "var(--text-xs)",
+              color: "var(--muted)",
+              textAlign: "center",
+              padding: "0 var(--space-4)",
+            }}
+          >
+            {failed ? "ファイルを読み込めませんでした" : "読み込み中…"}
+          </div>
+        )}
+        <figcaption
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            gap: "var(--space-2)",
+          }}
+        >
+          {caption}
+          {url && (
+            <a
+              href={url}
+              target="_blank"
+              rel="noreferrer"
+              style={{ fontSize: "var(--text-xs)", color: "var(--muted)" }}
+            >
+              別タブで開く
+            </a>
+          )}
+        </figcaption>
+      </figure>
+    )
+  }
+
+  if (!isImageFile(file)) {
+    return url ? (
+      <a href={url} target="_blank" rel="noreferrer" style={chipStyle}>
+        <span aria-hidden="true">📎</span>
+        {file.name}
+      </a>
+    ) : (
+      <span style={chipStyle}>
+        <span aria-hidden="true">📎</span>
+        {file.name}
+      </span>
+    )
+  }
+
+  return (
+    <figure style={{ margin: 0, display: "grid", gap: "var(--space-1)" }}>
+      {url ? (
+        <a href={url} target="_blank" rel="noreferrer">
+          <img
+            src={url}
+            alt={file.name}
+            style={{
+              display: "block",
+              width: "100%",
+              maxHeight,
+              objectFit: "contain",
+              background: "var(--surface-2)",
+              borderRadius: "var(--radius-s)",
+              border: "var(--border-w) solid var(--border)",
+            }}
+          />
+        </a>
+      ) : (
+        <div
+          style={{
+            display: "grid",
+            placeItems: "center",
+            height: "160px",
+            background: "var(--surface-2)",
+            borderRadius: "var(--radius-s)",
+            border: "var(--border-w) dashed var(--border)",
+            fontSize: "var(--text-xs)",
+            color: "var(--muted)",
+            textAlign: "center",
+            padding: "0 var(--space-4)",
+          }}
+        >
+          {failed ? "画像を読み込めませんでした" : "読み込み中…"}
+        </div>
+      )}
+      <figcaption>{caption}</figcaption>
+    </figure>
+  )
+}

package/views/_parts/Linkify.test.ts

@@ -0,0 +1,40 @@
+import { isValidElement } from "react"
+import { describe, expect, it } from "vitest"
+import { isUrl, linkify } from "./Linkify.js"
+
+const hrefs = (text: string) =>
+  linkify(text).flatMap((node) =>
+    isValidElement<{ href: string }>(node) ? [node.props.href] : [],
+  )
+
+describe("linkify", () => {
+  it("素の URL をリンクにし、前後の文字はそのまま残す", () => {
+    const nodes = linkify("PR: https://github.com/a/b/pull/1 を見て")
+    expect(nodes[0]).toBe("PR: ")
+    expect(hrefs("PR: https://github.com/a/b/pull/1 を見て")).toEqual([
+      "https://github.com/a/b/pull/1",
+    ])
+    expect(nodes[2]).toBe(" を見て")
+  })
+
+  it("引用符・括弧・末尾の句読点は URL に含めない", () => {
+    expect(hrefs('"https://example.com/x"')).toEqual(["https://example.com/x"])
+    expect(hrefs("（https://example.com/y）")).toEqual([
+      "https://example.com/y",
+    ])
+    expect(hrefs("see https://example.com/z.")).toEqual([
+      "https://example.com/z",
+    ])
+  })
+
+  it("URL が無ければ元の文字列だけ", () => {
+    expect(linkify("ただの文")).toEqual(["ただの文"])
+  })
+})
+
+describe("isUrl", () => {
+  it("文字列全体が URL のときだけ true", () => {
+    expect(isUrl("https://github.com/PathLight-jp/x/pull/12")).toBe(true)
+    expect(isUrl("詳細は https://example.com")).toBe(false)
+  })
+})

package/views/_parts/Linkify.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react"
+
+// テキスト中の素の URL（http/https）をクリックできるリンクにする。
+// 値の表示（I/O・タイムライン・承認ビュー等）はどこでもこれを通す。
+// 引用符・括弧・全角の区切りは URL に含めず、末尾の句読点も外す
+const urlPattern = /https?:\/\/[^\s"'<>()[\]{}（）「」『』【】、。]+/g
+const trailingPunct = /[.,;:!?]+$/
+
+/** 文字列全体が1つの URL か */
+export const isUrl = (value: string): boolean =>
+  /^https?:\/\/\S+$/.test(value.trim())
+
+export const linkify = (text: string, prefix = ""): ReactNode[] => {
+  const nodes: ReactNode[] = []
+  let last = 0
+  for (const match of text.matchAll(urlPattern)) {
+    const start = match.index ?? 0
+    const url = match[0].replace(trailingPunct, "")
+    if (url.length <= "https://".length) continue
+    if (start > last) nodes.push(text.slice(last, start))
+    nodes.push(
+      <a
+        key={`${prefix}${start}`}
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+        // 行クリックで選択・開閉する親の中でも、リンクはリンクとして開く
+        onClick={(e) => e.stopPropagation()}
+        style={{ overflowWrap: "anywhere" }}
+      >
+        {url}
+      </a>,
+    )
+    last = start + url.length
+  }
+  if (last < text.length) nodes.push(text.slice(last))
+  return nodes
+}
+
+export const Linkify = ({ text }: { text: string }) => <>{linkify(text)}</>

package/views/_parts/Markdown.test.ts

@@ -0,0 +1,131 @@
+import { describe, expect, it } from "vitest"
+import { isLongText, parseBlocks } from "./Markdown.js"
+
+// Markdown レンダラのブロック分割（描画は含まない）。
+// AI の下書き・調査レポートに実際に出る記法だけを見る前提
+
+describe("parseBlocks", () => {
+  it("見出し・箇条書き・段落を分ける", () => {
+    expect(
+      parseBlocks(
+        [
+          "## 調査レポート（社内向け）",
+          "",
+          "### 問い合わせ概要",
+          "- ユーザー: **不明**",
+          "- 発生時刻: 2026-08-10",
+          "",
+          "現時点で判明している原因は次の2点です。",
+        ].join("\n"),
+      ),
+    ).toEqual([
+      { kind: "heading", level: 2, text: "調査レポート（社内向け）" },
+      { kind: "heading", level: 3, text: "問い合わせ概要" },
+      {
+        kind: "list",
+        ordered: false,
+        items: [
+          { text: "ユーザー: **不明**", nested: false },
+          { text: "発生時刻: 2026-08-10", nested: false },
+        ],
+      },
+      { kind: "para", lines: ["現時点で判明している原因は次の2点です。"] },
+    ])
+  })
+
+  it("段落は空行で切れ、段落内の改行は行として残る", () => {
+    expect(parseBlocks("一行目\n二行目\n\n次の段落")).toEqual([
+      { kind: "para", lines: ["一行目", "二行目"] },
+      { kind: "para", lines: ["次の段落"] },
+    ])
+  })
+
+  it("番号付きリストとネスト（1段）を拾う", () => {
+    expect(parseBlocks("1. 一つ目\n2. 二つ目\n  1. ぶら下がり")).toEqual([
+      {
+        kind: "list",
+        ordered: true,
+        items: [
+          { text: "一つ目", nested: false },
+          { text: "二つ目", nested: false },
+          { text: "ぶら下がり", nested: true },
+        ],
+      },
+    ])
+  })
+
+  it("コードブロックは中身を素のまま持つ", () => {
+    expect(parseBlocks("```ts\nconst a = 1\n\nconst b = 2\n```\nあと")).toEqual(
+      [
+        { kind: "code", lines: ["const a = 1", "", "const b = 2"] },
+        { kind: "para", lines: ["あと"] },
+      ],
+    )
+  })
+
+  it("閉じない ``` でも終端まで読んで止まる（無限ループにしない）", () => {
+    expect(parseBlocks("```\nconst a = 1")).toEqual([
+      { kind: "code", lines: ["const a = 1"] },
+    ])
+  })
+
+  it("--- は水平線、引用はまとめて1ブロック", () => {
+    expect(parseBlocks("---\n> 引用の1行目\n> 2行目")).toEqual([
+      { kind: "rule" },
+      { kind: "quote", lines: ["引用の1行目", "2行目"] },
+    ])
+  })
+
+  it("表：見出し行＋区切り行＋本体行を1ブロックにし、寄せは区切りのコロンで決める", () => {
+    expect(
+      parseBlocks(
+        [
+          "前置き",
+          "| 項目 | 値 | 件数 |",
+          "|:-- | :-: | --:|",
+          "| ログ | **402** | 3 |",
+          "| DB | `plan=expired` | 1 |",
+          "",
+          "あと",
+        ].join("\n"),
+      ),
+    ).toEqual([
+      { kind: "para", lines: ["前置き"] },
+      {
+        kind: "table",
+        align: ["left", "center", "right"],
+        header: ["項目", "値", "件数"],
+        rows: [
+          ["ログ", "**402**", "3"],
+          ["DB", "`plan=expired`", "1"],
+        ],
+      },
+      { kind: "para", lines: ["あと"] },
+    ])
+  })
+
+  it("表：外側の | が無い行・セル数が足りない行も受ける（欠けは空セル）", () => {
+    expect(parseBlocks("a | b\n--- | ---\n1")).toEqual([
+      {
+        kind: "table",
+        align: [null, null],
+        header: ["a", "b"],
+        rows: [["1", ""]],
+      },
+    ])
+  })
+
+  it("表：区切り行が続かない | 行は段落のまま（壊さない）", () => {
+    expect(parseBlocks("| a | b |\n本文")).toEqual([
+      { kind: "para", lines: ["| a | b |", "本文"] },
+    ])
+  })
+})
+
+describe("isLongText", () => {
+  it("改行を含むか80文字超なら長文", () => {
+    expect(isLongText("短い一行")).toBe(false)
+    expect(isLongText("一行目\n二行目")).toBe(true)
+    expect(isLongText("あ".repeat(81))).toBe(true)
+  })
+})