@dust-tt/sparkle 0.2.640 → 0.2.641-rc-2

package/src/components/ConversationMessage.tsx

@@ -39,13 +39,18 @@ interface ConversationMessageProps
   pictureUrl?: string | React.ReactNode | null;
   renderName?: (name: string | null) => React.ReactNode;
   infoChip?: React.ReactNode;
+  type: ConversationMessageType;
 }
 
+export type ConversationMessageType = "user" | "agent" | "agentAsTool";
+
 const messageVariants = cva("s-flex s-w-full s-flex-col s-rounded-2xl", {
   variants: {
     type: {
       user: "s-bg-muted-background dark:s-bg-muted-background-night s-px-5 s-py-4 s-gap-2",
       agent: "s-w-full s-gap-3",
+      agentAsTool:
+        "s-w-full s-gap-3 s-border s-border-border dark:s-border-border-night s-rounded-2xl s-px-5 s-py-5",
     },
   },
   defaultVariants: {
@@ -58,6 +63,7 @@ const buttonsVariants = cva("s-flex s-justify-start s-gap-2 s-pt-2", {
     type: {
       user: "s-justify-end",
       agent: "s-justify-start",
+      agentAsTool: "s-justify-start",
     },
   },
   defaultVariants: {
@@ -101,9 +107,10 @@ export const ConversationMessage = React.forwardRef<
             isDisabled={isDisabled}
             renderName={renderName}
             infoChip={infoChip}
+            type={type}
           />
 
-          <ConversationMessageContent citations={citations}>
+          <ConversationMessageContent citations={citations} type={type}>
             {children}
           </ConversationMessageContent>
         </div>
@@ -123,12 +130,13 @@ interface ConversationMessageContentProps
   extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   citations?: React.ReactElement[];
+  type: ConversationMessageType;
 }
 
 export const ConversationMessageContent = React.forwardRef<
   HTMLDivElement,
   ConversationMessageContentProps
->(({ children, citations, className, ...props }, ref) => {
+>(({ children, citations, className, type, ...props }, ref) => {
   return (
     <div
       ref={ref}
@@ -140,8 +148,9 @@ export const ConversationMessageContent = React.forwardRef<
     >
       <div
         className={cn(
-          "s-text-sm @sm:s-text-base @md:s-px-4",
-          "s-text-foreground dark:s-text-foreground-night"
+          "s-text-sm @sm:s-text-base",
+          "s-text-foreground dark:s-text-foreground-night",
+          type !== "agentAsTool" && "@md:s-px-4"
         )}
       >
         {children}
@@ -164,6 +173,7 @@ interface ConversationMessageHeaderProps
   timestamp?: string;
   infoChip?: React.ReactNode;
   renderName: (name: string | null) => React.ReactNode;
+  type: ConversationMessageType;
 }
 
 export const ConversationMessageHeader = React.forwardRef<
@@ -178,6 +188,7 @@ export const ConversationMessageHeader = React.forwardRef<
       name = "",
       timestamp,
       infoChip,
+      type,
       renderName,
       className,
       ...props
@@ -193,26 +204,30 @@ export const ConversationMessageHeader = React.forwardRef<
         )}
         {...props}
       >
-        <Avatar
-          className="@sm:s-hidden"
-          name={name}
-          visual={avatarUrl}
-          busy={isBusy}
-          disabled={isDisabled}
-          size="xs"
-        />
-        <Avatar
-          className="s-hidden @sm:s-flex"
-          name={name}
-          visual={avatarUrl}
-          busy={isBusy}
-          disabled={isDisabled}
-          size="sm"
-        />
+        {type !== "agentAsTool" && (
+          <>
+            <Avatar
+              className="@sm:s-hidden"
+              name={name}
+              visual={avatarUrl}
+              busy={isBusy}
+              disabled={isDisabled}
+              size="xs"
+            />
+            <Avatar
+              className="s-hidden @sm:s-flex"
+              name={name}
+              visual={avatarUrl}
+              busy={isBusy}
+              disabled={isDisabled}
+              size="sm"
+            />
+          </>
+        )}
         <div className="s-flex s-w-full s-flex-row s-justify-between s-gap-0.5">
           <div
             className={cn(
-              "s-text-sm s-font-semibold @sm:s-text-base",
+              "s-heading-sm @sm:s-text-base",
               "s-text-foreground dark:s-text-foreground-night",
               "s-flex s-flex-row s-items-center s-gap-2"
             )}

package/src/components/markdown/Markdown.tsx

@@ -27,6 +27,8 @@ import {
 import { sanitizeContent } from "@sparkle/components/markdown/utils";
 import { cn } from "@sparkle/lib/utils";
 
+import { useAnimatedText } from "./useAnimatedText";
+
 const sizes = {
   p: "s-copy-sm @sm:s-text-base @sm:s-leading-7",
   h1: "s-heading-2xl",
@@ -49,25 +51,34 @@ function showUnsupportedDirective() {
   };
 }
 
+interface MarkdownProps {
+  content: string;
+  isStreaming?: boolean;
+  shouldAnimateOnStream?: boolean;
+  textColor?: string;
+  isLastMessage?: boolean;
+  forcedTextSize?: string;
+  additionalMarkdownComponents?: Components;
+  additionalMarkdownPlugins?: PluggableList;
+}
+
 export function Markdown({
   content,
   isStreaming = false,
+  shouldAnimateOnStream = false,
   textColor = "s-text-foreground dark:s-text-foreground-night",
   forcedTextSize,
   isLastMessage = false,
   additionalMarkdownComponents,
   additionalMarkdownPlugins,
-}: {
-  content: string;
-  isStreaming?: boolean;
-  textColor?: string;
-  isLastMessage?: boolean;
-  forcedTextSize?: string;
-  additionalMarkdownComponents?: Components;
-  additionalMarkdownPlugins?: PluggableList;
-}) {
+}: MarkdownProps) {
   const processedContent = useMemo(() => sanitizeContent(content), [content]);
 
+  const markdownContent = useAnimatedText(
+    processedContent,
+    isStreaming && !shouldAnimateOnStream
+  );
+
   // Note on re-renderings. A lot of effort has been put into preventing rerendering across markdown
   // AST parsing rounds (happening at each token being streamed).
   //
@@ -221,7 +232,7 @@ export function Markdown({
 
   try {
     return (
-      <div className={cn("s-w-full", isStreaming ? "s-blinking-cursor" : "")}>
+      <div className={cn("s-w-full")}>
         <MarkdownContentContext.Provider
           value={{
             content: processedContent,
@@ -235,14 +246,14 @@ export function Markdown({
             remarkPlugins={markdownPlugins}
             rehypePlugins={rehypePlugins}
           >
-            {processedContent}
+            {markdownContent}
           </ReactMarkdown>
         </MarkdownContentContext.Provider>
       </div>
     );
   } catch (error) {
     return (
-      <div className={cn("s-w-full", isStreaming ? "s-blinking-cursor" : "")}>
+      <div className={cn("s-w-full")}>
         <Chip color="warning">
           There was an error parsing this markdown content
         </Chip>

package/src/components/markdown/useAnimatedText.ts

@@ -0,0 +1,38 @@
+import { animate, type Easing } from "framer-motion";
+import { useEffect, useState } from "react";
+
+export function useAnimatedText(
+  text: string,
+  shouldAnimate: boolean,
+  options?: {
+    duration?: number;
+    ease?: Easing;
+  }
+) {
+  const [cursor, setCursor] = useState(0);
+  const [startingCursor, setStartingCursor] = useState(0);
+  const [prevText, setPrevText] = useState(text);
+
+  if (prevText !== text) {
+    setPrevText(text);
+    setStartingCursor(text.startsWith(prevText) ? cursor : 0);
+  }
+
+  useEffect(() => {
+    const controls = animate(startingCursor, text.length, {
+      duration: options?.duration ?? 4,
+      ease: options?.ease ?? "easeOut",
+      onUpdate(latest) {
+        setCursor(Math.floor(latest));
+      },
+    });
+
+    return () => controls.stop();
+  }, [startingCursor, text, options?.duration, options?.ease]);
+
+  if (!shouldAnimate) {
+    return text;
+  }
+
+  return text.slice(0, cursor);
+}

package/src/icons/actions/Atom.tsx

@@ -10,7 +10,7 @@ const SvgAtom = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      fill="#000"
+      fill="currentColor"
       fillRule="evenodd"
       d="M14.974 2.284c.831-.248 1.733-.268 2.526.19.793.458 1.227 1.249 1.428 2.093.2.841.196 1.827.047 2.866-.029.196-.065.396-.104.599.196.068.387.137.571.21.975.39 1.83.88 2.46 1.474C22.531 10.313 23 11.084 23 12c0 .915-.468 1.687-1.099 2.283-.628.594-1.484 1.084-2.459 1.473-.184.074-.375.143-.57.211.038.204.074.404.103.6.15 1.039.153 2.025-.047 2.866-.201.844-.635 1.635-1.428 2.093-.793.458-1.695.438-2.526.19-.83-.247-1.681-.743-2.506-1.392a12.997 12.997 0 0 1-.468-.389c-.157.136-.312.266-.468.389-.825.649-1.677 1.145-2.506 1.392-.831.248-1.733.268-2.526-.19-.793-.458-1.227-1.249-1.428-2.093-.2-.841-.196-1.827-.047-2.866.029-.196.064-.396.103-.6a13.01 13.01 0 0 1-.57-.21c-.975-.39-1.83-.88-2.46-1.474C1.469 13.687 1 12.915 1 12c0-.916.468-1.687 1.099-2.284.628-.594 1.484-1.083 2.459-1.473.184-.074.374-.143.57-.211-.04-.203-.074-.403-.103-.599-.15-1.039-.153-2.025.047-2.866.201-.844.635-1.635 1.428-2.093.793-.458 1.695-.438 2.526-.19.83.247 1.681.743 2.506 1.392.156.123.312.253.468.388.156-.135.312-.265.468-.388.825-.649 1.677-1.145 2.506-1.392ZM7.06 16.502a10.7 10.7 0 0 0-.056.35c-.128.89-.11 1.605.013 2.118.121.51.319.73.482.825.163.094.452.155.955.005.506-.15 1.134-.492 1.84-1.049.092-.07.182-.146.274-.223a21.574 21.574 0 0 1-1.368-1.683 21.558 21.558 0 0 1-2.14-.343Zm9.878 0c-.677.145-1.394.26-2.141.343a21.577 21.577 0 0 1-1.368 1.683c.092.077.183.152.274.224.707.556 1.335.898 1.84 1.048.504.15.793.089.956-.006.163-.094.36-.314.482-.824.123-.513.141-1.229.013-2.119a10.715 10.715 0 0 0-.056-.35ZM12 17l-.114-.002.113.127.114-.127L12 17Zm0-8c-.582 0-1.15.022-1.698.061A23.841 23.841 0 0 0 8.605 12a23.888 23.888 0 0 0 1.697 2.939 23.855 23.855 0 0 0 3.395 0 23.915 23.915 0 0 0 1.697-2.94 23.902 23.902 0 0 0-1.697-2.937A23.853 23.853 0 0 0 12 9Zm4.33 5.5c-.019.033-.04.065-.058.098l.168-.035-.054-.163c-.02.033-.037.067-.056.1Zm-8.77.063.168.034-.058-.097-.057-.1-.053.163Zm10.808-4.59c-.212.66-.47 1.338-.772 2.027.301.688.56 1.366.772 2.025.113-.041.224-.082.331-.125.835-.334 1.445-.708 1.828-1.07.381-.36.473-.642.473-.83 0-.19-.092-.47-.473-.83-.383-.363-.993-.737-1.828-1.07a10.657 10.657 0 0 0-.33-.127Zm-12.737 0c-.113.041-.223.083-.33.126-.835.334-1.445.708-1.828 1.07-.381.36-.473.642-.473.83 0 .19.092.47.473.83.383.363.993.737 1.828 1.071.107.043.217.084.33.125.212-.659.471-1.337.772-2.025a21.546 21.546 0 0 1-.772-2.027Zm1.929-.537.053.162.057-.098.058-.098-.168.034Zm8.77.064.056.098.053-.162-.168-.035.06.099ZM8.455 4.2c-.503-.15-.792-.089-.955.006-.163.094-.36.314-.482.824-.123.513-.141 1.229-.013 2.119.016.114.035.23.056.349a21.543 21.543 0 0 1 2.14-.345c.446-.605.904-1.17 1.368-1.683-.091-.077-.183-.15-.273-.221-.707-.557-1.335-.898-1.84-1.05Zm8.045.006c-.163-.095-.452-.156-.955-.006-.506.15-1.134.492-1.84 1.049-.091.07-.184.144-.275.221a21.56 21.56 0 0 1 1.368 1.683c.747.083 1.464.199 2.14.345.021-.119.04-.235.057-.349.128-.89.11-1.606-.013-2.12-.121-.51-.319-.73-.482-.823ZM11.887 7 12 7h.112A17.69 17.69 0 0 0 12 6.874L11.887 7Z"
       clipRule="evenodd"

package/src/icons/app/Atom.tsx

@@ -10,7 +10,7 @@ const SvgAtom = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      fill="#000"
+      fill="currentColor"
       fillRule="evenodd"
       d="M14.974 2.284c.831-.248 1.733-.268 2.526.19.793.458 1.227 1.249 1.428 2.093.2.841.196 1.827.047 2.866-.029.196-.065.396-.104.599.196.068.387.137.571.21.975.39 1.83.88 2.46 1.474C22.531 10.313 23 11.084 23 12c0 .915-.468 1.687-1.099 2.283-.628.594-1.484 1.084-2.459 1.473-.184.074-.375.143-.57.211.038.204.074.404.103.6.15 1.039.153 2.025-.047 2.866-.201.844-.635 1.635-1.428 2.093-.793.458-1.695.438-2.526.19-.83-.247-1.681-.743-2.506-1.392a12.997 12.997 0 0 1-.468-.389c-.157.136-.312.266-.468.389-.825.649-1.677 1.145-2.506 1.392-.831.248-1.733.268-2.526-.19-.793-.458-1.227-1.249-1.428-2.093-.2-.841-.196-1.827-.047-2.866.029-.196.064-.396.103-.6a13.01 13.01 0 0 1-.57-.21c-.975-.39-1.83-.88-2.46-1.474C1.469 13.687 1 12.915 1 12c0-.916.468-1.687 1.099-2.284.628-.594 1.484-1.083 2.459-1.473.184-.074.374-.143.57-.211-.04-.203-.074-.403-.103-.599-.15-1.039-.153-2.025.047-2.866.201-.844.635-1.635 1.428-2.093.793-.458 1.695-.438 2.526-.19.83.247 1.681.743 2.506 1.392.156.123.312.253.468.388.156-.135.312-.265.468-.388.825-.649 1.677-1.145 2.506-1.392ZM7.06 16.502a10.7 10.7 0 0 0-.056.35c-.128.89-.11 1.605.013 2.118.121.51.319.73.482.825.163.094.452.155.955.005.506-.15 1.134-.492 1.84-1.049.092-.07.182-.146.274-.223a21.574 21.574 0 0 1-1.368-1.683 21.558 21.558 0 0 1-2.14-.343Zm9.878 0c-.677.145-1.394.26-2.141.343a21.577 21.577 0 0 1-1.368 1.683c.092.077.183.152.274.224.707.556 1.335.898 1.84 1.048.504.15.793.089.956-.006.163-.094.36-.314.482-.824.123-.513.141-1.229.013-2.119a10.715 10.715 0 0 0-.056-.35ZM12 17l-.114-.002.113.127.114-.127L12 17Zm0-8c-.582 0-1.15.022-1.698.061A23.841 23.841 0 0 0 8.605 12a23.888 23.888 0 0 0 1.697 2.939 23.855 23.855 0 0 0 3.395 0 23.915 23.915 0 0 0 1.697-2.94 23.902 23.902 0 0 0-1.697-2.937A23.853 23.853 0 0 0 12 9Zm4.33 5.5c-.019.033-.04.065-.058.098l.168-.035-.054-.163c-.02.033-.037.067-.056.1Zm-8.77.063.168.034-.058-.097-.057-.1-.053.163Zm10.808-4.59c-.212.66-.47 1.338-.772 2.027.301.688.56 1.366.772 2.025.113-.041.224-.082.331-.125.835-.334 1.445-.708 1.828-1.07.381-.36.473-.642.473-.83 0-.19-.092-.47-.473-.83-.383-.363-.993-.737-1.828-1.07a10.657 10.657 0 0 0-.33-.127Zm-12.737 0c-.113.041-.223.083-.33.126-.835.334-1.445.708-1.828 1.07-.381.36-.473.642-.473.83 0 .19.092.47.473.83.383.363.993.737 1.828 1.071.107.043.217.084.33.125.212-.659.471-1.337.772-2.025a21.546 21.546 0 0 1-.772-2.027Zm1.929-.537.053.162.057-.098.058-.098-.168.034Zm8.77.064.056.098.053-.162-.168-.035.06.099ZM8.455 4.2c-.503-.15-.792-.089-.955.006-.163.094-.36.314-.482.824-.123.513-.141 1.229-.013 2.119.016.114.035.23.056.349a21.543 21.543 0 0 1 2.14-.345c.446-.605.904-1.17 1.368-1.683-.091-.077-.183-.15-.273-.221-.707-.557-1.335-.898-1.84-1.05Zm8.045.006c-.163-.095-.452-.156-.955-.006-.506.15-1.134.492-1.84 1.049-.091.07-.184.144-.275.221a21.56 21.56 0 0 1 1.368 1.683c.747.083 1.464.199 2.14.345.021-.119.04-.235.057-.349.128-.89.11-1.606-.013-2.12-.121-.51-.319-.73-.482-.823ZM11.887 7 12 7h.112A17.69 17.69 0 0 0 12 6.874L11.887 7Z"
       clipRule="evenodd"

package/src/stories/ConversationMessage.stories.tsx

@@ -2,11 +2,14 @@ import type { Meta } from "@storybook/react";
 import React from "react";
 
 import {
+  ArrowPathIcon,
+  AtomIcon,
   Avatar,
   Button,
   Citation,
   CitationIcons,
   CitationTitle,
+  ClipboardIcon,
   ClockIcon,
   ConversationContainer,
   ConversationMessage,
@@ -180,3 +183,100 @@ footnote [^1]
 | October 31  | 19                    | 10                   |
 
 `;
+
+export const ConversationHandoffExample = () => {
+  return (
+    <>
+      <div className="s-flex s-w-full s-justify-center s-gap-6">
+        <ConversationContainer>
+          <ConversationMessage
+            type="user"
+            name="Daph"
+            pictureUrl="https://avatars.githubusercontent.com/u/3803406?v=4"
+            timestamp="17:09"
+          >
+            Can you provide an overview of the major frontier language models
+            and their specificities. I'm curious about technical details,
+            benchmarks, business etc.. I need a complete picture
+          </ConversationMessage>
+          <ConversationMessage
+            type="agent"
+            name="@soupinou"
+            pictureUrl="https://avatars.githubusercontent.com/u/138893015?&v=4"
+            buttons={[
+              <Button
+                icon={ClipboardIcon}
+                onClick={() => {}}
+                size="xs"
+                variant={"outline"}
+              />,
+              <Button
+                icon={ArrowPathIcon}
+                onClick={() => {}}
+                size="xs"
+                variant={"outline"}
+              />,
+            ]}
+          >
+            <Markdown
+              content={
+                "Let me use Deep Dive to explore this comprehensively. I'll need some time to gather all the information."
+              }
+            />
+          </ConversationMessage>
+          <ConversationMessage
+            type="agentAsTool"
+            name="Deep Dive"
+            renderName={(name) => (
+              <span className="s-inline-flex s-items-center s-text-faint dark:s-text-faint-night">
+                <Icon visual={AtomIcon} size="sm" />
+                <span className="s-ml-1">{name}</span>
+              </span>
+            )}
+            citations={[
+              <Citation href="https://www.google.com">
+                <CitationIcons>
+                  <Icon visual={SlackLogo} size="sm" />
+                </CitationIcons>
+                <CitationTitle>
+                  Source: Thread on #general message from @ed
+                </CitationTitle>
+              </Citation>,
+              <Citation href="https://www.google.com">
+                <CitationIcons>
+                  <Icon visual={GithubIcon} size="sm" />
+                </CitationIcons>
+                <CitationTitle>PR from @henry</CitationTitle>
+              </Citation>,
+            ]}
+          >
+            <Markdown content={handoffAnswer} />
+          </ConversationMessage>
+        </ConversationContainer>
+      </div>
+    </>
+  );
+};
+
+const handoffAnswer = `
+**A Complete Technical Overview of Soupinou: The Frontier Feline Model**
+
+Soupinou represents a breakthrough in black cat architecture, featuring a revolutionary single-whisker design that challenges conventional multi-whisker paradigms. This asymmetric sensor configuration demonstrates remarkable efficiency gains in cuddle detection and lap-finding algorithms.
+
+**Technical Specifications:**
+- Processing unit: One (1) whisker sensor array
+- Color depth: Maximum black saturation
+- Purr frequency: Variable, optimized for human dopamine release
+- Cuddle latency: Near-zero response time
+
+**Benchmark Performance:**
+- Achieves 99.7% accuracy in identifying the exact moment you sit down
+- Outperforms all competitors in the "appearing from nowhere when you're sad" metric
+- Sets new industry standards for selective hearing (responds to treat bags but not "get off the counter")
+
+**Business Model:**
+Operates on a simple value exchange - provides unlimited affection in return for food, shelter, and accepting that everything you own now has black fur on it. Market penetration strategy involves strategic placement on keyboards during important work calls.
+
+**Limitations:**
+Occasional system crashes when presented with empty food bowl. Single whisker may cause slight navigation errors when squeezing through spaces designed for two-whiskered models.
+`;

package/src/styles/global.css

@@ -51,15 +51,3 @@
     --tw-checker-color: theme("colors.slate.950"); /* Dark mode pattern color */
   }
 }
-
-.s-blinking-cursor > :not(pre):last-child::after {
-  content: "";
-  width: 8px;
-  height: 16px;
-  @apply s-bg-success-400;
-  display: inline-block;
-  @apply s-animate-cursor-blink;
-  margin-left: 5px;
-  position: relative;
-  top: 4px;
-}

package/src/styles/global_with_tw_base.css

@@ -2,27 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-.s-blinking-cursor > :not(pre):last-child::after {
-  content: "";
-  width: 8px;
-  height: 16px;
-  @apply s-bg-success-400;
-  display: inline-block;
-  @apply s-animate-cursor-blink;
-  margin-left: 5px;
-  position: relative;
-  top: 4px;
-}
-
-@keyframes collapse-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--radix-collapsible-content-height);
-  }
-}
-
 @keyframes collapse-up {
   from {
     height: var(--radix-collapsible-content-height);

package/src/styles/tailwind.css

@@ -2,17 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-.s-blinking-cursor > :not(pre):last-child::after {
-  content: "";
-  width: 8px;
-  height: 16px;
-  @apply s-bg-success-400;
-  display: inline-block;
-  @apply s-animate-cursor-blink;
-  margin-left: 5px;
-  position: relative;
-  top: 4px;
-}
 
 @keyframes bgblink {
   0%,