doccupine 0.0.63 → 0.0.65

package/dist/templates/components/Chat.js

@@ -1,3 +1,4 @@
+import { CHAT_WIDTH } from "../app/theme.js";
 export const chatTemplate = `"use client";
 import React, {
   createContext,
@@ -9,17 +10,21 @@ import React, {
 import styled, { css, keyframes } from "styled-components";
 import { rgba } from "polished";
 import { Button } from "cherry-styled-components";
-import { ArrowUp, LoaderPinwheel, Sparkles, X } from "lucide-react";
+import { ArrowUp, LoaderPinwheel, RotateCcw, Sparkles, X } from "lucide-react";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
 import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
 import { serialize } from "next-mdx-remote/serialize";
+import Link from "next/link";
 import { mq, Theme } from "@/app/theme";
+import { useLockBodyScroll } from "@/components/LockBodyScroll";
 import { useMDXComponents as getMDXComponents } from "@/components/MDXComponents";
 import {
   styledAnchor,
   styledTable,
   stylesLists,
+  StyledSmallButton,
+  interactiveStyles,
 } from "@/components/layout/SharedStyled";
 
 const mdxComponents = getMDXComponents({});
@@ -40,7 +45,7 @@ const StyledChat = styled.div<{ theme: Theme; $isVisible: boolean }>\`
   top: 0;
   right: 0;
   width: 100%;
-  height: calc(100vh - 90px);
+  height: calc(100dvh - 90px);
   overflow-y: scroll;
   overflow-x: hidden;
   z-index: 1000;
@@ -49,6 +54,7 @@ const StyledChat = styled.div<{ theme: Theme; $isVisible: boolean }>\`
   transform: translateX(0);
   background: \${({ theme }) => theme.colors.light};
   -webkit-overflow-scrolling: touch;
+  opacity: 1;
 
   &::-webkit-scrollbar {
     display: none;
@@ -58,10 +64,11 @@ const StyledChat = styled.div<{ theme: Theme; $isVisible: boolean }>\`
     !$isVisible &&
     css\`
       transform: translateX(100%);
+      opacity: 0;
     \`}
 
   \${mq("lg")} {
-    width: 420px;
+    width: ${CHAT_WIDTH}px;
     border-left: solid 1px \${({ theme }) => theme.colors.grayLight};
   }
 \`;
@@ -352,15 +359,17 @@ const StyledChatForm = styled.form<{ theme: Theme; $isVisible: boolean }>\`
   border-top: solid 1px \${({ theme }) => theme.colors.grayLight};
   transition: all 0.3s ease;
   transform: translateX(100%);
+  opacity: 0;
 
   \${mq("lg")} {
-    width: 420px;
+    width: ${CHAT_WIDTH}px;
     border-left: solid 1px \${({ theme }) => theme.colors.grayLight};
   }
 
   \${({ $isVisible }) =>
     $isVisible &&
     css\`
+      opacity: 1;
       transform: translateX(0);
     \`}
 
@@ -369,53 +378,94 @@ const StyledChatForm = styled.form<{ theme: Theme; $isVisible: boolean }>\`
   }
 \`;
 
-const StyledChatFixedForm = styled.form<{
+const StyledGlowSmallButton = styled(StyledSmallButton)<{
   theme: Theme;
-  $hide: boolean;
+  $hasContent: boolean;
 }>\`
-  transition: all 0.3s ease;
-  position: fixed;
-  bottom: 20px;
-  left: 20px;
-  width: calc(100% - 115px);
-  z-index: 998;
-
-  \${mq("lg")} {
-    left: 50%;
-    transform: translateX(-50%) translateY(0);
-    bottom: initial;
-    position: absolute;
-    top: 153px;
-    width: calc(100% - 320px * 2 - 40px);
-    opacity: 1;
+  @property --gradient-angle {
+    syntax: "<angle>";
+    initial-value: 0deg;
+    inherits: false;
   }
 
-  \${({ $hide }) =>
-    $hide &&
-    css\`
-      transform: translateX(-100px);
+  position: relative;
+  isolation: isolate;
+  margin-right: 0;
+  background: \${({ theme }) => theme.colors.light};
+  padding: 0;
 
-      \${mq("lg")} {
-        opacity: 0;
-        transform: translateX(-50%) translateY(-20px);
-      }
-    \`}
+  &::before {
+    content: "";
+    inset: -2px;
+    border-radius: 8px;
+    background: conic-gradient(
+      from var(--gradient-angle),
+      #cc5555,
+      #d9a745,
+      #3ab0cc,
+      #cc7fc2,
+      #4380cc,
+      #4c1fa3,
+      #cc5555
+    );
+    opacity: 0;
+    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    animation: \${rotateGradient} 3s linear infinite;
+    z-index: -1;
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+  }
 
-  & .loading {
-    animation: \${loadingAnimation} 1s linear infinite;
+  &::after {
+    content: "";
+    position: absolute;
+    inset: -8px;
+    border-radius: 14px;
+    background: conic-gradient(
+      from var(--gradient-angle),
+      \${rgba("#ff6b6b", 0.4)},
+      \${rgba("#feca57", 0.4)},
+      \${rgba("#48dbfb", 0.4)},
+      \${rgba("#ff9ff3", 0.4)},
+      \${rgba("#54a0ff", 0.4)},
+      \${rgba("#5f27cd", 0.4)},
+      \${rgba("#ff6b6b", 0.4)}
+    );
+    opacity: 0;
+    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    animation:
+      \${rotateGradient} 3s linear infinite,
+      \${pulseGlow} 2s ease-in-out infinite;
+    z-index: -2;
+    pointer-events: none;
   }
-\`;
 
-const StyledChatFixedInner = styled.div\`
-  margin: auto;
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-  align-items: center;
+  &:hover::before,
+  &:hover::after {
+    opacity: 1;
+  }
 
-  \${mq("lg")} {
-    max-width: 640px;
+  & span {
+    padding: 6px 8px;
+    display: flex;
+    background: \${({ theme }) => theme.colors.light};
+    border-radius: \${({ theme }) => theme.spacing.radius.xs};
+    gap: 6px;
   }
+
+  \${({ $hasContent }) =>
+    $hasContent &&
+    css\`
+      &::before {
+        opacity: 1;
+      }
+      &::after {
+        opacity: 1;
+      }
+    \`}
 \`;
 
 const StyledError = styled.div<{ theme: Theme }>\`
@@ -561,6 +611,40 @@ const StyledAnswer = styled.div<{ theme: Theme; $isAnswer: boolean }>\`
   }
 \`;
 
+const StyledSources = styled.div\`
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin: -5px 0 20px;
+\`;
+
+const StyledSourceLink = styled(Link)<{ theme: Theme }>\`
+  position: relative;
+  text-decoration: none;
+  font-size: \${({ theme }) => theme.fontSizes.small.lg};
+  line-height: 1;
+  color: \${({ theme }) => theme.colors.primary};
+  display: flex;
+  gap: 6px;
+  transition: all 0.3s ease;
+  font-weight: 600;
+  white-space: nowrap;
+  min-width: fit-content;
+  background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};
+  padding: 6px 8px;
+  border-radius: \${({ theme }) => theme.spacing.radius.xs};
+  \${interactiveStyles};
+
+  & * {
+    margin: auto 0;
+  }
+
+  &:hover {
+    color: \${({ theme }) =>
+      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
+  }
+\`;
+
 const StyledChatTitle = styled.div<{ theme: Theme }>\`
   display: flex;
   flex-wrap: nowrap;
@@ -578,7 +662,7 @@ const StyledChatTitle = styled.div<{ theme: Theme }>\`
 const StyledChatTitleIconWrapper = styled.span<{ theme: Theme }>\`
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: 12px;
   color: \${({ theme }) => theme.colors.dark};
 \`;
 
@@ -600,10 +684,18 @@ const StyledChatCloseButton = styled.button<{ theme: Theme }>\`
   }
 \`;
 
+type Source = {
+  id: string;
+  path: string;
+  uri: string;
+  score: number;
+};
+
 type Answer = {
   text: string;
   answer?: boolean;
   mdx?: MDXRemoteSerializeResult;
+  sources?: Source[];
 };
 
 const SPARKLE_COLORS = [
@@ -636,6 +728,7 @@ interface RainbowInputProps {
   placeholder?: string;
   autoComplete?: string;
   "aria-label"?: string;
+  inputRef?: React.Ref<HTMLInputElement>;
 }
 
 function RainbowInput({
@@ -645,6 +738,7 @@ function RainbowInput({
   placeholder,
   autoComplete,
   "aria-label": ariaLabel,
+  inputRef,
 }: RainbowInputProps) {
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
@@ -675,6 +769,7 @@ function RainbowInput({
         ))}
       </StyledSparkleContainer>
       <StyledRainbowInput
+        ref={inputRef}
         id={id}
         value={value}
         onChange={onChange}
@@ -688,14 +783,54 @@ function RainbowInput({
   );
 }
 
+function ChatButtonCTA() {
+  const { setIsOpen, isOpen, answer, setAnswer, chatInputRef } =
+    useContext(ChatContext);
+
+  return (
+    <StyledGlowSmallButton
+      onClick={() => {
+        const next = !isOpen;
+        setIsOpen(next);
+        if (next) {
+          if (answer.length === 0) {
+            setAnswer([
+              { text: "Hey there, how can I assist you?", answer: true },
+            ]);
+          }
+          setTimeout(() => {
+            chatInputRef.current?.focus();
+          }, 350);
+        }
+      }}
+      aria-label="Ask AI Assistant"
+      $hasContent={isOpen}
+      type="button"
+    >
+      <span>
+        <Sparkles size={16} />
+        Ask AI
+      </span>
+    </StyledGlowSmallButton>
+  );
+}
+
 function Chat() {
-  const [question, setQuestion] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [answer, setAnswer] = useState<Answer[]>([]);
+  const {
+    isOpen,
+    question,
+    setQuestion,
+    loading,
+    error,
+    answer,
+    ask,
+    closeChat,
+    resetChat,
+    chatInputRef,
+  } = useContext(ChatContext);
   const endRef = useRef<HTMLDivElement | null>(null);
-  const abortRef = useRef<AbortController | null>(null);
-  const { isOpen, setIsOpen } = useContext(ChatContext);
+
+  useLockBodyScroll(isOpen);
 
   useEffect(() => {
     endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
@@ -703,12 +838,150 @@ function Chat() {
 
   useEffect(() => {
     if (answer?.length > 0) {
-      const el = document.getElementById(
-        "chat-bottom-input",
-      ) as HTMLInputElement | null;
-      el?.focus();
+      chatInputRef.current?.focus();
     }
-  }, [answer]);
+  }, [answer, chatInputRef]);
+
+  return (
+    <>
+      <StyledChat $isVisible={isOpen}>
+        <StyledChatTitle>
+          <StyledChatTitleIconWrapper>
+            <Sparkles />
+            <h3>AI Assistant</h3>
+          </StyledChatTitleIconWrapper>
+          <StyledChatTitleIconWrapper>
+            <StyledChatCloseButton
+              onClick={resetChat}
+              aria-label="Reset chat history"
+              title="Reset chat history"
+            >
+              <RotateCcw size={18} />
+            </StyledChatCloseButton>
+            <StyledChatCloseButton
+              onClick={closeChat}
+              aria-label="Close chat"
+              title="Close chat"
+            >
+              <X />
+            </StyledChatCloseButton>
+          </StyledChatTitleIconWrapper>
+        </StyledChatTitle>
+        {answer &&
+          answer.map((a, i) => (
+            <React.Fragment key={i}>
+              <StyledAnswer $isAnswer={a.answer ?? false}>
+                {a.answer && a.mdx ? (
+                  <MDXRemote {...a.mdx} components={mdxComponents} />
+                ) : (
+                  a.text
+                )}
+              </StyledAnswer>
+              {a.answer && a.sources && a.sources.length > 0 && (
+                <StyledSources>
+                  {a.sources.map((src) => {
+                    const slug = src.uri
+                      .replace("docs://", "")
+                      .replace(/^\\/+/, "");
+                    const href = slug ? \`/\${slug}/\` : "/";
+                    const label = slug
+                      ? slug
+                          .split("/")
+                          .pop()!
+                          .replace(/-/g, " ")
+                          .replace(/\\b\\w/g, (c: string) => c.toUpperCase())
+                      : "Home";
+                    return (
+                      <StyledSourceLink key={src.id} href={href}>
+                        {label}
+                      </StyledSourceLink>
+                    );
+                  })}
+                </StyledSources>
+              )}
+            </React.Fragment>
+          ))}
+        {loading && (
+          <StyledLoading>
+            Answering<span>.</span>
+            <span>.</span>
+            <span>.</span>
+          </StyledLoading>
+        )}
+        {error && (
+          <StyledError>
+            <strong>Error:</strong> {error}
+          </StyledError>
+        )}
+        <div ref={endRef} />
+      </StyledChat>
+
+      <StyledChatForm onSubmit={ask} $isVisible={isOpen}>
+        <RainbowInput
+          id="chat-bottom-input"
+          inputRef={chatInputRef}
+          value={question}
+          onChange={(e) => setQuestion(e.target.value)}
+          placeholder="Ask AI Assistant..."
+          autoComplete="off"
+          aria-label="Ask a follow-up question"
+        />
+        <StyledRainbowButton
+          type="submit"
+          disabled={loading || question.trim() === ""}
+          $hasContent={question.trim().length > 0}
+          aria-label={loading ? "Loading response" : "Submit question"}
+        >
+          {loading ? <LoaderPinwheel className="loading" /> : <ArrowUp />}
+        </StyledRainbowButton>
+      </StyledChatForm>
+    </>
+  );
+}
+
+const ChatContext = createContext<{
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  isChatActive: boolean;
+  question: string;
+  setQuestion: (q: string) => void;
+  loading: boolean;
+  error: string | null;
+  answer: Answer[];
+  setAnswer: (answers: Answer[]) => void;
+  ask: (e: React.FormEvent) => void;
+  closeChat: () => void;
+  resetChat: () => void;
+  chatInputRef: React.RefObject<HTMLInputElement | null>;
+}>({
+  isOpen: false,
+  setIsOpen: () => {},
+  isChatActive: false,
+  question: "",
+  setQuestion: () => {},
+  loading: false,
+  error: null,
+  answer: [],
+  setAnswer: () => {},
+  ask: () => {},
+  closeChat: () => {},
+  resetChat: () => {},
+  chatInputRef: { current: null },
+});
+
+interface ChatContextProviderProps {
+  children: React.ReactNode;
+  isChatActive: boolean;
+}
+
+const ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [question, setQuestion] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [answer, setAnswer] = useState<Answer[]>([]);
+  const abortRef = useRef<AbortController | null>(null);
+  const chatInputRef = useRef<HTMLInputElement | null>(null);
 
   async function ask(e: React.FormEvent) {
     e.preventDefault();
@@ -730,7 +1003,6 @@ function Chat() {
     abortRef.current = controller;
 
     try {
-      // Build conversation history from previous Q&A pairs
       const history = answer
         .filter((a) => a.text.trim() !== "")
         .map((a) => ({
@@ -753,11 +1025,11 @@ function Chat() {
       const reader = res.body?.getReader();
       const decoder = new TextDecoder();
       const contentParts: string[] = [];
+      let sources: Source[] = [];
       if (!reader) {
         throw new Error("Failed to get response reader");
       }
 
-      // Add a placeholder for the streaming answer
       const streamingAnswerIndex = mergedQuestions.length;
       setAnswer([...mergedQuestions, { text: "", answer: true }]);
 
@@ -768,7 +1040,6 @@ function Chat() {
 
         buffer += decoder.decode(value, { stream: true });
         const parts = buffer.split("\\n");
-        // Keep the last (potentially incomplete) part in the buffer
         buffer = parts.pop() ?? "";
 
         for (const line of parts) {
@@ -776,7 +1047,15 @@ function Chat() {
             try {
               const data = JSON.parse(line.slice(6));
 
-              if (data.type === "content") {
+              if (data.type === "metadata") {
+                const allSources: Source[] = data.data?.sources ?? [];
+                const seen = new Set<string>();
+                sources = allSources.filter((s: Source) => {
+                  if (s.score < 0.4 || seen.has(s.uri)) return false;
+                  seen.add(s.uri);
+                  return true;
+                });
+              } else if (data.type === "content") {
                 contentParts.push(data.data);
                 const streamedContent = contentParts.join("");
 
@@ -785,6 +1064,7 @@ function Chat() {
                   newAnswers[streamingAnswerIndex] = {
                     text: streamedContent,
                     answer: true,
+                    sources,
                   };
                   return newAnswers;
                 });
@@ -792,7 +1072,6 @@ function Chat() {
                 throw new Error(data.data);
               } else if (data.type === "done") {
                 const streamedContent = contentParts.join("");
-                // Finalize with MDX serialization
                 let mdxSource: MDXRemoteSerializeResult | null = null;
                 try {
                   mdxSource = await serialize(streamedContent, {
@@ -814,6 +1093,7 @@ function Chat() {
                     text: streamedContent,
                     answer: true,
                     mdx: mdxSource || undefined,
+                    sources,
                   };
                   return newAnswers;
                 });
@@ -838,109 +1118,16 @@ function Chat() {
     }
   }
 
-  return (
-    <>
-      <StyledChatFixedForm onSubmit={ask} $hide={answer?.length > 0}>
-        <StyledChatFixedInner>
-          <RainbowInput
-            value={question}
-            onChange={(e) => setQuestion(e.target.value)}
-            placeholder="Ask AI Assistant..."
-            autoComplete="off"
-            aria-label="Ask a question about the documentation"
-          />
-          <StyledRainbowButton
-            type="submit"
-            disabled={loading}
-            $hasContent={question.trim().length > 0}
-            aria-label={loading ? "Loading response" : "Submit question"}
-          >
-            {loading ? <LoaderPinwheel className="loading" /> : <ArrowUp />}
-          </StyledRainbowButton>
-        </StyledChatFixedInner>
-      </StyledChatFixedForm>
-
-      <StyledChat $isVisible={isOpen}>
-        <StyledChatTitle>
-          <StyledChatTitleIconWrapper>
-            <Sparkles />
-            <h3>AI Assistant</h3>
-          </StyledChatTitleIconWrapper>
-          <StyledChatCloseButton
-            onClick={() => {
-              abortRef.current?.abort();
-              setAnswer([]);
-              setIsOpen(false);
-            }}
-            aria-label="Close chat"
-          >
-            <X />
-          </StyledChatCloseButton>
-        </StyledChatTitle>
-        {answer &&
-          answer.map((a, i) => (
-            <StyledAnswer key={i} $isAnswer={a.answer ?? false}>
-              {a.answer && a.mdx ? (
-                <MDXRemote {...a.mdx} components={mdxComponents} />
-              ) : (
-                a.text
-              )}
-            </StyledAnswer>
-          ))}
-        {loading && (
-          <StyledLoading>
-            Answering<span>.</span>
-            <span>.</span>
-            <span>.</span>
-          </StyledLoading>
-        )}
-        {error && (
-          <StyledError>
-            <strong>Error:</strong> {error}
-          </StyledError>
-        )}
-        <div ref={endRef} />
-      </StyledChat>
-
-      <StyledChatForm onSubmit={ask} $isVisible={isOpen}>
-        <RainbowInput
-          id="chat-bottom-input"
-          value={question}
-          onChange={(e) => setQuestion(e.target.value)}
-          placeholder="Ask AI Assistant..."
-          autoComplete="off"
-          aria-label="Ask a follow-up question"
-        />
-        <StyledRainbowButton
-          type="submit"
-          disabled={loading || question.trim() === ""}
-          $hasContent={question.trim().length > 0}
-          aria-label={loading ? "Loading response" : "Submit question"}
-        >
-          {loading ? <LoaderPinwheel className="loading" /> : <ArrowUp />}
-        </StyledRainbowButton>
-      </StyledChatForm>
-    </>
-  );
-}
-
-const ChatContext = createContext<{
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-  isChatActive: boolean;
-}>({
-  isOpen: false,
-  setIsOpen: () => {},
-  isChatActive: false,
-});
-
-interface ChatContextProviderProps {
-  children: React.ReactNode;
-  isChatActive: boolean;
-}
+  function closeChat() {
+    setIsOpen(false);
+  }
 
-const ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {
-  const [isOpen, setIsOpen] = useState(false);
+  function resetChat() {
+    abortRef.current?.abort();
+    setLoading(false);
+    setError(null);
+    setAnswer([{ text: "Hey there, how can I assist you?", answer: true }]);
+  }
 
   return (
     <ChatContext.Provider
@@ -948,6 +1135,16 @@ const ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {
         isOpen,
         setIsOpen,
         isChatActive,
+        question,
+        setQuestion,
+        loading,
+        error,
+        answer,
+        setAnswer,
+        ask,
+        closeChat,
+        resetChat,
+        chatInputRef,
       }}
     >
       {children}
@@ -955,5 +1152,5 @@ const ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {
   );
 };
 
-export { Chat, ChtProvider, ChatContext };
+export { Chat, ChtProvider, ChatContext, ChatButtonCTA };
 `;