shalu-marketplace/src/pages/ai/index.tsx

import React, { useState } from "react";
import Assistant from "./Assistant";
import data from "@emoji-mart/data";
import { init } from "emoji-mart";
import styles from "./index.less";
import "./index.less";
import logo from "@/assets/shalu-new1.png";
import { assistantList } from "./data";

init({ data });

export default () => {
  const [active, setActive] = useState(assistantList[0].key);
  return (
    <div className="flex h-full bg-gray-100 border-t border-gray-200 overflow-hidden">
      <div className="w-fit sm:w-[216px] shrink-0 pt-6 px-4 border-gray-200 cursor-pointer">
        <div className="w-full">
          <img src={logo} className="h-40px" />
        </div>
        <div className="mt-10">
          <p className="pl-2 mobile:px-0 text-xs text-gray-500 break-all font-medium uppercase">
            助手类型
          </p>
          <div
            className="mt-3 space-y-2 overflow-y-auto overflow-x-hidden"
            style={{ height: "calc(-140px + 100vh)" }}
          >
            {assistantList.map((item, index) => (
              <div
                key={index}
                className={
                  `flex h-8 items-center justify-between mobile:justify-center px-2 mobile:px-1 rounded-lg text-sm font-normal ${active === item.key ? styles.active : " hover:bg-gray-200"}`
                }
                onClick={() => setActive(item.key)}
              >
                <div className="flex items-center space-x-2 w-0 grow">
                  <span
                    className="flex items-center justify-center relative rounded-lg grow-0 shrink-0 overflow-hidden w-6 h-6 text-base"
                    style={{ background: "rgb(213, 245, 246)" }}
                  >
                    <img className="w-full h-full" src={item.icon}/>
                  </span>
                  <div
                    className="overflow-hidden text-ellipsis whitespace-nowrap"
                    title={item.name}
                  >
                    {item.name}
                  </div>
                </div>
                <div className="shrink-0 h-6">
                  <div className="inline-block" data-state="closed">
                    <div className="style_btn__bbesM h-6 w-6 rounded-md border-none py-1"></div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="grow w-0">
        <div className="h-full py-2 pl-0 pr-2 sm:p-2">
          <div className="h-full flex bg-white rounded-2xl shadow-md overflow-hidden false">
            <Assistant key={active} agent={assistantList.find(item => item.key === active)}/>
          </div>
        </div>
      </div>
    </div>
  );
};