code2024/bingo

1import React from 'react'2import { BingConversationStyle } from '@/lib/bots/bing/types'3import { cn } from '@/lib/utils'4 5type ToneItem = {6  type: BingConversationStyle,7  name: string8}9 10const ToneList: ToneItem[] = [11  { name: '有创造力', type: BingConversationStyle.Creative },12  { name: '更平衡', type: BingConversationStyle.Balanced },13  { name: '更精确', type: BingConversationStyle.Precise }14]15 16interface ToneSelectorProps {17  type: BingConversationStyle | ''18  onChange?: (type: BingConversationStyle) => void19}20 21export function ToneSelector({ type, onChange }: ToneSelectorProps) {22  return (23    <div className="fieldset">24      <div className="legend">25        选择对话样式26      </div>27      <div className="options-list-container">28        <ul id="tone-options" className="options">29          {30            ToneList.map(tone => (31              <li className="option" key={tone.name} onClick={() => onChange?.(tone.type)}>32                <button className={cn(`tone-${type.toLowerCase()}`, { selected: tone.type === type}) } aria-pressed="true" >33                  <span className="caption-2-strong label-modifier">更</span>34                  <span className="body-1-strong label">{tone.name}</span>35                </button>36              </li>37            ))38          }39        </ul>40      </div>41    </div>42  )43}44