vocs 2.5.2 → 2.6.0

package/src/react/internal/Prompt.client.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import { Tooltip } from '@base-ui/react/tooltip'
+import * as React from 'react'
+import LucideScanText from '~icons/lucide/scan-text'
+import RiSparkling2Fill from '~icons/ri/sparkling-2-fill'
+import SimpleIconsClaude from '~icons/simple-icons/claude'
+import SimpleIconsOpenai from '~icons/simple-icons/openai'
+
+type State = 'copied' | 'error' | 'idle'
+
+export function PromptFrame(props: PromptFrame.Props) {
+  const { children, className, value } = props
+  const contentId = React.useId()
+  const encodedValue = encodeURIComponent(value)
+  const [expanded, setExpanded] = React.useState(false)
+  const [state, setState] = React.useState<State>('idle')
+
+  React.useEffect(() => {
+    if (state !== 'copied' && state !== 'error') return
+    const timeout = setTimeout(() => setState('idle'), 2_000)
+    return () => clearTimeout(timeout)
+  }, [state])
+
+  const copy = React.useCallback(() => {
+    try {
+      navigator.clipboard.writeText(value).then(
+        () => setState('copied'),
+        () => setState('error'),
+      )
+    } catch {
+      setState('error')
+    }
+  }, [value])
+
+  const copyFromFrame = React.useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      if (event.defaultPrevented) return
+      if (event.target instanceof Element && event.target.closest('a, button')) return
+      if (window.getSelection()?.isCollapsed === false) return
+      copy()
+    },
+    [copy],
+  )
+
+  const label = {
+    copied: 'Copied instructions',
+    error: 'Copy failed',
+    idle: 'Copy instructions for agent',
+  }[state]
+
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: _
+    <figure
+      className={className}
+      data-expanded={expanded}
+      data-state={state}
+      data-v-prompt
+      onClick={copyFromFrame}
+    >
+      <figcaption data-v-prompt-header>
+        <button
+          aria-label={label}
+          data-state={state}
+          data-v-prompt-copy
+          onClick={copy}
+          type="button"
+        >
+          <RiSparkling2Fill aria-hidden data-v-prompt-icon />
+          <span aria-live="polite">{label}</span>
+        </button>
+        <Tooltip.Provider delay={300}>
+          <span data-v-prompt-actions>
+            <PromptAction
+              label="Open in ChatGPT"
+              render={
+                // biome-ignore lint/a11y/useAnchorContent: _
+                <a
+                  aria-label="Open in ChatGPT"
+                  href={`https://chatgpt.com?hints=search&q=${encodedValue}`}
+                  rel="noopener noreferrer"
+                  target="_blank"
+                />
+              }
+            >
+              <SimpleIconsOpenai aria-hidden />
+            </PromptAction>
+            <PromptAction
+              label="Open in Claude"
+              render={
+                // biome-ignore lint/a11y/useAnchorContent: _
+                <a
+                  aria-label="Open in Claude"
+                  href={`https://claude.ai/new?q=${encodedValue}`}
+                  rel="noopener noreferrer"
+                  target="_blank"
+                />
+              }
+            >
+              <SimpleIconsClaude aria-hidden />
+            </PromptAction>
+            <PromptAction
+              label={expanded ? 'Hide Prompt' : 'View Prompt'}
+              render={
+                <button
+                  aria-controls={contentId}
+                  aria-expanded={expanded}
+                  aria-label={expanded ? 'Hide Prompt' : 'View Prompt'}
+                  data-v-prompt-toggle
+                  onClick={() => setExpanded((expanded) => !expanded)}
+                  type="button"
+                />
+              }
+            >
+              <LucideScanText aria-hidden />
+            </PromptAction>
+          </span>
+        </Tooltip.Provider>
+      </figcaption>
+      <div data-v-prompt-content hidden={!expanded} id={contentId}>
+        <pre data-v-prompt-body>
+          <code>{children}</code>
+        </pre>
+      </div>
+    </figure>
+  )
+}
+
+export declare namespace PromptFrame {
+  type Props = {
+    children: React.ReactNode
+    className?: string | undefined
+    value: string
+  }
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: _
+function PromptAction(props: PromptAction.Props) {
+  const { children, label, render } = props
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger data-v-prompt-action render={render}>
+        {children}
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Positioner className="vocs:z-50" side="top" sideOffset={6}>
+          <Tooltip.Popup data-v-prompt-tooltip>{label}</Tooltip.Popup>
+        </Tooltip.Positioner>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  )
+}
+
+declare namespace PromptAction {
+  type Props = {
+    children: React.ReactNode
+    label: string
+    render: React.ReactElement
+  }
+}

package/src/react/internal/prompt.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import { tokenize } from './prompt.js'
+
+describe('tokenize', () => {
+  it('detects prompt structure without changing its text', () => {
+    const value = [
+      'Read https://vocs.dev/introduction/getting-started and update `vocs.config.ts`.',
+      '',
+      'Requirements:',
+      '- Preserve existing navigation',
+      '- Replace <PROJECT_NAME> with {{package}} and run $COMMAND.',
+    ].join('\n')
+    const tokens = tokenize(value)
+
+    expect(tokens.map((token) => token.value).join('')).toBe(value)
+    expect(tokens.filter((token) => token.type !== 'text')).toEqual([
+      { type: 'url', value: 'https://vocs.dev/introduction/getting-started' },
+      { type: 'code', value: '`vocs.config.ts`' },
+      { type: 'label', value: 'Requirements:' },
+      { type: 'marker', value: '-' },
+      { type: 'marker', value: '-' },
+      { type: 'placeholder', value: '<PROJECT_NAME>' },
+      { type: 'placeholder', value: '{{package}}' },
+      { type: 'placeholder', value: '$COMMAND' },
+    ])
+  })
+
+  it('keeps trailing URL punctuation outside the link', () => {
+    const value = 'Read (https://vocs.dev/docs), then continue.'
+    const tokens = tokenize(value)
+
+    expect(tokens.map((token) => token.value).join('')).toBe(value)
+    expect(tokens.find((token) => token.type === 'url')).toEqual({
+      type: 'url',
+      value: 'https://vocs.dev/docs',
+    })
+  })
+
+  it('does not tokenize prompt syntax inside inline code', () => {
+    const value = 'Keep `https://example.com/<PROJECT>` literal.'
+    expect(tokenize(value).filter((token) => token.type !== 'text')).toEqual([
+      { type: 'code', value: '`https://example.com/<PROJECT>`' },
+    ])
+  })
+})

package/src/react/internal/prompt.ts

@@ -0,0 +1,78 @@
+export type Token = {
+  type: 'code' | 'label' | 'marker' | 'placeholder' | 'text' | 'url'
+  value: string
+}
+
+const labelRegex = /^(\s*)([A-Z][A-Za-z0-9 /_-]{0,31}:)(?=\s|$)/
+const listMarkerRegex = /^(\s*)([-*+]|\d+[.)])(?=\s)/
+const trailingUrlPunctuationRegex = /[\]})>,.;:!?]+$/
+
+export function tokenize(value: string): tokenize.ReturnType {
+  const tokens: Token[] = []
+  const lines = value.split('\n')
+
+  for (const [index, line] of lines.entries()) {
+    tokenizeLine(line, tokens)
+    if (index < lines.length - 1) push(tokens, 'text', '\n')
+  }
+
+  return tokens
+}
+
+export declare namespace tokenize {
+  type ReturnType = Token[]
+}
+
+function tokenizeLine(line: string, tokens: Token[]) {
+  const listMarker = line.match(listMarkerRegex)
+  if (listMarker) {
+    push(tokens, 'text', listMarker[1] ?? '')
+    push(tokens, 'marker', listMarker[2] ?? '')
+    tokenizeInline(line.slice(listMarker[0].length), tokens)
+    return
+  }
+
+  const label = line.match(labelRegex)
+  if (label) {
+    push(tokens, 'text', label[1] ?? '')
+    push(tokens, 'label', label[2] ?? '')
+    tokenizeInline(line.slice(label[0].length), tokens)
+    return
+  }
+
+  tokenizeInline(line, tokens)
+}
+
+function tokenizeInline(value: string, tokens: Token[]) {
+  const tokenRegex =
+    /`[^`\n]+`|https?:\/\/[^\s`]+|\{\{[^{}\n]+\}\}|\$\{[^{}\n]+\}|<[A-Z][A-Z0-9_-]*>|\$[A-Z][A-Z0-9_]*/g
+  let cursor = 0
+
+  for (const match of value.matchAll(tokenRegex)) {
+    const index = match.index
+    const raw = match[0]
+    push(tokens, 'text', value.slice(cursor, index))
+
+    if (raw.startsWith('`')) push(tokens, 'code', raw)
+    else if (raw.startsWith('http')) pushUrl(tokens, raw)
+    else push(tokens, 'placeholder', raw)
+
+    cursor = index + raw.length
+  }
+
+  push(tokens, 'text', value.slice(cursor))
+}
+
+function pushUrl(tokens: Token[], value: string) {
+  const trailing = value.match(trailingUrlPunctuationRegex)?.[0] ?? ''
+  const url = trailing ? value.slice(0, -trailing.length) : value
+  push(tokens, 'url', url)
+  push(tokens, 'text', trailing)
+}
+
+function push(tokens: Token[], type: Token['type'], value: string) {
+  if (!value) return
+  const previous = tokens.at(-1)
+  if (type === 'text' && previous?.type === 'text') previous.value += value
+  else tokens.push({ type, value })
+}