File size: 1,697 Bytes
e7c4a86 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
import React, { useMemo } from 'react'
import Image from 'next/image'
import HelpIcon from '@/assets/images/help.svg'
import { SuggestedResponse } from '@/lib/bots/bing/types'
import { useBing } from '@/lib/hooks/use-bing'
import { atom, useAtom } from 'jotai'
type Suggestions = SuggestedResponse[]
const helpSuggestions = ['为什么不回应某些主题', '告诉我更多关于必应的资迅', '必应如何使用 AI?'].map((text) => ({ text }))
const suggestionsAtom = atom<Suggestions>([])
type ChatSuggestionsProps = React.ComponentProps<'div'> & Pick<ReturnType<typeof useBing>, 'setInput'> & { suggestions?: Suggestions }
export function ChatSuggestions({ setInput, suggestions = [] }: ChatSuggestionsProps) {
const [currentSuggestions, setSuggestions] = useAtom(suggestionsAtom)
const toggleSuggestions = (() => {
if (currentSuggestions === helpSuggestions) {
setSuggestions(suggestions)
} else {
setSuggestions(helpSuggestions)
}
})
useMemo(() => {
setSuggestions(suggestions)
window.scrollBy(0, 2000)
}, [suggestions.length])
return currentSuggestions?.length ? (
<div className="py-6">
<div className="suggestion-items">
<button className="rai-button" type="button" aria-label="这是什么?" onClick={toggleSuggestions}>
<Image alt="help" src={HelpIcon} width={24} />
</button>
{
currentSuggestions.map(suggestion => (
<button key={suggestion.text} className="body-1-strong suggestion-container" type="button" onClick={() => setInput(suggestion.text)}>
{suggestion.text}
</button>
))
}
</div>
</div>
) : null
}
|