Message

1"use client";
2 
3import * as React from "react";
4import { Slot } from "@radix-ui/react-slot";
5import { Streamdown } from "streamdown";
6import { cjk } from "@streamdown/cjk";
7import { code } from "@streamdown/code";
8import { math } from "@streamdown/math";
9import { mermaid } from "@streamdown/mermaid";
10 
11import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
12import { CodeBlock } from "@/components/nexus-ui/codeblock";
13import {
14  Tooltip,
15  TooltipContent,
16  TooltipProvider,
17  TooltipTrigger,
18} from "@/components/ui/tooltip";
19import { Kbd } from "@/components/ui/kbd";
20import { cn } from "@/lib/utils";
21 
22const streamdownPlugins = { cjk, code, math, mermaid } as const;
23 
24const messageMarkdownProseClasses = [
25  "prose max-w-none text-primary font-normal text-sm leading-6.5",
26  // headings
27  "prose-headings:font-[450] prose-headings:leading-5.5 prose-h2:tracking-[-0.45px] prose-headings:mb-4 prose-headings:mt-6 prose-h1:text-xl prose-h2:text-lg prose-h3:text-base prose-h3:leading-4.5 prose-h3:tracking-[-0.4px] prose-h4:text-sm prose-h5:text-xs prose-h6:text-xs",
28  // heading links
29  "prose-headings:[&_a]:no-underline prose-headings:[&_a]:shadow-none prose-headings:[&_a]:text-inherit",
30  // body text
31  "prose-p:mb-1 prose-p:mt-4",
32  // lead
33  "prose-lead:text-primary",
34  // links
35  "[&_[data-streamdown=link]]:text-foreground [&_[data-streamdown=link]]:font-normal [&_[data-streamdown=link]]:underline [&_[data-streamdown=link]]:underline-offset-2",
36  // strong
37  "[&_[data-streamdown=strong]]:text-foreground [&_[data-streamdown=strong]]:font-[550]",
38  // lists
39  "prose-li:my-[-0.5px] prose-li:marker:text-muted-foreground/50 prose-ul:my-0 prose-ol:my-0 prose-ol:pl-3",
40] as const;
41 
42type MessageFrom = "user" | "assistant";
43 
44type MessageContextValue = {
45  from: MessageFrom;
46};
47 
48const MessageContext = React.createContext<MessageContextValue | null>(null);
49 
50function useMessageContext() {
51  return React.useContext(MessageContext);
52}
53 
54type MessageProps = React.HTMLAttributes<HTMLDivElement> & {
55  from: MessageFrom;
56};
57 
58const Message = React.forwardRef<HTMLDivElement, MessageProps>(function Message(
59  {
60    className,
61    from,
62    children,
63    "aria-label": ariaLabelProp,
64    "aria-labelledby": ariaLabelledBy,
65    ...props
66  },
67  ref,
68) {
69  const ariaLabel =
70    ariaLabelProp ??
71    (ariaLabelledBy == null
72      ? from === "user"
73        ? "User message"
74        : "Assistant message"
75      : undefined);
76 
77  return (
78// … truncated