@aravindc26/velu 0.12.7 → 0.12.9

package/src/engine-core/components/view.tsx

@@ -0,0 +1,344 @@
+"use client";
+
+import { createPortal } from "react-dom";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { VeluIcon } from "./icon";
+
+const VELU_VIEW_OPTIONS_KEY = "__veluViewOptions";
+const VELU_VIEW_OPTIONS_EVENT = "velu:view-options";
+const VELU_VIEW_TOC_HOST_ID = "velu-view-toc-host";
+const VELU_TAB_SYNC_KEY = "__veluTabSyncLabel";
+const VELU_TAB_SYNC_EVENT = "velu:tab-sync";
+
+type ViewOption = {
+  title: string;
+  icon?: string;
+  iconType?: string;
+};
+
+const VIEW_ICON_URL: Record<string, string> = {
+  javascript: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg",
+  typescript: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg",
+  python: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
+  java: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
+  ruby: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg",
+  shell: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bash/bash-original.svg",
+  bash: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bash/bash-original.svg",
+  yaml: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/yaml/yaml-original.svg",
+  markdown: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/markdown/markdown-original.svg",
+};
+
+const VIEW_ICON_ALIAS: Record<string, string> = {
+  js: "javascript",
+  jsx: "javascript",
+  javascript: "javascript",
+  ts: "typescript",
+  tsx: "typescript",
+  typescript: "typescript",
+  py: "python",
+  python: "python",
+  java: "java",
+  rb: "ruby",
+  ruby: "ruby",
+  sh: "shell",
+  shell: "shell",
+  bash: "bash",
+  yml: "yaml",
+  yaml: "yaml",
+  md: "markdown",
+  markdown: "markdown",
+};
+
+function normalizeTitle(value: string): string {
+  return value.trim().toLowerCase();
+}
+
+function normalizeIconKey(value: string | undefined): string | undefined {
+  if (!value || !value.trim()) return undefined;
+  const key = value.trim().toLowerCase();
+  return VIEW_ICON_ALIAS[key] ?? key;
+}
+
+function resolveViewIconUrl(icon: string | undefined, title: string): string | undefined {
+  const iconKey = normalizeIconKey(icon);
+  if (iconKey && VIEW_ICON_URL[iconKey]) return VIEW_ICON_URL[iconKey];
+
+  const titleKey = normalizeIconKey(title);
+  if (titleKey && VIEW_ICON_URL[titleKey]) return VIEW_ICON_URL[titleKey];
+  return undefined;
+}
+
+function ViewOptionIcon({ title, icon, iconType }: { title: string; icon?: string; iconType?: string }) {
+  const src = resolveViewIconUrl(icon, title);
+  if (src) {
+    return <img src={src} alt="" aria-hidden="true" className="velu-view-option-icon velu-view-option-icon-img" loading="lazy" decoding="async" />;
+  }
+  if (!icon) return null;
+  return <VeluIcon name={icon} iconType={iconType} className="velu-view-option-icon" />;
+}
+
+function readSharedOptions(): ViewOption[] {
+  if (typeof window === "undefined") return [];
+  const value = (window as any)[VELU_VIEW_OPTIONS_KEY];
+  if (!Array.isArray(value)) return [];
+  return value.filter((item) => item && typeof item.title === "string" && item.title.trim());
+}
+
+function writeSharedOptions(options: ViewOption[]) {
+  if (typeof window === "undefined") return;
+  (window as any)[VELU_VIEW_OPTIONS_KEY] = options;
+}
+
+function upsertSharedOption(option: ViewOption): ViewOption[] {
+  const existing = readSharedOptions();
+  const key = normalizeTitle(option.title);
+  const next = [...existing];
+  const index = next.findIndex((item) => normalizeTitle(item.title) === key);
+  if (index >= 0) {
+    next[index] = { ...next[index], ...option };
+  } else {
+    next.push(option);
+  }
+  writeSharedOptions(next);
+  return next;
+}
+
+function broadcastOptions(options: ViewOption[]) {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent(VELU_VIEW_OPTIONS_EVENT, { detail: { options } }));
+}
+
+function readSharedSelected(): string | null {
+  if (typeof window === "undefined") return null;
+  const value = (window as any)[VELU_TAB_SYNC_KEY];
+  return typeof value === "string" && value.trim() ? value : null;
+}
+
+function writeSharedSelected(title: string) {
+  if (typeof window === "undefined") return;
+  (window as any)[VELU_TAB_SYNC_KEY] = title;
+}
+
+function broadcastSelected(title: string) {
+  if (typeof window === "undefined") return;
+  const existing = readSharedSelected();
+  if (existing && normalizeTitle(existing) === normalizeTitle(title)) return;
+  writeSharedSelected(title);
+  window.dispatchEvent(new CustomEvent(VELU_TAB_SYNC_EVENT, { detail: { label: title } }));
+}
+
+function syncTocForVisibleHeadings() {
+  if (typeof document === "undefined") return;
+  const toc = document.getElementById("nd-toc");
+  if (!toc) return;
+
+  const links = Array.from(toc.querySelectorAll<HTMLAnchorElement>('a[href^="#"]'));
+  for (const link of links) {
+    const href = link.getAttribute("href");
+    if (!href || href === "#") continue;
+    const id = decodeURIComponent(href.slice(1));
+    const target = document.getElementById(id);
+    const row = link.closest("li") ?? link.parentElement;
+    if (!row) continue;
+    row.style.display = target ? "" : "none";
+  }
+}
+
+function ensureTocHost(): HTMLDivElement | null {
+  if (typeof document === "undefined") return null;
+  const toc = document.getElementById("nd-toc");
+  if (!toc) return null;
+
+  let host = document.getElementById(VELU_VIEW_TOC_HOST_ID) as HTMLDivElement | null;
+  if (!host) {
+    host = document.createElement("div");
+    host.id = VELU_VIEW_TOC_HOST_ID;
+    host.className = "velu-view-toc-host";
+    toc.prepend(host);
+  }
+  return host;
+}
+
+export function VeluView({
+  title,
+  icon,
+  iconType,
+  children,
+  className,
+}: {
+  title?: string;
+  icon?: string;
+  iconType?: string;
+  children?: ReactNode;
+  className?: string;
+}) {
+  const resolvedTitle = (typeof title === "string" && title.trim()) ? title.trim() : "View";
+  const normalizedResolvedTitle = useMemo(() => normalizeTitle(resolvedTitle), [resolvedTitle]);
+  const [selectedTitle, setSelectedTitle] = useState<string>(resolvedTitle);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [tocHost, setTocHost] = useState<HTMLDivElement | null>(null);
+  const [options, setOptions] = useState<ViewOption[]>(() => {
+    const initial = readSharedOptions();
+    return initial.length ? initial : [{ title: resolvedTitle, icon, iconType }];
+  });
+
+  useEffect(() => {
+    const nextOptions = upsertSharedOption({ title: resolvedTitle, icon, iconType });
+    setOptions(nextOptions);
+    broadcastOptions(nextOptions);
+
+    const existingSelected = readSharedSelected();
+    const hasExistingSelection = Boolean(
+      existingSelected && nextOptions.some((option) => normalizeTitle(option.title) === normalizeTitle(existingSelected)),
+    );
+
+    if (existingSelected && hasExistingSelection) {
+      setSelectedTitle(existingSelected);
+    } else {
+      setSelectedTitle(resolvedTitle);
+      broadcastSelected(resolvedTitle);
+    }
+    queueMicrotask(syncTocForVisibleHeadings);
+
+    const onSelected = (event: Event) => {
+      const detail = (event as CustomEvent<{ title?: string; label?: string }>).detail;
+      const next = detail?.label ?? detail?.title;
+      if (!next || !next.trim()) return;
+      setSelectedTitle(next);
+      queueMicrotask(syncTocForVisibleHeadings);
+    };
+
+    const onOptions = (event: Event) => {
+      const incoming = (event as CustomEvent<{ options?: ViewOption[] }>).detail?.options;
+      const next = Array.isArray(incoming) ? incoming : readSharedOptions();
+      setOptions(next.length ? next : [{ title: resolvedTitle, icon, iconType }]);
+    };
+
+    window.addEventListener(VELU_TAB_SYNC_EVENT, onSelected);
+    window.addEventListener(VELU_VIEW_OPTIONS_EVENT, onOptions);
+    return () => {
+      window.removeEventListener(VELU_TAB_SYNC_EVENT, onSelected);
+      window.removeEventListener(VELU_VIEW_OPTIONS_EVENT, onOptions);
+    };
+  }, [resolvedTitle, icon, iconType]);
+
+  useEffect(() => {
+    let frame = 0;
+    const attachHost = () => {
+      const host = ensureTocHost();
+      if (host) {
+        setTocHost(host);
+        return;
+      }
+      frame = window.requestAnimationFrame(attachHost);
+    };
+    attachHost();
+    return () => {
+      if (frame) window.cancelAnimationFrame(frame);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Element | null;
+      if (target?.closest(`#${VELU_VIEW_TOC_HOST_ID}`)) return;
+      setMenuOpen(false);
+    };
+    const onEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setMenuOpen(false);
+    };
+    window.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("keydown", onEscape);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("keydown", onEscape);
+    };
+  }, [menuOpen]);
+
+  useEffect(() => {
+    if (!options.length) return;
+    const hasCurrent = options.some((option) => normalizeTitle(option.title) === normalizeTitle(selectedTitle));
+    if (hasCurrent) return;
+    const fallback = options[0]?.title;
+    if (!fallback) return;
+    setSelectedTitle(fallback);
+    broadcastSelected(fallback);
+    queueMicrotask(syncTocForVisibleHeadings);
+  }, [options, selectedTitle]);
+
+  const effectiveOptions = options.length ? options : [{ title: resolvedTitle, icon, iconType }];
+  const isActive = normalizeTitle(selectedTitle) === normalizedResolvedTitle;
+  const selectedOption = effectiveOptions.find((option) => normalizeTitle(option.title) === normalizeTitle(selectedTitle))
+    ?? effectiveOptions[0];
+
+  const selectView = (nextTitle: string) => {
+    if (!nextTitle || normalizeTitle(nextTitle) === normalizeTitle(selectedTitle)) return;
+    setSelectedTitle(nextTitle);
+    setMenuOpen(false);
+    broadcastSelected(nextTitle);
+    queueMicrotask(syncTocForVisibleHeadings);
+  };
+
+  const viewSwitcher = (
+    tocHost && isActive && effectiveOptions.length > 1
+      ? createPortal(
+        <div className="velu-view-toc-switcher">
+          <button
+            type="button"
+            className="velu-view-toc-trigger"
+            aria-haspopup="listbox"
+            aria-expanded={menuOpen}
+            onClick={() => setMenuOpen((prev) => !prev)}
+          >
+            {selectedOption ? <ViewOptionIcon title={selectedOption.title} icon={selectedOption.icon} iconType={selectedOption.iconType} /> : null}
+            <span>{selectedOption?.title ?? "View"}</span>
+            <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" className={["velu-view-toc-chevron", menuOpen ? "open" : ""].join(" ")}>
+              <path d="m6 8 4 4 4-4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </button>
+          {menuOpen ? (
+            <div className="velu-view-toc-menu" role="listbox" aria-label="Select view">
+              {effectiveOptions.map((option) => {
+                const key = normalizeTitle(option.title);
+                const selected = normalizeTitle(selectedTitle) === key;
+                return (
+                  <button
+                    key={key}
+                    type="button"
+                    role="option"
+                    aria-selected={selected}
+                    className={["velu-view-toc-option", selected ? "active" : ""].filter(Boolean).join(" ")}
+                    onClick={() => selectView(option.title)}
+                  >
+                    <span className="velu-view-toc-option-main">
+                      <ViewOptionIcon title={option.title} icon={option.icon} iconType={option.iconType} />
+                      <span>{option.title}</span>
+                    </span>
+                    {selected ? (
+                      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" className="velu-view-check">
+                        <path d="m4.5 10.5 3.2 3.2 7.8-7.8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+                      </svg>
+                    ) : null}
+                  </button>
+                );
+              })}
+            </div>
+          ) : null}
+        </div>,
+        tocHost,
+      )
+      : null
+  );
+
+  if (!isActive) {
+    return viewSwitcher;
+  }
+
+  return (
+    <section className={["velu-view", className].filter(Boolean).join(" ")} data-velu-view={resolvedTitle}>
+      {viewSwitcher}
+      <div className="velu-view-content">{children}</div>
+    </section>
+  );
+}

package/src/engine-core/css/assistant.css

@@ -0,0 +1,326 @@
+/* ── Velu AI Assistant ─────────────────────────────────────────────────── */
+
+/* Fixed bottom ask bar */
+.velu-ask-bar {
+  position: fixed;
+  bottom: 1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 200;
+  width: 100%;
+  max-width: 36rem;
+  padding: 0 1rem;
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.velu-ask-bar-hidden {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-50%) translateY(1rem);
+}
+
+.velu-ask-bar-inner {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--color-fd-card, #18181b);
+  border: 1px solid var(--color-fd-border, #27272a);
+  border-radius: 0.75rem;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+}
+
+.velu-ask-input {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--color-fd-foreground, #fafafa);
+}
+
+.velu-ask-input::placeholder {
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+}
+
+.velu-ask-submit {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--color-fd-primary, #818cf8);
+  color: var(--color-fd-primary-foreground, #fff);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.velu-ask-submit:hover { opacity: 0.85; }
+
+/* Right-side assistant panel */
+.velu-assistant-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 22rem;
+  z-index: 50;
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-fd-background, #09090b);
+  border-left: 1px solid var(--color-fd-border, #27272a);
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
+  transition: width 0.2s;
+}
+
+.velu-panel-closed { display: none !important; }
+
+.velu-assistant-expanded { width: 40rem; }
+
+.velu-assistant-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-fd-border, #27272a);
+  flex-shrink: 0;
+}
+
+.velu-assistant-title {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  color: var(--color-fd-foreground, #fafafa);
+}
+
+.velu-assistant-actions {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.velu-assistant-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: none;
+  border: none;
+  border-radius: 0.25rem;
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+  cursor: pointer;
+  pointer-events: auto;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.velu-assistant-action:hover {
+  color: var(--color-fd-foreground, #fafafa);
+  background-color: var(--color-fd-accent, #27272a);
+}
+
+/* Messages area */
+.velu-assistant-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.velu-msg {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.velu-msg-user { align-items: flex-end; }
+.velu-msg-assistant { align-items: flex-start; }
+
+.velu-msg-bubble {
+  max-width: 85%;
+  padding: 0.6rem 0.85rem;
+  border-radius: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  word-break: break-word;
+}
+
+.velu-msg-bubble code {
+  background: var(--color-fd-accent, #27272a);
+  padding: 0.1rem 0.3rem;
+  border-radius: 0.2rem;
+  font-size: 0.85em;
+}
+
+.velu-msg-bubble-user {
+  background: var(--color-fd-primary, #818cf8);
+  color: var(--color-fd-primary-foreground, #fff);
+  border-bottom-right-radius: 0.2rem;
+}
+
+.velu-msg-bubble-assistant {
+  background: var(--color-fd-accent, #27272a);
+  color: var(--color-fd-foreground, #fafafa);
+  border-bottom-left-radius: 0.2rem;
+}
+
+/* Citations */
+.velu-msg-citations {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  padding-left: 0.25rem;
+}
+
+.velu-citation-link {
+  font-size: 0.75rem;
+  color: var(--color-fd-primary, #818cf8);
+  text-decoration: none;
+  padding: 0.15rem 0.4rem;
+  background: var(--color-fd-accent, #27272a);
+  border-radius: 0.25rem;
+  transition: background-color 0.15s;
+}
+
+.velu-citation-link:hover {
+  background: var(--color-fd-border, #3f3f46);
+}
+
+.velu-citation-ref {
+  color: var(--color-fd-primary, #818cf8);
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.8em;
+  vertical-align: super;
+}
+
+/* Message actions */
+.velu-msg-actions {
+  display: flex;
+  gap: 0.15rem;
+  padding-left: 0.25rem;
+}
+
+.velu-msg-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: none;
+  border: none;
+  border-radius: 0.25rem;
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.velu-msg-action:hover {
+  color: var(--color-fd-foreground, #fafafa);
+  background-color: var(--color-fd-accent, #27272a);
+}
+
+/* Thinking dots */
+.velu-thinking-dots {
+  display: inline-flex;
+  gap: 0.3rem;
+  padding: 0.2rem 0;
+}
+
+.velu-thinking-dots span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-fd-muted-foreground, #a1a1aa);
+  animation: veluDotPulse 1.2s infinite;
+}
+
+.velu-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
+.velu-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes veluDotPulse {
+  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+  40% { opacity: 1; transform: scale(1); }
+}
+
+/* Chat input area */
+.velu-assistant-input-area {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--color-fd-border, #27272a);
+  flex-shrink: 0;
+}
+
+.velu-assistant-chat-input {
+  flex: 1;
+  background: var(--color-fd-accent, #27272a);
+  border: 1px solid var(--color-fd-border, #27272a);
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--color-fd-foreground, #fafafa);
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.velu-assistant-chat-input:focus {
+  border-color: var(--color-fd-primary, #818cf8);
+}
+
+.velu-assistant-chat-input::placeholder {
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+}
+
+.velu-assistant-send {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--color-fd-primary, #818cf8);
+  color: var(--color-fd-primary-foreground, #fff);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.velu-assistant-send:hover { opacity: 0.85; }
+
+/* Squeeze page layout when panel is open */
+html.velu-assistant-open body {
+  margin-right: 22rem;
+  transition: margin-right 0.25s ease;
+}
+
+html.velu-assistant-wide body {
+  margin-right: 40rem;
+}
+
+/* Responsive */
+@media (max-width: 50rem) {
+  .velu-assistant-panel {
+    width: 100%;
+  }
+  .velu-assistant-expanded {
+    width: 100%;
+  }
+  .velu-ask-bar {
+    max-width: calc(100% - 2rem);
+  }
+  html.velu-assistant-open body {
+    margin-right: 0;
+  }
+  html.velu-assistant-wide body {
+    margin-right: 0;
+  }
+}