@recombine-ai/bosun 0.13.0 → 0.15.0

package/src/lib/components/CollapseExpand.svelte

@@ -0,0 +1,425 @@
+<script lang="ts">
+	export let value: string | any[] = ''
+	export let limit = 200
+	export let maxLines: number | null = null
+	export let className = ''
+	// export let expandedLabel = 'collapse'
+	export let collapsedLabel = '...more'
+	export let initiallyExpanded = false
+	export let stopPropagation = true
+	export let expanded = initiallyExpanded
+	export let treatPlainText = false
+	export let highlightPrompt = false
+
+	type Segment = {
+		text: string
+		role?: string
+		time?: string
+		duration?: number
+	}
+
+	function escapeHtml(text: string): string {
+		return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+	}
+
+	function highlightPromptText(raw: string): string {
+		const s = normalizeNewlines(raw)
+		let html = escapeHtml(s)
+
+		const curlyBlocks: string[] = []
+		html = html.replace(/(\{+[\s\S]*?\}+)/g, (match) => {
+			const id = curlyBlocks.length
+			curlyBlocks.push(match)
+			return `__CURLY${id}__`
+		})
+
+		// Rows beginnig with # --> .mtk8 (blue)
+		html = html.replace(/^(\s*#.*)$/gm, '<span class="prompt-heading">$1</span>')
+
+		// <> --> .mtk8 (blue)
+		html = html.replace(/(&lt;[^&]*?&gt;)/g, '<span class="mtk8">$1</span>')
+
+		// "1. ", "2) ", "10." --> .mtk8 (blue)
+		html = html.replace(
+			/^(\s*)(\d+)([.)])(\s+)/gm,
+			(_match, p1, p2, p3, p4) => `${p1}<span class="mtk8">${p2}${p3}</span>${p4}`
+		)
+
+		// {} --> .mtk5 (orange)
+		curlyBlocks.forEach((block, idx) => {
+			const highlighted = `<span class="mtk5">${block}</span>`
+			html = html.replace(`__CURLY${idx}__`, highlighted)
+		})
+
+		// \n --> <br/>
+		html = html.replace(/\n/g, '<br/>')
+
+		return html
+	}
+
+	function normalizeNewlines(s: string): string {
+		let result = s.replace(/\r\n/g, '\n')
+		result = result.replace(/\\n/g, '\n')
+		return result
+	}
+
+	function getPlain(v: string | any[]): string {
+		try {
+			if (Array.isArray(v)) {
+				const s = v.map((s) => s?.text ?? s?.content ?? JSON.stringify(s)).join(' ')
+				return normalizeNewlines(s)
+			}
+			if (typeof v === 'string') {
+				try {
+					const parsed = JSON.parse(v)
+					if (Array.isArray(parsed)) {
+						const s = parsed.map((s: any) => s?.text ?? s?.content ?? JSON.stringify(s)).join(' ')
+						return normalizeNewlines(s)
+					}
+					return normalizeNewlines(v)
+				} catch {
+					return normalizeNewlines(v)
+				}
+			}
+			return normalizeNewlines(JSON.stringify(v))
+		} catch {
+			return normalizeNewlines(String(v ?? ''))
+		}
+	}
+
+	function getFull(v: string | any[]): string {
+		try {
+			if (Array.isArray(v)) {
+				const s = v.map((s) => s?.text ?? s?.content ?? JSON.stringify(s)).join('\n')
+				return normalizeNewlines(s)
+			}
+			if (typeof v === 'string') {
+				try {
+					const parsed = JSON.parse(v)
+					if (Array.isArray(parsed)) {
+						const s = parsed.map((s: any) => s?.text ?? s?.content ?? JSON.stringify(s)).join('\n')
+						return normalizeNewlines(s)
+					}
+					return normalizeNewlines(v)
+				} catch {
+					return normalizeNewlines(v)
+				}
+			}
+			return normalizeNewlines(JSON.stringify(v, null, 2))
+		} catch {
+			return normalizeNewlines(String(v ?? ''))
+		}
+	}
+
+	function parseLine(raw: string): Segment[] {
+		const s = normalizeNewlines(raw)
+
+		const lines = s
+			.split(/\n+/)
+			.map((l) => l.trim())
+			.filter((l) => l.length > 0)
+
+		const segments: Segment[] = []
+		let currentRole: string | undefined = undefined
+		let currentText = ''
+
+		for (const line of lines) {
+			const m = line.match(
+				/^(user|assistant|system|customer|caller|tool|model|agent)\s*[:\-]\s*(.*)$/i
+			)
+
+			if (m) {
+				if (currentText) {
+					segments.push({
+						text: currentText,
+						role: currentRole
+					})
+				}
+
+				currentRole = m[1].toLowerCase()
+				currentText = m[2] ?? ''
+			} else {
+				if (currentText) {
+					currentText += '\n' + line
+				} else {
+					currentText = line
+				}
+			}
+		}
+
+		if (currentText) {
+			segments.push({
+				text: currentText,
+				role: currentRole
+			})
+		}
+
+		return segments
+	}
+
+	function asSegments(v: string | any[]): Segment[] {
+		try {
+			let raw: any = v
+
+			if (typeof v === 'string') {
+				try {
+					raw = JSON.parse(v)
+				} catch {
+					if (!treatPlainText) return []
+
+					return parseLine(v)
+				}
+			}
+
+			// Support format { messages: [...] }
+			if (!Array.isArray(raw)) {
+				if (Array.isArray(raw?.messages)) {
+					raw = raw.messages
+				} else {
+					return []
+				}
+			}
+
+			return raw
+				.map((s: any) => {
+					let text: string
+
+					if (s?.text != null) {
+						text = String(s.text)
+					} else if (s?.content != null) {
+						if (Array.isArray(s.content)) {
+							text = s.content
+								.map((part: any) => {
+									if (typeof part === 'string') return part
+									if (typeof part?.text === 'string') return part.text
+									if (typeof part?.text?.value === 'string') return part.text.value
+									return JSON.stringify(part)
+								})
+								.join(' ')
+						} else if (typeof s.content === 'string') {
+							text = s.content
+						} else {
+							text = JSON.stringify(s.content)
+						}
+					} else if (typeof s === 'string') {
+						text = s
+					} else {
+						text = JSON.stringify(s)
+					}
+
+					return {
+						text: normalizeNewlines(text),
+						role: s?.role,
+						time: s?.time,
+						duration: s?.duration
+					} as Segment
+				})
+				.filter((s: Segment) => s.text && String(s.text).trim().length > 0)
+		} catch {
+			return []
+		}
+	}
+
+	const plain = () => getPlain(value)
+	const full = () => getFull(value)
+	const plainLines = () => plain().split('\n')
+	const segments = () => asSegments(value)
+	const hasStructuredTranscript = () => segments().length > 0
+
+	const isLong = () => {
+		if (maxLines != null) {
+			return plainLines().length > maxLines
+		}
+		return plain().length > limit
+	}
+
+	const collapsedText = () => {
+		const p = plain()
+		if (!isLong()) return p
+
+		//Max Lines
+		if (maxLines != null) {
+			return plainLines().slice(0, maxLines).join('\n')
+		}
+
+		// Symbols
+		return p.slice(0, limit)
+	}
+
+	// --- time / duration / role helpers ---
+	function formatTime(raw?: string): string | null {
+		if (!raw) return null
+		try {
+			const d = new Date(raw)
+			if (Number.isNaN(d.getTime())) return raw
+			return d.toLocaleTimeString(undefined, {
+				hour: '2-digit',
+				minute: '2-digit',
+				second: '2-digit'
+			})
+		} catch {
+			return raw
+		}
+	}
+
+	function formatDuration(raw?: number): string | null {
+		if (raw == null || !Number.isFinite(raw as any)) return null
+		const total = Number(raw)
+		const totalSec = Math.floor(total) // remove miliseconds
+		const m = Math.floor(totalSec / 60)
+		const s = totalSec % 60
+		const mm = String(m).padStart(2, '0')
+		const ss = String(s).padStart(2, '0')
+		return `${mm}:${ss}`
+	}
+
+	function normalizeRole(role?: string): string {
+		if (!role) return 'Assistant'
+		const r = role.trim()
+		if (!r) return 'Assistant'
+		return r.charAt(0).toUpperCase() + r.slice(1)
+	}
+
+	function isUserRole(role?: string): boolean {
+		const r = role?.toLowerCase() ?? ''
+		return r === 'user' || r === 'customer' || r === 'caller'
+	}
+
+	// System messages in <>
+	function splitSystem(text: string): { main: string; system: string[] } {
+		const system: string[] = []
+		const main = text
+			.replace(/<([^>]+)>/g, (_m, inner) => {
+				const cleaned = String(inner).trim()
+				if (cleaned) system.push(cleaned)
+				return ''
+			})
+			.trim()
+
+		return { main, system }
+	}
+
+	function toggle(e: Event) {
+		if (stopPropagation) e.stopPropagation()
+		expanded = !expanded
+	}
+
+	function onContainerClick(e: Event) {
+		if (stopPropagation) e.stopPropagation()
+	}
+</script>
+
+{#if expanded}
+	<!-- <div
+		class={`mt-1 max-h-96 cursor-text select-text overflow-y-auto rounded border-thin border-rc-gray-600 bg-rc-gray-900 p-2 pr-4 text-sm text-rc-gray-200 ${className}`}
+		onclick={onContainerClick}
+	> -->
+	{#if hasStructuredTranscript()}
+		<div class="space-y-3">
+			{#each segments() as seg}
+				{@const userSide = isUserRole(seg.role)}
+				{@const isSystem = (seg.role ?? '').toLowerCase() === 'system'}
+				{@const parts = splitSystem(seg.text)}
+				{@const t = formatTime(seg.time)}
+				{@const d = formatDuration(seg.duration)}
+
+				<div class={`flex ${userSide ? 'justify-end' : 'justify-start'}`}>
+					<div
+						class={`max-w-[70%] break-words rounded-md px-3 py-2 text-sm shadow-sm ${
+							userSide ? 'bg-rc-gray-600 text-rc-gray-100' : 'bg-rc-gray-700 text-rc-gray-100'
+						}`}
+					>
+						<!-- Role -->
+						<div
+							class={`my-1 text-xs font-semibold uppercase ${
+								isSystem
+									? 'text-rc-blue ' + (userSide ? 'text-right' : 'text-left')
+									: 'text-rc-green-200 ' + (userSide ? 'text-right' : 'text-left')
+							}`}
+						>
+							{normalizeRole(seg.role)}
+						</div>
+
+						<!-- Text & system messages -->
+						<div
+							class={`whitespace-pre-wrap break-words py-1 text-sm ${userSide ? 'text-justify' : 'text-left'} ${
+								isSystem ? 'italic text-rc-gray-200' : ''
+							}`}
+						>
+							{#if parts.main}
+								<div>{parts.main}</div>
+							{/if}
+
+							{#each parts.system as sys}
+								<div class="mt-1 whitespace-pre-wrap break-words text-xs italic text-rc-gray-200">
+									&lt;{sys}&gt;
+								</div>
+							{/each}
+						</div>
+
+						<!-- Time / duration -->
+						{#if t || d}
+							<div class={`mt-1 text-xs text-rc-gray-300 ${userSide ? 'text-right' : 'text-left'}`}>
+								{#if t}{t}{/if}
+								{#if t && d}
+									·
+								{/if}
+								{#if d}{d}{/if}
+							</div>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	{:else}
+		<div class="whitespace-pre-wrap break-words">
+			{#if highlightPrompt}
+				{@html highlightPromptText(full())}
+			{:else}
+				{full()}
+			{/if}
+		</div>
+	{/if}
+	<!-- </div> -->
+	<!-- <div class="mt-2 pr-2 text-right">
+		<button class="text-rc-green-200 hover:text-rc-green-100" onclick={toggle}>
+			{expandedLabel}
+		</button>
+	</div> -->
+{:else}
+	<div
+		class={`mt-1 cursor-text select-text rounded bg-rc-gray-900 p-2 text-sm text-rc-gray-200 ${className}`}
+		onclick={onContainerClick}
+	>
+		<span class="whitespace-pre-wrap break-words">
+			{#if highlightPrompt}
+				{@html highlightPromptText(collapsedText())}
+			{:else}
+				{collapsedText()}
+			{/if}
+		</span>
+
+		{#if isLong()}
+			<button
+				class="inline-flex text-sm text-rc-green-200 hover:text-rc-green-100"
+				onclick={toggle}
+			>
+				{collapsedLabel}
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<style lang="postcss">
+	:global(.mtk8) {
+		@apply text-rc-blue;
+	}
+
+	:global(.mtk5) {
+		@apply text-rc-orange;
+	}
+
+	:global(.prompt-heading) {
+		@apply font-semibold text-rc-blue;
+	}
+</style>

package/src/lib/components/CopyTracesDropdown.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import Button from '$lib/components/Button.svelte'
+	import Dropdown from '$lib/components/Dropdown.svelte'
+	import Icon from '$lib/components/Icon.svelte'
+
+	type CopiedTracesMode = 'with-prompts' | 'without-prompts'
+
+	interface Props {
+		disabled?: boolean
+		getWithPromptsText: () => string
+		getWithoutPromptsText: () => string
+		dropdownId?: string
+	}
+
+	let {
+		disabled = false,
+		getWithPromptsText,
+		getWithoutPromptsText,
+		dropdownId = 'copy-traces-dropdown'
+	}: Props = $props()
+
+	let open = $state(false)
+	let anchorEl = $state<HTMLButtonElement | null>(null)
+
+	let copied: CopiedTracesMode | null = $state(null)
+	let timer: number | null = $state(null)
+
+	$effect(() => {
+		if (disabled && open) open = false
+	})
+
+	async function copy(mode: CopiedTracesMode) {
+		try {
+			const text = mode === 'with-prompts' ? getWithPromptsText() : getWithoutPromptsText()
+			await navigator.clipboard.writeText(text)
+
+			copied = mode
+			if (timer) clearTimeout(timer)
+			timer = window.setTimeout(() => {
+				copied = null
+				timer = null
+			}, 2000)
+		} catch (e) {
+			console.error('Failed to copy traces', e)
+		}
+	}
+</script>
+
+<div>
+	<Button
+		variant="secondary"
+		size="small"
+		{disabled}
+		aria-expanded={open}
+		aria-haspopup="listbox"
+		aria-controls={dropdownId}
+		bind:el={anchorEl}
+		onclick={(e) => {
+			e.stopPropagation()
+			open = !open
+		}}
+		class="flex items-center gap-1"
+	>
+		{#if copied === 'without-prompts'}
+			Copied traces (without prompts)
+		{:else if copied === 'with-prompts'}
+			Copied traces (with prompts)
+		{:else}
+			Copy traces
+		{/if}
+		<Icon
+			name="chevron-down"
+			class={'size-5 text-rc-gray-400 transition-transform duration-200 ' +
+				(open ? 'rotate-180' : '')}
+		/>
+	</Button>
+
+	<Dropdown
+		id={dropdownId}
+		{open}
+		onClose={() => (open = false)}
+		{anchorEl}
+		placement="bottom-end"
+		offset={[0, 1]}
+		>{#snippet children()}
+			<div
+				class="mt-1 overflow-hidden rounded-lg border border-rc-gray-110 bg-rc-gray-930 shadow-inner-white-soft backdrop-blur-2xl"
+				role="listbox"
+			>
+				<Button
+					variant="ghost"
+					size="small"
+					role="option"
+					onclick={(e) => {
+						e.stopPropagation()
+						open = false
+						copy('without-prompts')
+					}}
+					class="w-full rounded-none border-b border-rc-gray-110 py-2 pr-3 text-left backdrop-blur-2xl hover:bg-rc-gray-700 focus:bg-rc-gray-400"
+				>
+					Without prompts
+				</Button>
+				<Button
+					variant="ghost"
+					size="small"
+					role="option"
+					onclick={(e) => {
+						e.stopPropagation()
+						open = false
+						copy('with-prompts')
+					}}
+					class="w-full rounded-none py-2 pr-3 text-left backdrop-blur-2xl hover:bg-rc-gray-700 focus:bg-rc-gray-400"
+				>
+					With prompts
+				</Button>
+			</div>{/snippet}
+	</Dropdown>
+</div>

package/src/lib/components/Dialog.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte'
+	import Button from './Button.svelte'
+
+	let dialog: HTMLDialogElement
+
+	type DialogProps = {
+		showCloseButton?: boolean
+		onClose?: () => void
+		onOpen?: () => void
+		isOpen?: boolean
+		children: Snippet
+	}
+
+	let {
+		showCloseButton = false,
+		onClose = () => {},
+		onOpen = () => {},
+		isOpen = false,
+		children
+	}: DialogProps = $props()
+
+	$effect(() => {
+		if (isOpen) {
+			console.log('show')
+			dialog?.showModal()
+			onOpen()
+		} else if (dialog?.open) {
+			console.log('close')
+			dialog.close()
+		}
+	})
+
+	function handleClose(): void {
+		onClose()
+	}
+
+	onMount(() => {
+		dialog.addEventListener('close', handleClose)
+
+		return () => {
+			dialog.removeEventListener('close', handleClose)
+		}
+	})
+
+	function handleBackdropClick(e: MouseEvent): void {
+		if (e.target === dialog) {
+			dialog.close()
+		}
+	}
+</script>
+
+<dialog
+	bind:this={dialog}
+	onmousedown={handleBackdropClick}
+	class="dialog m-auto bg-transparent p-0 text-rc-gray-100 shadow-md"
+>
+	{@render children()}
+
+	{#if showCloseButton}
+		<Button variant="ghost" onclick={() => dialog.close()} class="absolute right-2 top-2">✕</Button>
+	{/if}
+</dialog>
+
+<style lang="postcss">
+	.dialog::backdrop {
+		@apply bg-black/50 backdrop-blur-sm backdrop-filter;
+	}
+</style>

package/src/lib/components/Dropdown.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import type { Snippet } from 'svelte'
+	import type { Placement } from '@popperjs/core'
+	import Popper from './Popper.svelte'
+
+	interface Props {
+		open: boolean
+		anchorEl: HTMLElement | null
+		id: string
+		placement?: Placement
+		offset?: [number, number]
+		flip?: boolean
+		preventOverflow?: boolean
+		onClose: () => void
+		children: Snippet
+	}
+
+	let {
+		open = false,
+		anchorEl = null,
+		id = '',
+		placement = 'bottom-start',
+		offset = [0, 2],
+		flip = true,
+		preventOverflow = true,
+		onClose = () => {},
+		children
+	}: Props = $props()
+
+	let popoverEl: HTMLDivElement | null = $state(null)
+	let popperComponent: Popper | null = $state(null)
+
+	function handleClose() {
+		onClose()
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		if (open && popoverEl && anchorEl) {
+			const target = event.target as Node
+			if (!popoverEl.contains(target) && !anchorEl.contains(target)) {
+				handleClose()
+			}
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && open) {
+			handleClose()
+		}
+	}
+
+	onMount(() => {
+		document.addEventListener('click', handleClickOutside, true)
+		document.addEventListener('keydown', handleKeydown)
+
+		const handleResize = () => {
+			if (popperComponent) {
+				popperComponent.update()
+			}
+		}
+
+		const handleScroll = () => {
+			if (popperComponent) {
+				popperComponent.update()
+			}
+		}
+
+		window.addEventListener('resize', handleResize)
+		window.addEventListener('scroll', handleScroll, true)
+
+		return () => {
+			document.removeEventListener('click', handleClickOutside, true)
+			document.removeEventListener('keydown', handleKeydown)
+			window.removeEventListener('resize', handleResize)
+			window.removeEventListener('scroll', handleScroll, true)
+		}
+	})
+</script>
+
+{#if open && anchorEl}
+	<Popper
+		bind:this={popperComponent}
+		referenceEl={anchorEl}
+		{placement}
+		{offset}
+		{flip}
+		{preventOverflow}
+	>
+		{#snippet children()}
+			<div bind:this={popoverEl} {id} class="popover" role="dialog" aria-modal="true">
+				<div
+					bind:this={popoverEl}
+					{id}
+					class="popover"
+					role="dialog"
+					aria-modal="true"
+					style={`min-width:${anchorEl?.offsetWidth ?? 0}px`}
+				>
+					{@render children()}
+				</div>
+			</div>
+		{/snippet}
+	</Popper>
+{/if}
+
+<style lang="postcss">
+	.popover {
+		@apply z-popover w-fit rounded-lg bg-rc-gray-800 font-sans shadow-xl;
+	}
+</style>