shraga 0.0.3 → 0.1.1

package/src/client/components/AuthedImage.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react';
+import { FileText } from 'lucide-react';
+import { useWorkspace } from '@/lib/workspaceContext';
+
+// `/uploads/*` is gated by requireAuth on the server, so a plain <img src>/<a href> GET 401s
+// (no Authorization header). Fetch with a fresh bearer token and render/open a blob URL instead.
+// Other srcs (data:, http(s):, blob:) need no auth.
+const NEEDS_AUTH = /^\/uploads\//;
+
+interface ImageProps {
+  src: string;
+  alt?: string;
+  className?: string;
+  /** Receives the resolved (blob) src so callers like a lightbox render it directly. */
+  onClick?: (resolvedSrc: string) => void;
+}
+
+export function AuthedImage({ src, alt, className, onClick }: ImageProps) {
+  const { getToken } = useWorkspace();
+  const [resolved, setResolved] = useState<string | null>(NEEDS_AUTH.test(src) ? null : src);
+
+  useEffect(() => {
+    if (!NEEDS_AUTH.test(src)) {
+      setResolved(src);
+      return;
+    }
+    let objectUrl: string | null = null;
+    let cancelled = false;
+    setResolved(null);
+    (async () => {
+      try {
+        const token = await getToken();
+        const res = await fetch(src, { headers: token ? { Authorization: `Bearer ${token}` } : {} });
+        if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+        objectUrl = URL.createObjectURL(await res.blob());
+        if (cancelled) URL.revokeObjectURL(objectUrl);
+        else setResolved(objectUrl);
+      } catch (err) {
+        console.error('[authed-image] load failed:', src, err);
+      }
+    })();
+    return () => {
+      cancelled = true;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [src, getToken]);
+
+  if (!resolved) return <div className={className} aria-busy="true" />;
+  return <img src={resolved} alt={alt ?? ''} className={className} onClick={() => onClick?.(resolved)} />;
+}
+
+interface FileLinkProps {
+  src: string;
+  name: string;
+  className?: string;
+}
+
+export function AuthedFileLink({ src, name, className }: FileLinkProps) {
+  const { getToken } = useWorkspace();
+
+  const open = async (e: React.MouseEvent) => {
+    if (!NEEDS_AUTH.test(src)) return; // plain href handles non-upload urls
+    e.preventDefault();
+    try {
+      const token = await getToken();
+      const res = await fetch(src, { headers: token ? { Authorization: `Bearer ${token}` } : {} });
+      if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+      const url = URL.createObjectURL(await res.blob());
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = name;
+      a.click();
+      setTimeout(() => URL.revokeObjectURL(url), 10_000);
+    } catch (err) {
+      console.error('[authed-file] open failed:', src, err);
+    }
+  };
+
+  return (
+    <a href={src} onClick={open} target="_blank" rel="noopener noreferrer" className={className}>
+      <FileText className="w-4 h-4 shrink-0" />
+      <span className="truncate max-w-[200px]">{name}</span>
+    </a>
+  );
+}

package/src/client/components/AutocompleteTextarea.tsx

@@ -0,0 +1,149 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+
+type MentionKind = 'mention' | 'command';
+type Suggestion = { kind: 'skill' | 'workspace'; value: string };
+
+export interface AutocompleteTextareaHandle {
+  focus: () => void;
+  setValue: (text: string) => void;
+}
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  skills?: string[];
+  workspaceFiles?: string[];
+  placeholder?: string;
+  className?: string;
+  rows?: number;
+  disabled?: boolean;
+  autoResize?: boolean;
+  maxHeight?: number;
+  onPaste?: (e: React.ClipboardEvent) => void;
+}
+
+export const AutocompleteTextarea = forwardRef<AutocompleteTextareaHandle, Props>(function AutocompleteTextarea(
+  { value, onChange, onKeyDown, onPaste, skills = [], workspaceFiles = [], placeholder, className, rows = 1, disabled, autoResize = true, maxHeight = 200 },
+  ref,
+) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [mention, setMention] = useState<{ query: string; start: number; kind: MentionKind } | null>(null);
+  const [mentionIdx, setMentionIdx] = useState(0);
+
+  useImperativeHandle(ref, () => ({
+    focus: () => textareaRef.current?.focus(),
+    setValue: (text: string) => {
+      onChange(text);
+      if (autoResize) resizeTextarea();
+    },
+  }));
+
+  const suggestions: Suggestion[] = mention
+    ? [
+        ...skills
+          .filter((s) => s.toLowerCase().includes(mention.query.toLowerCase()))
+          .map((s) => ({ kind: 'skill' as const, value: s })),
+        ...(mention.kind === 'mention'
+          ? workspaceFiles
+              .filter((f) => f.toLowerCase().includes(mention.query.toLowerCase()))
+              .map((f) => ({ kind: 'workspace' as const, value: f }))
+          : []),
+      ]
+    : [];
+
+  function resizeTextarea() {
+    setTimeout(() => {
+      const el = textareaRef.current;
+      if (!el) return;
+      el.style.height = 'auto';
+      el.style.height = Math.min(el.scrollHeight, maxHeight) + 'px';
+    }, 0);
+  }
+
+  const insertMention = (val: string) => {
+    if (!mention) return;
+    const prefix = mention.kind === 'command' ? '/' : '@';
+    const before = value.slice(0, mention.start);
+    const after = value.slice(mention.start + mention.query.length + 1);
+    const newText = `${before}${prefix}${val} ${after}`;
+    onChange(newText);
+    setMention(null);
+    setTimeout(() => {
+      const el = textareaRef.current;
+      if (!el) return;
+      if (autoResize) { el.style.height = 'auto'; el.style.height = Math.min(el.scrollHeight, maxHeight) + 'px'; }
+      const pos = before.length + val.length + 2;
+      el.setSelectionRange(pos, pos);
+      el.focus();
+    }, 0);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (mention && suggestions.length > 0) {
+      if (e.key === 'ArrowDown') { e.preventDefault(); setMentionIdx((i) => (i + 1) % suggestions.length); return; }
+      if (e.key === 'ArrowUp') { e.preventDefault(); setMentionIdx((i) => (i - 1 + suggestions.length) % suggestions.length); return; }
+      if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); insertMention(suggestions[mentionIdx].value); return; }
+      if (e.key === 'Escape') { setMention(null); return; }
+    }
+    onKeyDown?.(e);
+  };
+
+  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const val = e.target.value;
+    onChange(val);
+    const el = e.target;
+    if (autoResize) { el.style.height = 'auto'; el.style.height = Math.min(el.scrollHeight, maxHeight) + 'px'; }
+
+    const cursor = el.selectionStart ?? val.length;
+    const textBefore = val.slice(0, cursor);
+    const slashMatch = textBefore.match(/(?:^|\n)\/([\w-]*)$/);
+    const atMatch = textBefore.match(/@([\w\-./]*)$/);
+    if (slashMatch) {
+      setMention({ query: slashMatch[1], start: slashMatch.index! + (textBefore[slashMatch.index!] === '\n' ? 1 : 0), kind: 'command' });
+      setMentionIdx(0);
+    } else if (atMatch) {
+      setMention({ query: atMatch[1], start: atMatch.index!, kind: 'mention' });
+      setMentionIdx(0);
+    } else {
+      setMention(null);
+    }
+  };
+
+  useEffect(() => {
+    const handler = () => setMention(null);
+    if (mention) document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [mention]);
+
+  return (
+    <div className="relative flex-1 min-w-0">
+      {mention && suggestions.length > 0 && (
+        <div className="absolute bottom-full mb-1 left-0 z-50 bg-background border rounded-lg shadow-lg overflow-hidden min-w-[220px] max-h-64 overflow-y-auto">
+          {suggestions.map((s, i) => (
+            <button
+              key={`${s.kind}:${s.value}`}
+              onMouseDown={(e) => { e.preventDefault(); insertMention(s.value); }}
+              className={`w-full text-left px-3 py-1.5 text-sm hover:bg-accent transition-colors flex items-center gap-2 ${i === mentionIdx ? 'bg-accent' : ''}`}
+            >
+              <span className="text-[10px] uppercase tracking-wide text-muted-foreground shrink-0 w-14">{mention?.kind === 'command' ? 'cmd' : s.kind === 'skill' ? 'skill' : 'file'}</span>
+              <span className="truncate"><span className="text-muted-foreground">{mention?.kind === 'command' ? '/' : '@'}</span>{s.value}</span>
+            </button>
+          ))}
+        </div>
+      )}
+      <textarea
+        ref={textareaRef}
+        value={value}
+        onChange={handleInput}
+        onKeyDown={handleKeyDown}
+        onPaste={onPaste}
+        placeholder={placeholder}
+        disabled={disabled}
+        rows={rows}
+        dir="auto"
+        className={className}
+      />
+    </div>
+  );
+});