@neurocode-ai/web 1.18.8

package/src/components/share/content-diff.tsx

@@ -0,0 +1,240 @@
+import { parsePatch } from "diff"
+import { createMemo, For } from "solid-js"
+import { ContentCode } from "./content-code"
+import styles from "./content-diff.module.css"
+
+type DiffRow = {
+  left: string
+  right: string
+  type: "added" | "removed" | "unchanged" | "modified"
+}
+
+interface Props {
+  diff: string
+  lang?: string
+}
+
+export function ContentDiff(props: Props) {
+  const rows = createMemo(() => {
+    const diffRows: DiffRow[] = []
+
+    try {
+      const patches = parsePatch(props.diff)
+
+      for (const patch of patches) {
+        for (const hunk of patch.hunks) {
+          const lines = hunk.lines
+          let i = 0
+
+          while (i < lines.length) {
+            const line = lines[i]
+            const content = line.slice(1)
+            const prefix = line[0]
+
+            if (prefix === "-") {
+              // Look ahead for consecutive additions to pair with removals
+              const removals: string[] = [content]
+              let j = i + 1
+
+              // Collect all consecutive removals
+              while (j < lines.length && lines[j][0] === "-") {
+                removals.push(lines[j].slice(1))
+                j++
+              }
+
+              // Collect all consecutive additions that follow
+              const additions: string[] = []
+              while (j < lines.length && lines[j][0] === "+") {
+                additions.push(lines[j].slice(1))
+                j++
+              }
+
+              // Pair removals with additions
+              const maxLength = Math.max(removals.length, additions.length)
+              for (let k = 0; k < maxLength; k++) {
+                const hasLeft = k < removals.length
+                const hasRight = k < additions.length
+
+                if (hasLeft && hasRight) {
+                  // Replacement - left is removed, right is added
+                  diffRows.push({
+                    left: removals[k],
+                    right: additions[k],
+                    type: "modified",
+                  })
+                } else if (hasLeft) {
+                  // Pure removal
+                  diffRows.push({
+                    left: removals[k],
+                    right: "",
+                    type: "removed",
+                  })
+                } else if (hasRight) {
+                  // Pure addition - only create if we actually have content
+                  diffRows.push({
+                    left: "",
+                    right: additions[k],
+                    type: "added",
+                  })
+                }
+              }
+
+              i = j
+            } else if (prefix === "+") {
+              // Standalone addition (not paired with removal)
+              diffRows.push({
+                left: "",
+                right: content,
+                type: "added",
+              })
+              i++
+            } else if (prefix === " ") {
+              diffRows.push({
+                left: content === "" ? " " : content,
+                right: content === "" ? " " : content,
+                type: "unchanged",
+              })
+              i++
+            } else {
+              i++
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Failed to parse patch:", error)
+      return []
+    }
+
+    return diffRows
+  })
+
+  const mobileRows = createMemo(() => {
+    const mobileBlocks: {
+      type: "removed" | "added" | "unchanged"
+      lines: string[]
+    }[] = []
+    const currentRows = rows()
+
+    let i = 0
+    while (i < currentRows.length) {
+      const removedLines: string[] = []
+      const addedLines: string[] = []
+
+      // Collect consecutive modified/removed/added rows
+      while (
+        i < currentRows.length &&
+        (currentRows[i].type === "modified" || currentRows[i].type === "removed" || currentRows[i].type === "added")
+      ) {
+        const row = currentRows[i]
+        if (row.left && (row.type === "removed" || row.type === "modified")) {
+          removedLines.push(row.left)
+        }
+        if (row.right && (row.type === "added" || row.type === "modified")) {
+          addedLines.push(row.right)
+        }
+        i++
+      }
+
+      // Add grouped blocks
+      if (removedLines.length > 0) {
+        mobileBlocks.push({ type: "removed", lines: removedLines })
+      }
+      if (addedLines.length > 0) {
+        mobileBlocks.push({ type: "added", lines: addedLines })
+      }
+
+      // Add unchanged rows as-is
+      if (i < currentRows.length && currentRows[i].type === "unchanged") {
+        mobileBlocks.push({
+          type: "unchanged",
+          lines: [currentRows[i].left],
+        })
+        i++
+      }
+    }
+
+    return mobileBlocks
+  })
+
+  return (
+    <div class={styles.root}>
+      <div data-component="desktop">
+        <For each={rows()}>
+          {(row) => (
+            <div data-component="diff-row" data-type={row.type}>
+              <div
+                data-slot="before"
+                data-diff-type={row.type === "removed" || row.type === "modified" ? "removed" : ""}
+              >
+                <ContentCode code={row.left} flush lang={props.lang} />
+              </div>
+              <div data-slot="after" data-diff-type={row.type === "added" || row.type === "modified" ? "added" : ""}>
+                <ContentCode code={row.right} lang={props.lang} flush />
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+
+      <div data-component="mobile">
+        <For each={mobileRows()}>
+          {(block) => (
+            <div data-component="diff-block" data-type={block.type}>
+              <For each={block.lines}>
+                {(line) => (
+                  <div data-diff-type={block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""}>
+                    <ContentCode code={line} lang={props.lang} flush />
+                  </div>
+                )}
+              </For>
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}
+
+// const testDiff = `--- combined_before.txt	2025-06-24 16:38:08
+// +++ combined_after.txt	2025-06-24 16:38:12
+// @@ -1,21 +1,25 @@
+//  unchanged line
+// -deleted line
+// -old content
+// +added line
+// +new content
+//
+// -removed empty line below
+// +added empty line above
+//
+// -	tab indented
+// -trailing spaces
+// -very long line that will definitely wrap in most editors and cause potential alignment issues when displayed in a two column diff view
+// -unicode content: 🚀 ✨ 中文
+// -mixed	content with	tabs and spaces
+// +    space indented
+// +no trailing spaces
+// +short line
+// +very long replacement line that will also wrap and test how the diff viewer handles long line additions after short line removals
+// +different unicode: 🎉 💻 日本語
+// +normalized content with consistent spacing
+// +newline to content
+//
+// -content to remove
+// -whitespace only:
+// -multiple
+// -consecutive
+// -deletions
+// -single deletion
+// +
+// +single addition
+// +first addition
+// +second addition
+// +third addition
+//  line before addition
+// +first added line
+// +
+// +third added line
+//  line after addition
+//  final unchanged line`

package/src/components/share/content-error.module.css

@@ -0,0 +1,64 @@
+.root {
+  background-color: var(--sl-color-bg-surface);
+  padding: 0.5rem calc(0.5rem + 3px);
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  align-self: flex-start;
+
+  [data-section="content"] {
+    pre {
+      margin-bottom: 0.5rem;
+      line-height: 1.5;
+      font-size: 0.75rem;
+      white-space: pre-wrap;
+      word-break: break-word;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      span {
+        margin-right: 0.25rem;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      span[data-color="red"] {
+        color: var(--sl-color-red);
+      }
+      span[data-color="dimmed"] {
+        color: var(--sl-color-text-dimmed);
+      }
+      span[data-marker="label"] {
+        text-transform: uppercase;
+        letter-spacing: -0.5px;
+      }
+      span[data-separator] {
+        margin-right: 0.375rem;
+      }
+    }
+  }
+
+  &[data-expanded="true"] {
+    [data-section="content"] {
+      display: block;
+    }
+  }
+  &[data-expanded="false"] {
+    [data-section="content"] {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 7;
+      overflow: hidden;
+    }
+  }
+
+  button {
+    flex: 0 0 auto;
+    padding: 2px 0;
+    font-size: 0.75rem;
+  }
+}

package/src/components/share/content-error.tsx

@@ -0,0 +1,25 @@
+import style from "./content-error.module.css"
+import { type JSX, createSignal } from "solid-js"
+import { createOverflow, useShareMessages } from "./common"
+
+interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
+  expand?: boolean
+}
+export function ContentError(props: Props) {
+  const [expanded, setExpanded] = createSignal(false)
+  const overflow = createOverflow()
+  const messages = useShareMessages()
+
+  return (
+    <div class={style.root} data-expanded={expanded() || props.expand === true ? true : undefined}>
+      <div data-section="content" ref={overflow.ref}>
+        {props.children}
+      </div>
+      {((!props.expand && overflow.status) || expanded()) && (
+        <button type="button" data-element-button-text onClick={() => setExpanded((e) => !e)}>
+          {expanded() ? messages.show_less : messages.show_more}
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/share/content-markdown.module.css

@@ -0,0 +1,154 @@
+.root {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+
+  [data-slot="expand-button"] {
+    flex: 0 0 auto;
+    padding: 2px 0;
+    font-size: 0.857em;
+  }
+
+  [data-slot="markdown"] {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    overflow: hidden;
+
+    [data-expanded] & {
+      display: block;
+    }
+
+    font-size: 1em;
+    line-height: 1.5;
+
+    p,
+    blockquote,
+    ul,
+    ol,
+    dl,
+    table,
+    pre {
+      margin-bottom: 1rem;
+    }
+
+    ul,
+    ol {
+      margin-bottom: 0.5rem;
+    }
+
+    /* Add spacing between top-level list items */
+    ol > li {
+      margin-bottom: 0.5rem;
+    }
+
+    strong {
+      font-weight: 600;
+    }
+
+    ol {
+      list-style-position: outside;
+      padding-left: 1.5rem;
+    }
+
+    ul {
+      padding-left: 1.5rem;
+    }
+
+    /* Nested list spacing */
+    li ul,
+    li ol {
+      margin-top: 0.25rem;
+      margin-bottom: 0;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: 1em;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+    }
+
+    & > *:last-child {
+      margin-bottom: 0;
+    }
+
+    pre {
+      --shiki-dark-bg: var(--sl-color-bg-surface) !important;
+      background-color: var(--sl-color-bg-surface) !important;
+      padding: 0.5rem 0.75rem;
+      line-height: 1.6;
+      font-size: 0.857em;
+      white-space: pre-wrap;
+      word-break: break-word;
+
+      span {
+        white-space: break-spaces;
+      }
+    }
+
+    code {
+      font-weight: 500;
+
+      &:not(pre code) {
+        &::before {
+          content: "`";
+          font-weight: 700;
+        }
+
+        &::after {
+          content: "`";
+          font-weight: 700;
+        }
+      }
+    }
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+    }
+
+    th,
+    td {
+      border: 1px solid var(--sl-color-border);
+      padding: 0.5rem 0.75rem;
+      text-align: left;
+    }
+
+    th {
+      border-bottom: 1px solid var(--sl-color-border);
+    }
+
+    /* Remove outer borders */
+    table tr:first-child th,
+    table tr:first-child td {
+      border-top: none;
+    }
+
+    table tr:last-child td {
+      border-bottom: none;
+    }
+
+    table th:first-child,
+    table td:first-child {
+      border-left: none;
+    }
+
+    table th:last-child,
+    table td:last-child {
+      border-right: none;
+    }
+  }
+
+  [data-component="copy-button"] {
+    top: 0;
+    right: 0;
+  }
+}

package/src/components/share/content-markdown.tsx

@@ -0,0 +1,74 @@
+import { marked } from "marked"
+import { codeToHtml } from "shiki"
+import markedShiki from "marked-shiki"
+import { createOverflow, useShareMessages } from "./common"
+import { CopyButton } from "./copy-button"
+import { createResource, createSignal } from "solid-js"
+import style from "./content-markdown.module.css"
+
+const markedWithShiki = marked.use(
+  {
+    renderer: {
+      link({ href, title, text }) {
+        const titleAttr = title ? ` title="${title}"` : ""
+        return `<a href="${href}"${titleAttr} target="_blank" rel="noopener noreferrer">${text}</a>`
+      },
+    },
+  },
+  markedShiki({
+    highlight(code, lang) {
+      return codeToHtml(code, {
+        lang: lang || "text",
+        themes: {
+          light: "github-light",
+          dark: "github-dark",
+        },
+      })
+    },
+  }),
+)
+
+interface Props {
+  text: string
+  expand?: boolean
+  highlight?: boolean
+}
+export function ContentMarkdown(props: Props) {
+  const [html] = createResource(
+    () => strip(props.text),
+    async (markdown) => {
+      return markedWithShiki.parse(markdown)
+    },
+  )
+  const [expanded, setExpanded] = createSignal(false)
+  const overflow = createOverflow()
+  const messages = useShareMessages()
+
+  return (
+    <div
+      class={style.root}
+      data-highlight={props.highlight === true ? true : undefined}
+      data-expanded={expanded() || props.expand === true ? true : undefined}
+    >
+      <div data-slot="markdown" ref={overflow.ref} innerHTML={html()} />
+
+      {!props.expand && overflow.status && (
+        <button
+          type="button"
+          data-component="text-button"
+          data-slot="expand-button"
+          onClick={() => setExpanded((e) => !e)}
+        >
+          {expanded() ? messages.show_less : messages.show_more}
+        </button>
+      )}
+      <CopyButton text={props.text} />
+    </div>
+  )
+}
+
+function strip(text: string): string {
+  const wrappedRe = /^\s*<([A-Za-z]\w*)>\s*([\s\S]*?)\s*<\/\1>\s*$/
+  const match = text.match(wrappedRe)
+  return match ? match[2] : text
+}

package/src/components/share/content-text.module.css

@@ -0,0 +1,63 @@
+.root {
+  position: relative;
+  color: var(--sl-color-text);
+  background-color: var(--sl-color-bg-surface);
+  padding: 0.5rem calc(0.5rem + 3px);
+  padding-right: calc(1rem + 18px);
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  align-self: flex-start;
+  font-size: 0.875rem;
+
+  &[data-compact] {
+    font-size: 0.75rem;
+    color: var(--sl-color-text-dimmed);
+  }
+
+  [data-slot="text"] {
+    line-height: 1.5;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    overflow: hidden;
+
+    [data-expanded] & {
+      display: block;
+    }
+  }
+
+  [data-slot="expand-button"] {
+    flex: 0 0 auto;
+    padding: 2px 0;
+    font-size: 0.75rem;
+  }
+
+  &[data-theme="invert"] {
+    background-color: var(--sl-color-blue-high);
+    color: var(--sl-color-text-invert);
+
+    [data-slot="expand-button"] {
+      opacity: 0.85;
+      color: var(--sl-color-text-invert);
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  &[data-theme="blue"] {
+    background-color: var(--sl-color-blue-low);
+  }
+
+  [data-component="copy-button"] {
+    top: 0.5rem;
+    right: calc(0.5rem - 1px);
+  }
+}

package/src/components/share/content-text.tsx

@@ -0,0 +1,38 @@
+import style from "./content-text.module.css"
+import { createSignal } from "solid-js"
+import { createOverflow, useShareMessages } from "./common"
+import { CopyButton } from "./copy-button"
+
+interface Props {
+  text: string
+  expand?: boolean
+  compact?: boolean
+}
+export function ContentText(props: Props) {
+  const [expanded, setExpanded] = createSignal(false)
+  const overflow = createOverflow()
+  const messages = useShareMessages()
+
+  return (
+    <div
+      class={style.root}
+      data-expanded={expanded() || props.expand === true ? true : undefined}
+      data-compact={props.compact === true ? true : undefined}
+    >
+      <pre data-slot="text" ref={overflow.ref}>
+        {props.text}
+      </pre>
+      {((!props.expand && overflow.status) || expanded()) && (
+        <button
+          type="button"
+          data-component="text-button"
+          data-slot="expand-button"
+          onClick={() => setExpanded((e) => !e)}
+        >
+          {expanded() ? messages.show_less : messages.show_more}
+        </button>
+      )}
+      <CopyButton text={props.text} />
+    </div>
+  )
+}

package/src/components/share/copy-button.module.css

@@ -0,0 +1,30 @@
+.root {
+  position: absolute;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease;
+
+  button {
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0.125rem;
+    color: var(--sl-color-text-secondary);
+
+    svg {
+      display: block;
+      width: 1rem;
+      height: 1rem;
+    }
+
+    &[data-copied="true"] {
+      color: var(--sl-color-green-high);
+    }
+  }
+}
+
+/* Show copy button when parent is hovered */
+*:hover > .root {
+  opacity: 1;
+  visibility: visible;
+}