@lastbrain/ai-ui-react 1.0.78 → 1.0.80

package/src/components/AiPromptPanel.tsx

@@ -6,11 +6,15 @@ import {
   useEffect,
   useRef,
   useLayoutEffect,
+  useMemo,
   type ReactNode,
 } from "react";
 import { createPortal } from "react-dom";
 import {
   BookOpen,
+  Check,
+  Copy,
+  Eye,
   Search,
   Sparkles,
   Star,
@@ -33,6 +37,19 @@ import { AiProvider, useAiContext } from "../context/AiProvider";
 import { useI18n } from "../context/I18nContext";
 import { useLoadingTimer } from "../hooks/useLoadingTimer";
 
+function tryFormatJson(input?: string): { formatted: string; isJson: boolean } {
+  const raw = (input || "").trim();
+  if (!raw) {
+    return { formatted: "", isJson: false };
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    return { formatted: JSON.stringify(parsed, null, 2), isJson: true };
+  } catch {
+    return { formatted: input || "", isJson: false };
+  }
+}
+
 export interface AiPromptPanelProps {
   isOpen: boolean;
   onClose: () => void;
@@ -50,6 +67,8 @@ export interface AiPromptPanelProps {
   apiKey?: string;
   baseUrl?: string;
   showOnlyUserModels?: boolean;
+  contextPreview?: string;
+  contextPreviewTitle?: string;
 }
 
 export interface AiPromptPanelRenderProps {
@@ -114,6 +133,8 @@ function AiPromptPanelInternal({
   apiKey,
   baseUrl,
   showOnlyUserModels = false,
+  contextPreview,
+  contextPreviewTitle,
 }: AiPromptPanelProps) {
   const { t } = useI18n();
   const [selectedModel, setSelectedModel] = useState("");
@@ -127,6 +148,8 @@ function AiPromptPanelInternal({
   const [selectedTag, setSelectedTag] = useState<string | "all">("all");
   const [isGenerating, setIsGenerating] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
+  const [showContextPreview, setShowContextPreview] = useState(false);
+  const [contextCopied, setContextCopied] = useState(false);
   const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null);
   const promptRef = useRef<HTMLTextAreaElement>(null);
   const closeTimeoutRef = useRef<number | null>(null);
@@ -265,6 +288,8 @@ function AiPromptPanelInternal({
     setPrompt("");
     setPromptId(undefined);
     setShowPromptLibrary(false);
+    setShowContextPreview(false);
+    setContextCopied(false);
     setSearchQuery("");
     setSelectedTag("all");
     setIsClosing(false);
@@ -287,6 +312,12 @@ function AiPromptPanelInternal({
     };
   }, []);
 
+  useEffect(() => {
+    if (!contextCopied) return;
+    const timeout = window.setTimeout(() => setContextCopied(false), 1200);
+    return () => window.clearTimeout(timeout);
+  }, [contextCopied]);
+
   useEffect(() => {
     setPortalRoot(document.body);
   }, []);
@@ -340,6 +371,15 @@ function AiPromptPanelInternal({
     adjustPromptHeight();
   }, [prompt]);
 
+  const contextPreviewData = useMemo(
+    () => tryFormatJson(contextPreview),
+    [contextPreview]
+  );
+  const contextPreviewLines = useMemo(
+    () => contextPreviewData.formatted.split("\n"),
+    [contextPreviewData.formatted]
+  );
+
   if (!isOpen) return null;
 
   const activeModelId = selectedModel || modelOptions[0]?.id || "";
@@ -406,6 +446,8 @@ function AiPromptPanelInternal({
   }
 
   const isDrawer = uiMode === "drawer";
+  const hasContextPreview = Boolean(contextPreview?.trim());
+  const contextCharCount = contextPreview?.length || 0;
   const panelContainerStyle = isDrawer
     ? {
         ...aiStyles.modal,
@@ -425,6 +467,78 @@ function AiPromptPanelInternal({
       }
     : aiStyles.modalContent;
 
+  const renderContextLine = (line: string, lineIndex: number) => {
+    if (!contextPreviewData.isJson) {
+      return (
+        <span
+          key={`line-${lineIndex}`}
+          style={{ color: "var(--ai-text-secondary)" }}
+        >
+          {line || " "}
+        </span>
+      );
+    }
+
+    const tokenRegex =
+      /("(?:\\.|[^"\\])*"(?=\s*:)|"(?:\\.|[^"\\])*"|true|false|null|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|[{}[\],:])/g;
+    const parts: ReactNode[] = [];
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+
+    while ((match = tokenRegex.exec(line)) !== null) {
+      const token = match[0];
+      const index = match.index;
+      if (index > lastIndex) {
+        parts.push(
+          <span
+            key={`txt-${lineIndex}-${lastIndex}`}
+            style={{ color: "var(--ai-text-secondary)" }}
+          >
+            {line.slice(lastIndex, index)}
+          </span>
+        );
+      }
+
+      const isKey = /^".*"$/.test(token) && line.slice(match.index).includes(":");
+      const color = isKey
+        ? "#7cc5ff"
+        : /^".*"$/.test(token)
+          ? "#9ad07f"
+          : /^(true|false)$/.test(token)
+            ? "#f4a259"
+            : token === "null"
+              ? "#d3869b"
+              : /^-?\d/.test(token)
+                ? "#f7dc6f"
+                : "var(--ai-text-secondary)";
+
+      parts.push(
+        <span key={`tok-${lineIndex}-${index}`} style={{ color }}>
+          {token}
+        </span>
+      );
+
+      lastIndex = index + token.length;
+    }
+
+    if (lastIndex < line.length) {
+      parts.push(
+        <span
+          key={`txt-end-${lineIndex}`}
+          style={{ color: "var(--ai-text-secondary)" }}
+        >
+          {line.slice(lastIndex)}
+        </span>
+      );
+    }
+
+    return (
+      <span key={`line-${lineIndex}`} style={{ whiteSpace: "pre" }}>
+        {parts.length > 0 ? parts : " "}
+      </span>
+    );
+  };
+
   if (children) {
     return createPortal(
       <div style={panelContainerStyle} onKeyDown={handleKeyDown}>
@@ -755,18 +869,40 @@ function AiPromptPanelInternal({
                       )}
                     </span>
                   </label>
-                  {promptsLoading ? (
-                    <span className="ai-inline-skeleton" aria-hidden="true" />
-                  ) : filteredPrompts.length > 0 ? (
-                    <button
-                      onClick={() => setShowPromptLibrary(true)}
-                      className="ai-inline-btn"
-                    >
-                      <BookOpen size={14} />
-                      {t("prompt.modal.browsePrompts", "Browse Prompts")} (
-                      {filteredPrompts.length})
-                    </button>
-                  ) : null}
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      flexWrap: "wrap",
+                      justifyContent: "flex-end",
+                      gap: "8px",
+                    }}
+                  >
+                    {hasContextPreview ? (
+                      <button
+                        type="button"
+                        onClick={() => setShowContextPreview(true)}
+                        className="ai-inline-btn"
+                        style={{ whiteSpace: "nowrap" }}
+                      >
+                        <Eye size={14} />
+                        {t("prompt.modal.contextPreview", "Context preview")}
+                      </button>
+                    ) : null}
+                    {promptsLoading ? (
+                      <span className="ai-inline-skeleton" aria-hidden="true" />
+                    ) : filteredPrompts.length > 0 ? (
+                      <button
+                        onClick={() => setShowPromptLibrary(true)}
+                        className="ai-inline-btn"
+                        style={{ whiteSpace: "nowrap" }}
+                      >
+                        <BookOpen size={14} />
+                        {t("prompt.modal.browsePrompts", "Browse Prompts")} (
+                        {filteredPrompts.length})
+                      </button>
+                    ) : null}
+                  </div>
                 </div>
                 <textarea
                   id="prompt-input"
@@ -1124,6 +1260,137 @@ function AiPromptPanelInternal({
           )}
         </div>
 
+        {showContextPreview ? (
+          <div
+            style={{
+              position: "absolute",
+              inset: 0,
+              zIndex: 12,
+              background: "var(--ai-overlay)",
+              backdropFilter: "blur(3px)",
+              WebkitBackdropFilter: "blur(3px)",
+              display: "flex",
+              alignItems: "stretch",
+              justifyContent: "center",
+              padding: "10px",
+            }}
+            onClick={() => setShowContextPreview(false)}
+          >
+            <div
+              style={{
+                width: "min(980px, 100%)",
+                maxHeight: "100%",
+                background: "var(--ai-bg-secondary)",
+                border: "1px solid var(--ai-border)",
+                borderRadius: "12px",
+                boxShadow: "var(--ai-shadow-lg)",
+                overflow: "hidden",
+                display: "flex",
+                flexDirection: "column",
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div
+                style={{
+                  padding: "12px 14px",
+                  borderBottom: "1px solid var(--ai-border)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  gap: "10px",
+                }}
+              >
+                <div style={{ minWidth: 0 }}>
+                  <div style={{ fontSize: "14px", fontWeight: 600 }}>
+                    {contextPreviewTitle ||
+                      t("prompt.modal.contextPreview", "Context preview")}
+                  </div>
+                  <div
+                    style={{
+                      marginTop: "2px",
+                      fontSize: "12px",
+                      color: "var(--ai-text-secondary)",
+                    }}
+                  >
+                    {t("prompt.modal.contextChars", "{count} chars", {
+                      count: contextCharCount.toLocaleString(),
+                    })}
+                  </div>
+                </div>
+                <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                  <button
+                    type="button"
+                    className="ai-inline-btn"
+                    onClick={async () => {
+                      try {
+                        await navigator.clipboard.writeText(
+                          contextPreviewData.formatted || ""
+                        );
+                        setContextCopied(true);
+                      } catch {
+                        setContextCopied(false);
+                      }
+                    }}
+                    style={{ whiteSpace: "nowrap" }}
+                  >
+                    {contextCopied ? <Check size={14} /> : <Copy size={14} />}
+                    {contextCopied
+                      ? t("common.copied", "Copied")
+                      : t("common.copy", "Copy")}
+                  </button>
+                  <button
+                    type="button"
+                    className="ai-icon-btn"
+                    onClick={() => setShowContextPreview(false)}
+                    aria-label={t("common.closeLabel", "Close")}
+                  >
+                    ×
+                  </button>
+                </div>
+              </div>
+              <pre
+                style={{
+                  margin: 0,
+                  padding: "14px",
+                  flex: 1,
+                  overflow: "auto",
+                  background: "color-mix(in srgb, var(--ai-bg) 70%, transparent)",
+                  borderTop: "1px solid var(--ai-border)",
+                  fontFamily:
+                    "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+                  fontSize: "12px",
+                  lineHeight: 1.5,
+                }}
+              >
+                {contextPreviewLines.map((line, index) => (
+                  <div
+                    key={`context-line-${index}`}
+                    style={{
+                      display: "grid",
+                      gridTemplateColumns: "44px 1fr",
+                      gap: "12px",
+                      minHeight: "18px",
+                    }}
+                  >
+                    <span
+                      style={{
+                        color: "var(--ai-text-tertiary)",
+                        textAlign: "right",
+                        userSelect: "none",
+                        paddingRight: "8px",
+                        borderRight: "1px solid var(--ai-border)",
+                      }}
+                    >
+                      {index + 1}
+                    </span>
+                    {renderContextLine(line, index)}
+                  </div>
+                ))}
+              </pre>
+            </div>
+          </div>
+        ) : null}
+
         <div
           style={{
             ...aiStyles.modalFooter,

package/src/components/AiSelect.tsx

@@ -50,21 +50,20 @@ export function AiSelect({
   // Rendre l'authentification optionnelle
   let lbStatus: string | undefined;
   let lbHasSession = false;
-  let lbHasSelectedKey = false;
   let lbHasSelectedApiKeyCookie = false;
+  let lbHasSelectedKey = false;
   let hasLBProvider = false;
   try {
     const lbContext = useLB();
     lbStatus = lbContext.status;
     lbHasSession = Boolean(lbContext.session?.sessionToken);
-    lbHasSelectedKey = Boolean(lbContext.selectedKey?.id);
     lbHasSelectedApiKeyCookie = lbContext.hasSelectedApiKeyCookie;
+    lbHasSelectedKey = Boolean(lbContext.selectedKey?.id);
     hasLBProvider = true;
   } catch {
     // LBProvider n'est pas disponible, ignorer
     lbStatus = undefined;
     lbHasSession = false;
-    lbHasSelectedKey = false;
     hasLBProvider = false;
   }
 
@@ -93,7 +92,8 @@ export function AiSelect({
     hasLBProvider &&
     lbStatus === "ready" &&
     lbHasSession &&
-    (!lbHasSelectedKey || !lbHasSelectedApiKeyCookie);
+    !lbHasSelectedApiKeyCookie &&
+    !lbHasSelectedKey;
   const isAuthReady =
     !needsApiKeySelection &&
     (lbStatus === "ready" || Boolean(process.env.LB_API_KEY));

package/src/components/AiStatusButton.tsx

@@ -245,8 +245,8 @@ export function AiStatusButton({
   const requiresApiKeySelection =
     lbStatus === "ready" &&
     hasLbSession &&
-    (!lbHasSelectedApiKeyCookie || !hasApiKeySelected) &&
-    apiKeys.length > 0;
+    !lbHasSelectedApiKeyCookie &&
+    !hasApiKeySelected;
   const isApiKeyAuthMode = authTypeValue === "api_key";
 
   const [tooltipStyle, setTooltipStyle] = useState<Record<string, string>>({});
@@ -702,7 +702,7 @@ export function AiStatusButton({
 
       {tooltipNode}
 
-      {showApiKeySelector && apiKeys.length > 0 ? (
+      {showApiKeySelector ? (
         <LBApiKeySelector
           isOpen={showApiKeySelector}
           apiKeys={apiKeys}

package/src/components/AiTextarea.tsx

@@ -64,15 +64,15 @@ export function AiTextarea({
   // Rendre l'authentification optionnelle
   let lbStatus: string | undefined;
   let lbHasSession = false;
-  let lbHasSelectedKey = false;
   let lbHasSelectedApiKeyCookie = false;
+  let lbHasSelectedKey = false;
   let hasLBProvider = false;
   try {
     const lbContext = useLB();
     lbStatus = lbContext.status;
     lbHasSession = Boolean(lbContext.session?.sessionToken);
-    lbHasSelectedKey = Boolean(lbContext.selectedKey?.id);
     lbHasSelectedApiKeyCookie = lbContext.hasSelectedApiKeyCookie;
+    lbHasSelectedKey = Boolean(lbContext.selectedKey?.id);
     hasLBProvider = true;
   } catch {
     // LBProvider n'est pas disponible, ignorer
@@ -97,7 +97,8 @@ export function AiTextarea({
     hasLBProvider &&
     lbStatus === "ready" &&
     lbHasSession &&
-    (!lbHasSelectedKey || !lbHasSelectedApiKeyCookie);
+    !lbHasSelectedApiKeyCookie &&
+    !lbHasSelectedKey;
 
   const { models: _models } = useAiModels({
     baseUrl,
@@ -254,8 +255,18 @@ export function AiTextarea({
         />
         <button
           className={`ai-control-action ai-spark ${sizeClass} ${radiusClass}`}
-          onClick={hasConfiguration ? handleQuickGenerate : handleOpenPanel}
-          disabled={disabled || loading || !isAuthReady}
+          onClick={() => {
+            if (!isAuthReady) {
+              setShowAuthModal(true);
+              return;
+            }
+            if (hasConfiguration) {
+              void handleQuickGenerate();
+              return;
+            }
+            handleOpenPanel();
+          }}
+          disabled={disabled || loading}
           type="button"
           title={
             !isAuthReady

package/src/components/LBApiKeySelector.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { CheckCircle2, KeyRound, Loader2, XCircle } from "lucide-react";
+import { createPortal } from "react-dom";
 import type { LBApiKey } from "@lastbrain/ai-ui-core";
 import { useI18n } from "../context/I18nContext";
 
@@ -19,12 +20,18 @@ export function LBApiKeySelector({
   isOpen,
 }: LBApiKeySelectorProps) {
   const { t } = useI18n();
+  const [canPortal, setCanPortal] = useState(false);
   const [selectedKeyId, setSelectedKeyId] = useState<string>(
     apiKeys.find((k) => k.isActive)?.id || apiKeys[0]?.id || ""
   );
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
+  useEffect(() => {
+    setCanPortal(true);
+    return () => setCanPortal(false);
+  }, []);
+
   if (!isOpen) return null;
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -50,7 +57,7 @@ export function LBApiKeySelector({
     }
   };
 
-  return (
+  const modal = (
     <div className="ai-signin-overlay" onClick={onCancel}>
       <div
         className="ai-signin-panel ai-key-modal-panel"
@@ -169,4 +176,9 @@ export function LBApiKeySelector({
       </div>
     </div>
   );
+
+  if (!canPortal) {
+    return modal;
+  }
+  return createPortal(modal, document.body);
 }

package/src/components/UsageToast.tsx

@@ -121,7 +121,7 @@ export function UsageToast({
         padding: "4px 6px",
         borderRadius: "6px",
         marginBottom: "4px",
-        right: "6px",
+        right: "52px",
         background: "rgba(22, 163, 74, 0.12)",
         border: "1px solid rgba(22, 163, 74, 0.3)",
         color: "#16a34a",