Sender Responsive

"use client";

import { useState } from "react";
import { ResponsiveSender } from "@/components/composed/sender/responsive-sender";
import {
  SenderResponsiveButtonGroup,
  SenderResponsiveSendButton,
} from "@/components/wuhan/blocks/sender/sender-responsive-01";

export function SenderResponsiveDemo() {
  const [value, setValue] = useState("");
  const [overflowStatus, setOverflowStatus] = useState(false);

  const canSend = value.trim().length > 0;

  return (
    <ResponsiveSender
      value={value}
      onChange={setValue}
      placeholder="输入内容..."
      getCanSend={({ value: v }) => v.trim().length > 0}
      sendDisabled={!canSend}
      submitOnEnter
      onOverflowChange={setOverflowStatus}
      onSend={() => setValue("")}
      buttonGroupChildren={
        <SenderResponsiveButtonGroup isOverflow={overflowStatus}>
          <div className="pr-[var(--Gap-gap-sm)] pl-[var(--Gap-gap-sm)] gap-[var(--Gap-gap-sm)] rounded-[var(--radius-sm)] bg-[var(--Container-bg-neutral-light)]">
            <span className="font-size-1 text-[var(--Text-text-primary)]">
              0个数据源
            </span>
          </div>
          <SenderResponsiveSendButton type="submit" disabled={!canSend} />
        </SenderResponsiveButtonGroup>
      }
    />
  );
}

"use client";

import {
  SenderResponsiveContainer,
  SenderResponsiveTextarea,
  SenderResponsiveInputRow,
  SenderResponsiveButtonGroup,
  SenderResponsiveAttachmentButton,
  SenderResponsiveSendButton,
} from "@/components/wuhan/blocks/sender/sender-responsive-01";
import { Paperclip } from "lucide-react";
import { useState, useRef, useEffect } from "react";

export function SenderResponsiveDefault() {
  const [value, setValue] = useState("");
  const [isOverflow, setIsOverflow] = useState(false);
  const containerRef = useRef<HTMLFormElement>(null);

  // 检测溢出的简单示例
  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        const { scrollWidth, clientWidth } = entry.target as HTMLElement;
        setIsOverflow(scrollWidth > clientWidth);
      }
    });

    resizeObserver.observe(container);
    return () => resizeObserver.disconnect();
  }, []);

  return (
    <SenderResponsiveContainer
      ref={containerRef}
      className="max-w-2xl"
      onOverflowChange={setIsOverflow}
    >
      <SenderResponsiveInputRow isOverflow={isOverflow}>
        <SenderResponsiveTextarea
          placeholder={isOverflow ? "输入内容..." : "输入消息..."}
          value={value}
          onChange={(e) => setValue(e.target.value)}
          isOverflow={isOverflow}
        />
        <SenderResponsiveButtonGroup isOverflow={isOverflow}>
          <SenderResponsiveAttachmentButton
            type="button"
            onClick={() => alert("点击附件")}
            aria-label="Attach file"
          >
            <Paperclip className="size-4" />
          </SenderResponsiveAttachmentButton>
          <SenderResponsiveSendButton
            type="submit"
            onClick={() => {
              if (value.trim()) {
                alert(`发送: ${value}`);
                setValue("");
              }
            }}
            disabled={!value.trim()}
          />
        </SenderResponsiveButtonGroup>
      </SenderResponsiveInputRow>
    </SenderResponsiveContainer>
  );
}