DB-GPT/web/pages/mobile/chat/components/ModelSelector.tsx

import ModelIcon from '@/new-components/chat/content/ModelIcon';
import { ChatContext } from '@/app/chat-context';
import { SwapOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Popover } from 'antd';
import React, { useContext, useMemo, useState } from 'react';
import { MobileChatContext } from '../';

const ModelSelector: React.FC = () => {
  const { modelList } = useContext(ChatContext);
  const { model, setModel } = useContext(MobileChatContext);

  const items: MenuProps['items'] = useMemo(() => {
    if (modelList.length > 0) {
      return modelList.map((item) => {
        return {
          label: (
            <div
              className="flex items-center gap-2"
              onClick={() => {
                setModel(item);
              }}
            >
              <ModelIcon width={14} height={14} model={item} />
              <span className="text-xs">{item}</span>
            </div>
          ),
          key: item,
        };
      });
    }
    return [];
  }, [modelList, setModel]);

  return (
    <Dropdown
      menu={{
        items,
      }}
      placement="top"
      trigger={['click']}
    >
      <Popover content={model}>
        <div className="flex items-center gap-1 border rounded-xl bg-white dark:bg-black p-2 flex-shrink-0">
          <ModelIcon width={16} height={16} model={model} />
          <span
            className="text-xs font-medium line-clamp-1"
            style={{
              maxWidth: 96,
            }}
          >
            {model}
          </span>
          <SwapOutlined rotate={90} />
        </div>
      </Popover>
    </Dropdown>
  );
};

export default ModelSelector;