自訂 Footer

import {
  Chatbot,
  useAsgardContext,
  type ChatbotRef,
} from "@asgard-js/react";
import { useEffect, useRef, useState } from "react";
 
function MyFooter() {
  const {
    sendMessage,
    isConnecting,
    isStopping,
    pendingInputValue,
    setPendingInputValue,
    inputPlaceholder,
  } = useAsgardContext();
 
  const [value, setValue] = useState("");
  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
  // 接收外部透過 ChatbotRef.setInputValue 塞進來的文字
  useEffect(() => {
    if (pendingInputValue == null) return;
    setValue(pendingInputValue);
    setPendingInputValue(null);
    textareaRef.current?.focus();
  }, [pendingInputValue, setPendingInputValue]);
 
  const submit = () => {
    const text = value.trim();
    // 同時擋 isStopping：舊的 run 還沒真的結束，這時送出會有兩個 run
    // 並行寫進同一份對話紀錄。草稿保留，不要清掉。
    if (!text || isConnecting || isStopping) return;
    sendMessage?.({ text });
    setValue("");
  };
 
  return (
    <div className="footer">
      <textarea
        ref={textareaRef}
        placeholder={inputPlaceholder}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onKeyDown={(e) => {
          // IME 組字途中不送出
          if (
            e.key === "Enter" &&
            !e.shiftKey &&
            !e.nativeEvent.isComposing
          ) {
            e.preventDefault();
            submit();
          }
        }}
        rows={1}
      />
      <button
        onClick={submit}
        disabled={!value.trim() || isConnecting || isStopping}
      >
        送出
      </button>
    </div>
  );
}
 
function Demo() {
  const chatbotRef = useRef<ChatbotRef>(null);
  return (
    <Chatbot
      ref={chatbotRef}
      renderFooter={() => <MyFooter />}
      {...rest}
    />
  );
}