|
1 | | -import { useCallback, useRef, useState } from "react" |
| 1 | +import { useCallback } from "react" |
2 | 2 | import { cn } from "../../lib/utils" |
3 | 3 | import { Button } from "../ui/button" |
4 | | -import { ChevronDown, ChevronUp } from "lucide-react" |
5 | 4 |
|
6 | 5 | interface FollowUpSuggestProps { |
7 | | - suggestions?: { answer: string; id?: string }[] |
| 6 | + suggestions?: string[] |
8 | 7 | onSuggestionClick?: (answer: string) => void |
9 | 8 | ts: number |
10 | 9 | } |
11 | 10 |
|
12 | 11 | const FollowUpSuggest = ({ suggestions = [], onSuggestionClick, ts = 1 }: FollowUpSuggestProps) => { |
13 | | - const [isExpanded, setIsExpanded] = useState(false) |
14 | | - const buttonRef = useRef<HTMLButtonElement>(null) |
15 | | - |
16 | 12 | const handleSuggestionClick = useCallback( |
17 | | - (suggestion: { answer: string; }) => { |
18 | | - onSuggestionClick?.(suggestion.answer) |
| 13 | + (suggestion: string) => { |
| 14 | + onSuggestionClick?.(suggestion) |
19 | 15 | }, |
20 | 16 | [onSuggestionClick], |
21 | 17 | ) |
22 | 18 |
|
23 | | - const toggleExpand = useCallback(() => { |
24 | | - setIsExpanded((prev) => !prev) |
25 | | - |
26 | | - // Use setTimeout to ensure the DOM has updated before scrolling |
27 | | - setTimeout(() => { |
28 | | - if (buttonRef.current) { |
29 | | - // Use scrollIntoView to ensure the button is visible |
30 | | - buttonRef.current.scrollIntoView({ behavior: "smooth", block: "nearest" }) |
31 | | - } |
32 | | - }, 100) // Increased timeout to ensure DOM updates |
33 | | - }, []) |
34 | | - |
35 | 19 | // Don't render if there are no suggestions or no click handler |
36 | 20 | if (!suggestions?.length || !onSuggestionClick) { |
37 | 21 | return null |
38 | 22 | } |
39 | 23 |
|
40 | | - const displayedSuggestions = isExpanded ? suggestions : suggestions.slice(0, 1) |
41 | | - |
42 | 24 | return ( |
43 | | - <div className="h-full" aria-label="Next step suggestions"> |
| 25 | + <div className="h-full"> |
44 | 26 | <div className="h-full scrollbar-thin scrollbar-thumb-vscode-scrollbarSlider-background scrollbar-track-transparent"> |
45 | 27 | <div className={cn("flex gap-2.5 pb-2 flex-col h-full")}> |
46 | | - {displayedSuggestions.map((suggestion) => ( |
47 | | - <div key={`${suggestion.answer}-${ts}`} className="w-full"> |
| 28 | + {suggestions.map((suggestion) => ( |
| 29 | + <div key={`${suggestion}-${ts}`} className="w-full"> |
48 | 30 | <Button |
49 | | - variant="ui-toolkit-primary-no-border" |
50 | | - className={cn( |
51 | | - "text-left", |
52 | | - "focus:outline-none", |
53 | | - "overflow-hidden", |
54 | | - "w-full", |
55 | | - "group h-full", |
56 | | - "rounded-[3px]", |
57 | | - "p-[9px] whitespace-pre-wrap break-words overflow-wrap-anywhere", |
58 | | - )} |
| 31 | + variant="outline" |
| 32 | + className="w-full text-left whitespace-normal break-words h-auto min-h-[28px] py-2 justify-start" |
59 | 33 | onClick={() => handleSuggestionClick(suggestion)} |
60 | | - aria-label={`${suggestion.answer}`}> |
61 | | - <div className="relative h-full w-full"> |
62 | | - <div className="flex justify-between items-start gap-2.5 h-full w-full"> |
63 | | - <span className="block flex-grow p-1 whitespace-pre-wrap break-words overflow-wrap-anywhere w-full h-full pb-6"> |
64 | | - {suggestion.answer} |
65 | | - </span> |
66 | | - </div> |
67 | | - </div> |
| 34 | + aria-label={suggestion}> |
| 35 | + <span className="text-left">{suggestion}</span> |
68 | 36 | </Button> |
69 | 37 | </div> |
70 | 38 | ))} |
71 | | - {suggestions.length > 1 && ( |
72 | | - <Button |
73 | | - ref={buttonRef} |
74 | | - variant="ghost" |
75 | | - size="sm" |
76 | | - className="flex items-center gap-1" |
77 | | - onClick={toggleExpand} |
78 | | - aria-label={isExpanded ? "Show less suggestions" : "Show more suggestions"}> |
79 | | - {isExpanded ? ( |
80 | | - <> |
81 | | - <ChevronUp className="w-4 h-4" /> |
82 | | - Show Less |
83 | | - </> |
84 | | - ) : ( |
85 | | - <> |
86 | | - <ChevronDown className="w-4 h-4" /> |
87 | | - Show More ({suggestions.length - 1} more) |
88 | | - </> |
89 | | - )} |
90 | | - </Button> |
91 | | - )} |
92 | 39 | </div> |
93 | 40 | </div> |
94 | 41 | </div> |
|
0 commit comments