FLASHback1/bingo

1'use client'2 3import { useCallback, useEffect, useMemo, useState } from 'react'4import { useAtom } from 'jotai'5import Image from 'next/image'6import { cn } from '@/lib/utils'7import { ChatList } from '@/components/chat-list'8import { ChatPanel } from '@/components/chat-panel'9import { WelcomeScreen } from '@/components/welcome-screen'10import { ChatScrollAnchor } from '@/components/chat-scroll-anchor'11import { ToneSelector } from './tone-selector'12import { ChatHeader } from './chat-header'13import { ChatSuggestions } from './chat-suggestions'14import { bingConversationStyleAtom } from '@/state'15import { ButtonScrollToBottom } from '@/components/button-scroll-to-bottom'16import StopIcon from '@/assets/images/stop.svg'17import { useBing } from '@/lib/hooks/use-bing'18import { ChatMessageModel } from '@/lib/bots/bing/types'19import { ChatNotification } from './chat-notification'20import { Settings } from './settings'21import { ChatHistory } from './chat-history'22 23export type ChatProps = React.ComponentProps<'div'> & { initialMessages?: ChatMessageModel[] }24 25export default function Chat({ className }: ChatProps) {26 27  const [bingStyle, setBingStyle] = useAtom(bingConversationStyleAtom)28  const {29    messages,30    sendMessage,31    resetConversation,32    stopGenerating,33    setInput,34    bot,35    input,36    generating,37    isSpeaking,38    uploadImage,39    attachmentList,40    setAttachmentList,41  } = useBing()42 43  useEffect(() => {44    window.scrollTo({45      top: document.body.offsetHeight,46      behavior: 'smooth'47    })48  }, [])49 50  return (51    <div className="flex flex-1 flex-col">52      <Settings />53      <div className={cn('flex-1 pb-16', className)}>54        <ChatHeader />55        <WelcomeScreen setInput={setInput} />56        <ToneSelector type={bingStyle} onChange={setBingStyle} />57        {messages.length ? (58          <>59            <ChatList messages={messages} />60            <ChatScrollAnchor trackVisibility={generating} />61            <ChatNotification message={messages.at(-1)} bot={bot} />62            <ChatSuggestions setInput={setInput} suggestions={messages.at(-1)?.suggestedResponses} />63 64            {generating ? (65              <div className="flex h-10 items-center justify-center my-4">66                <button67                  onClick={stopGenerating}68                  className="typing-control-item stop"69                >70                  <Image alt="stop" src={StopIcon} width={24} className="mr-1" />71                  <span>停止响应</span>72                </button>73              </div>74            ) : null}75          </>76        ) : null}77      </div>78      <ChatPanel79        className="pt-24 z-10"80        isSpeaking={isSpeaking}81        generating={generating}82        sendMessage={sendMessage}83        input={input}84        setInput={setInput}85        resetConversation={resetConversation}86        uploadImage={uploadImage}87        attachmentList={attachmentList}88        setAttachmentList={setAttachmentList}89      />90      <ButtonScrollToBottom />91    </div>92  )93}94