code2024/bingo

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