Timeline

• Elon Musk (@elonmusk) 2025-06-02 09:29:15.613015436 +0800 CST
  

  模型名称的显示控制在 ChatAction 组件中。现在它是通过 hover 效果来显示的。

  修改方法

  1. 修改 CSS 文件 chat.module.scss

  找到 .chat-input-action 部分（大约在第 245 行），修改如下：

  .chat-input-action {
    // ... 其他样式保持不变
    
    // 修改这里：让它默认显示完整宽度
    width: var(--full-width); // 原来是 var(--icon-width)
    
    .text {
      white-space: nowrap;
      padding-left: 5px;
      opacity: 1; // 原来是 0
      transform: translateX(0); // 原来是 translateX(-5px)
      transition: all ease 0.3s;
      pointer-events: none;
    }
    
    // 可以注释掉或删除 hover 效果
    // &:hover {
    //   --delay: 0.5s;
    //   width: var(--full-width);
    //   transition-delay: var(--delay);
    //
    //   .text {
    //     transition-delay: var(--delay);
    //     opacity: 1;
    //     transform: translate(0);
    //   }
    // }
  }
  

  2. 修改 TypeScript 文件 chat.tsx

  找到 ChatAction 组件（大约在第 573 行），让它在初始化时就计算完整宽度：

  function ChatAction(props: {
    text: string;
    icon: JSX.Element;
    onClick: () => void;
  }) {
    const iconRef = useRef<HTMLDivElement>(null);
    const textRef = useRef<HTMLDivElement>(null);
    const [width, setWidth] = useState({
      full: 16,
      icon: 16,
    });
  
    function updateWidth() {
      if (!iconRef.current || !textRef.current) return;
      const getWidth = (dom: HTMLDivElement) => dom.getBoundingClientRect().width;
      const textWidth = getWidth(textRef.current);
      const iconWidth = getWidth(iconRef.current);
      setWidth({
        full: textWidth + iconWidth,
        icon: iconWidth,
      });
    }
  
    // 添加这个 useEffect，在组件挂载时就计算宽度
    useEffect(() => {
      updateWidth();
    }, [props.text]); // 当文本改变时重新计算
  
    return (
      <div
        className={`${styles["chat-input-action"]} clickable`}
        onClick={() => {
          props.onClick();
          // setTimeout(updateWidth, 1); // 这行可以注释掉
        }}
        // onMouseEnter={updateWidth} // 这行可以注释掉
        // onTouchStart={updateWidth} // 这行可以注释掉
        style={
          {
            "--icon-width": `${width.icon}px`,
            "--full-width": `${width.full}px`,
          } as React.CSSProperties
        }
      >
        <div ref={iconRef} className={styles["icon"]}>
          {props.icon}
        </div>
        <div className={styles["text"]} ref={textRef}>
          {props.text}
        </div>
      </div>
    );
  }
  

  简单方案（仅修改 CSS）

  如果你只想快速解决，可以只修改 chat.module.scss：

  .chat-input-action {
    // 找到这个类，添加或修改以下内容
    width: auto !important; // 自动宽度
    
    .text {
      opacity: 1 !important; // 强制显示
      transform: none !important;
      pointer-events: auto; // 允许点击
    }
  }
  

  这样修改后，模型名称将会一直显示，而不需要鼠标悬停。