Prompt Suggestion

1"use client"
2 
3import { Button, buttonVariants } from "@/components/ui/button"
4import { cn } from "@/lib/utils"
5import { VariantProps } from "class-variance-authority"
6 
7export type PromptSuggestionProps = {
8  children: React.ReactNode
9  variant?: VariantProps<typeof buttonVariants>["variant"]
10  size?: VariantProps<typeof buttonVariants>["size"]
11  className?: string
12  highlight?: string
13} & React.ButtonHTMLAttributes<HTMLButtonElement>
14 
15function PromptSuggestion({
16  children,
17  variant,
18  size,
19  className,
20  highlight,
21  ...props
22}: PromptSuggestionProps) {
23  const isHighlightMode = highlight !== undefined && highlight.trim() !== ""
24  const content = typeof children === "string" ? children : ""
25 
26  if (!isHighlightMode) {
27    return (
28      <Button
29        variant={variant || "outline"}
30        size={size || "lg"}
31        className={cn("rounded-full", className)}
32        {...props}
33      >
34        {children}
35      </Button>
36    )
37  }
38 
39  if (!content) {
40    return (
41      <Button
42        variant={variant || "ghost"}
43        size={size || "sm"}
44        className={cn(
45          "w-full cursor-pointer justify-start rounded-xl py-2",
46          "hover:bg-accent",
47          className
48        )}
49        {...props}
50      >
51        {children}
52      </Button>
53    )
54  }
55 
56  const trimmedHighlight = highlight.trim()
57  const contentLower = content.toLowerCase()
58  const highlightLower = trimmedHighlight.toLowerCase()
59  const shouldHighlight = contentLower.includes(highlightLower)
60 
61  return (
62    <Button
63      variant={variant || "ghost"}
64      size={size || "sm"}
65      className={cn(
66        "w-full cursor-pointer justify-start gap-0 rounded-xl py-2",
67        "hover:bg-accent",
68        className
69      )}
70      {...props}
71    >
72      {shouldHighlight ? (
73        (() => {
74          const index = contentLower.indexOf(highlightLower)
75          if (index === -1)
76            return (
77              <span className="text-muted-foreground whitespace-pre-wrap">
78                {content}
79              </span>
80            )
81 
82          const actualHighlightedText = content.substring(
83            index,
84            index + highlightLower.length
85          )
86 
87          const before = content.substring(0, index)
88          const after = content.substring(index + actualHighlightedText.length)
89 
90          return (
91            <>
92              {before && (
93                <span className="text-muted-foreground whitespace-pre-wrap">
94                  {before}
95                </span>
96// … truncated