@fe-free/ai 5.0.0 → 6.0.2

package/src/m_sender/m_sender.stories.tsx

@@ -0,0 +1,231 @@
+import { getRecordAudioOfBlob, getRecordAudioOfPCM, MSender } from '@fe-free/ai';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { App } from 'antd';
+import { useCallback, useMemo, useState } from 'react';
+import type { MSenderProps, MSenderValue } from './types';
+
+const meta: Meta<typeof MSender> = {
+  title: '@fe-free/ai/MSender',
+  component: MSender,
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof MSender>;
+
+function Component(props: MSenderProps) {
+  const [v, setV] = useState<MSenderValue | undefined>(undefined);
+
+  return (
+    <MSender
+      value={v}
+      onChange={(v) => {
+        console.log('newValue', v);
+        setV(v);
+      }}
+      onSubmit={(value) => {
+        console.log('onSubmit', value);
+      }}
+      {...props}
+    />
+  );
+}
+
+export const Default: Story = {
+  render: (props) => <Component {...props} />,
+  args: {
+    onSubmit: (value) => {
+      console.log(value);
+    },
+  },
+};
+
+export const AutoFocus: Story = {
+  render: (props) => <Component {...props} />,
+  args: {
+    autoFocus: true,
+    onSubmit: (value) => {
+      console.log(value);
+    },
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+    onSubmit: (value) => {
+      console.log(value);
+    },
+  },
+  render: (props) => <Component {...props} />,
+};
+
+export const AllowSpeech: Story = {
+  render: (props) => {
+    const handleSubmit = (value: MSenderValue) => {
+      console.log('handleSubmit', value);
+    };
+
+    const handleRecordStart = useCallback(async () => {
+      // fake
+    }, []);
+
+    const handleRecordEnd = useCallback(
+      async (isSend) => {
+        console.log('handleRecordEnd isSend', isSend);
+
+        if (isSend) {
+          handleSubmit({ ...(props.value || {}), text: '假设这是识别的文字' });
+        }
+      },
+      [props.value],
+    );
+
+    return (
+      <div className="flex flex-col gap-10">
+        <Component
+          {...props}
+          allowSpeech={{
+            onRecordStart: handleRecordStart,
+            onRecordEnd: handleRecordEnd,
+          }}
+        />
+
+        <Component
+          value={{ text: 'test' } as MSenderValue}
+          {...props}
+          allowSpeech={{
+            onRecordStart: handleRecordStart,
+            onRecordEnd: handleRecordEnd,
+          }}
+        />
+
+        <div />
+
+        <Component
+          {...props}
+          defaultType="record"
+          allowSpeech={{
+            onRecordStart: handleRecordStart,
+            onRecordEnd: handleRecordEnd,
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+export const AllowSpeechPCM: Story = {
+  render: (props) => {
+    const { message } = App.useApp();
+
+    const { start: startRecord, stop: stopRecord } = useMemo(() => {
+      return getRecordAudioOfPCM();
+    }, []);
+
+    const handleSubmit = (value: MSenderValue) => {
+      console.log('handleSubmit', value);
+    };
+
+    const handleRecordStart = useCallback(async () => {
+      // 假设这是录音的文本
+      try {
+        await startRecord({
+          onAudio: (data) => {
+            console.log('onAudio', data);
+          },
+          onError: (err) => {
+            message.error(err.message);
+          },
+        });
+      } catch (err) {
+        console.error(err);
+      }
+
+      return;
+    }, []);
+
+    const handleRecordEnd = useCallback(
+      async (isSend) => {
+        console.log('handleRecordEnd isSend', isSend);
+
+        const voiceData = await stopRecord();
+        console.log('voiceData', voiceData);
+
+        if (isSend) {
+          handleSubmit({ ...(props.value || {}), text: '假设这是识别的文字' });
+        }
+      },
+      [props.value, stopRecord],
+    );
+
+    return (
+      <Component
+        {...props}
+        defaultType="record"
+        allowSpeech={{
+          onRecordStart: handleRecordStart,
+          onRecordEnd: handleRecordEnd,
+        }}
+      />
+    );
+  },
+};
+
+export const AllowSpeechBlob: Story = {
+  render: (props) => {
+    const { message } = App.useApp();
+
+    const { start: startRecord, stop: stopRecord } = useMemo(() => {
+      return getRecordAudioOfBlob();
+    }, []);
+
+    const handleSubmit = (value: MSenderValue) => {
+      console.log('handleSubmit', value);
+    };
+
+    const handleRecordStart = useCallback(async () => {
+      // 假设这是录音的文本
+      try {
+        await startRecord({
+          onAudio: (data) => {
+            console.log('onAudio', data);
+          },
+          onError: (err) => {
+            message.error(err.message);
+          },
+        });
+      } catch (err) {
+        console.error(err);
+      }
+
+      return;
+    }, []);
+
+    const handleRecordEnd = useCallback(
+      async (isSend) => {
+        console.log('handleRecordEnd isSend', isSend);
+
+        const voiceData = await stopRecord();
+        console.log('voiceData', voiceData);
+
+        if (isSend) {
+          handleSubmit({ ...(props.value || {}), text: '假设这是识别的文字' });
+        }
+      },
+      [props.value, stopRecord],
+    );
+
+    return (
+      <Component
+        {...props}
+        defaultType="record"
+        allowSpeech={{
+          onRecordStart: handleRecordStart,
+          onRecordEnd: handleRecordEnd,
+        }}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/m_sender/record.tsx

@@ -0,0 +1,173 @@
+import Icons from '@fe-free/icons';
+import { Button } from 'antd';
+import classNames from 'classnames';
+import type { RefObject } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { RecordLoading } from '../helper';
+import IconKeyboard from '../svgs/keyboard.svg?react';
+import type { MSenderProps } from './types';
+
+function RecordAction(
+  props: MSenderProps & { setType; refText: RefObject<HTMLTextAreaElement | null> },
+) {
+  const { allowSpeech, setType, refText, loading } = props;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const touchStartYRef = useRef<number>(0);
+
+  const [isRecording, setIsRecording] = useState(false);
+
+  const isCancelledRef = useRef(false);
+  const [isCancel, setIsCancel] = useState(false);
+
+  const handleTouchStart = useCallback(
+    async (e: TouchEvent) => {
+      // 阻止默认行为，避免触发文本选择、上下文菜单等
+      e.preventDefault();
+
+      if (loading) {
+        return;
+      }
+
+      await allowSpeech?.onRecordStart?.();
+
+      const touch = e.touches[0];
+      touchStartYRef.current = touch.clientY;
+
+      isCancelledRef.current = false;
+      setIsCancel(false);
+
+      setIsRecording(true);
+    },
+    [allowSpeech, loading],
+  );
+
+  const handleTouchMove = useCallback(
+    (e: TouchEvent) => {
+      // 阻止默认行为，避免页面滚动
+      e.preventDefault();
+
+      // 没有录音，不继续
+      if (!isRecording) {
+        return;
+      }
+
+      const touch = e.touches[0];
+      const deltaY = touchStartYRef.current - touch.clientY; // 向上移动为正
+
+      // 如果上移超过 50px，则判定为取消
+      if (deltaY > 50) {
+        if (!isCancelledRef.current) {
+          isCancelledRef.current = true;
+          setIsCancel(true);
+        }
+      } else {
+        if (isCancelledRef.current) {
+          isCancelledRef.current = false;
+          setIsCancel(false);
+        }
+      }
+    },
+    [isRecording],
+  );
+
+  const handleTouchEnd = useCallback(
+    async (e: TouchEvent) => {
+      e.preventDefault();
+
+      // 没有录音，不继续
+      if (!isRecording) {
+        return;
+      }
+
+      try {
+        await allowSpeech?.onRecordEnd?.(!isCancelledRef.current);
+      } catch (err) {
+        // nothing
+        console.error(err);
+      }
+
+      // 重置状态
+      setIsRecording(false);
+      setIsCancel(false);
+      isCancelledRef.current = false;
+      touchStartYRef.current = 0;
+    },
+    [allowSpeech, isRecording],
+  );
+
+  const handleTouchCancel = useCallback(
+    async (e: TouchEvent) => {
+      // touchcancel 在触摸被中断时触发（如系统手势、来电等）
+      e.preventDefault();
+
+      await allowSpeech?.onRecordEnd?.(false);
+
+      // 重置状态
+      setIsRecording(false);
+      setIsCancel(false);
+      isCancelledRef.current = false;
+      touchStartYRef.current = 0;
+    },
+    [allowSpeech],
+  );
+
+  // 使用原生事件监听器，设置 passive: false 以支持 preventDefault
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    // 使用 { passive: false } 选项，允许 preventDefault
+    container.addEventListener('touchstart', handleTouchStart, { passive: false });
+    container.addEventListener('touchmove', handleTouchMove, { passive: false });
+    container.addEventListener('touchend', handleTouchEnd, { passive: false });
+    container.addEventListener('touchcancel', handleTouchCancel, { passive: false });
+
+    return () => {
+      container.removeEventListener('touchstart', handleTouchStart);
+      container.removeEventListener('touchmove', handleTouchMove);
+      container.removeEventListener('touchend', handleTouchEnd);
+      container.removeEventListener('touchcancel', handleTouchCancel);
+    };
+  }, [handleTouchStart, handleTouchMove, handleTouchEnd, handleTouchCancel]);
+
+  return (
+    <div
+      className={classNames(
+        'fea-m-sender-record absolute inset-0 flex items-center justify-center rounded-xl',
+        {
+          'bg-red-500': isCancel,
+          'bg-primary': !isCancel,
+        },
+      )}
+    >
+      {isRecording ? (
+        <>
+          <RecordLoading count={30} gap={4} />
+          <div className="text-03 absolute top-0 right-0 left-0 -mt-[50px] flex h-[50px] items-end justify-center bg-white pb-2">
+            {isCancel && <div className="text-red08">松开取消</div>}
+            {!isCancel && <div className="text-03">松开发送&nbsp;&nbsp;上移取消</div>}
+          </div>
+        </>
+      ) : (
+        <div className="text-base text-white">按住说话</div>
+      )}
+      <div className="absolute inset-0" ref={containerRef} />
+      {!isRecording && (
+        <Button
+          type="text"
+          shape="circle"
+          icon={<Icons component={IconKeyboard} className="h-[28px]! text-xl! text-white!" />}
+          onClick={() => {
+            setType('input');
+
+            refText.current?.focus();
+          }}
+          className="absolute! right-4!"
+        />
+      )}
+    </div>
+  );
+}
+
+export { RecordAction };

package/src/m_sender/types.ts

@@ -0,0 +1,32 @@
+interface MSenderRef {
+  focus: () => void;
+}
+
+interface MSenderValue {
+  text?: string;
+  files?: string[];
+}
+
+interface MSenderProps {
+  value?: MSenderValue;
+  onChange?: (value?: MSenderValue) => void;
+
+  loading?: boolean;
+  onSubmit?: (value?: MSenderValue) => void | Promise<void>;
+
+  autoFocus?: boolean;
+  placeholder?: string;
+
+  /** 是否允许语音输入 */
+  allowSpeech?: {
+    /** 录音开始时回调，如果没权限，则 reject */
+    onRecordStart?: () => Promise<void>;
+    /** 录音结束时回调, isSend 为 true 则发送，否则取消 */
+    onRecordEnd?: (isSend: boolean) => Promise<void>;
+  };
+
+  defaultType?: 'input' | 'record';
+  statement?: string;
+}
+
+export type { MSenderProps, MSenderRef, MSenderValue };

package/src/messages/index.tsx

@@ -0,0 +1,5 @@
+export { MessageActions } from './message_actions';
+export { MessageThink, MessageThinkOfDeepSeek } from './message_think';
+export type { MessageThinkProps } from './message_think';
+export { Messages } from './messages';
+export type { MessagesProps } from './messages';

package/src/messages/message_actions.tsx

@@ -0,0 +1,166 @@
+import { Copy } from '@fe-free/core';
+import {
+  CopyFilled,
+  CopyOutlined,
+  DislikeFilled,
+  DislikeOutlined,
+  LikeFilled,
+  LikeOutlined,
+} from '@fe-free/icons';
+import { App, Button, Tooltip } from 'antd';
+import classNames from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
+
+function MessageActionOfCopy({
+  value,
+  onCopied,
+  className,
+}: {
+  value: string;
+  onCopied?: () => void;
+  className?: string;
+}) {
+  const [active, setActive] = useState(false);
+  const { message } = App.useApp();
+
+  const handleCopied = useCallback(async () => {
+    setActive(true);
+    onCopied?.();
+    message.success('复制成功');
+  }, [onCopied, message]);
+
+  return (
+    <Tooltip title="复制">
+      <Copy
+        value={value}
+        className={classNames('cursor-pointer text-03', className)}
+        onCopied={handleCopied}
+      >
+        <Button
+          type="text"
+          size="small"
+          className="text-03"
+          icon={active ? <CopyFilled /> : <CopyOutlined />}
+        />
+      </Copy>
+    </Tooltip>
+  );
+}
+
+function MessageActionOfLike({
+  active: propsActive,
+  onClick,
+  className,
+}: {
+  active?: boolean;
+  onClick?: (active: boolean) => Promise<void>;
+  className?: string;
+}) {
+  const { message } = App.useApp();
+  const [active, setActive] = useState(propsActive || false);
+
+  useEffect(() => {
+    setActive(!!propsActive);
+  }, [propsActive]);
+
+  const handleClick = useCallback(async () => {
+    await Promise.resolve(onClick?.(!active));
+    setActive(!active);
+    message.success(!active ? '点赞成功' : '取消点赞成功');
+  }, [onClick, active, message]);
+
+  return (
+    <Tooltip title={active ? '取消点赞' : '点赞'}>
+      <Button
+        type="text"
+        onClick={handleClick}
+        size="small"
+        className={classNames('text-03', className)}
+        icon={active ? <LikeFilled /> : <LikeOutlined />}
+      />
+    </Tooltip>
+  );
+}
+
+function MessageActionOfDislike({
+  active: propsActive,
+  onClick,
+  className,
+}: {
+  active?: boolean;
+  onClick?: (active: boolean) => Promise<void>;
+  className?: string;
+}) {
+  const [active, setActive] = useState(propsActive || false);
+  const { message } = App.useApp();
+
+  useEffect(() => {
+    setActive(!!propsActive);
+  }, [propsActive]);
+
+  const handleClick = useCallback(async () => {
+    await Promise.resolve(onClick?.(!active));
+    setActive(!active);
+    message.success(!active ? '点踩成功' : '取消点踩成功');
+  }, [onClick, active, message]);
+
+  return (
+    <Tooltip title={active ? '取消点踩' : '点踩'}>
+      <Button
+        type="text"
+        onClick={handleClick}
+        size="small"
+        className={classNames('text-03', className)}
+        icon={active ? <DislikeFilled /> : <DislikeOutlined />}
+      />
+    </Tooltip>
+  );
+}
+
+function MessageActionOfLikeAndDislike({
+  value: propsValue,
+  onChange,
+  className,
+}: {
+  value?: -1 | 0 | 1;
+  onChange?: (value: -1 | 0 | 1) => void;
+  className?: string;
+}) {
+  const [value, setValue] = useState<(-1 | 0 | 1) | undefined>(propsValue);
+
+  useEffect(() => {
+    setValue(propsValue);
+  }, [propsValue]);
+
+  return (
+    <>
+      <MessageActionOfLike
+        active={value === 1}
+        onClick={async () => {
+          const newValue = value === 1 ? 0 : 1;
+          await Promise.resolve(onChange?.(newValue));
+          setValue(newValue);
+        }}
+        className={className}
+      />
+      <MessageActionOfDislike
+        active={value === -1}
+        onClick={async () => {
+          const newValue = value === -1 ? 0 : -1;
+          await Promise.resolve(onChange?.(newValue));
+          setValue(newValue);
+        }}
+        className={className}
+      />
+    </>
+  );
+}
+
+const MessageActions = {
+  Copy: MessageActionOfCopy,
+  Like: MessageActionOfLike,
+  Dislike: MessageActionOfDislike,
+  LikeAndDislike: MessageActionOfLikeAndDislike,
+};
+
+export { MessageActions };

package/src/messages/message_think.tsx

@@ -0,0 +1,69 @@
+import { Think } from '@ant-design/x';
+import Icons from '@fe-free/icons';
+import classNames from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
+import ThinkIcon from '../svgs/think.svg?react';
+
+interface MessageThinkProps {
+  title: string;
+  icon?: React.ReactNode;
+  loading?: boolean;
+  children?: React.ReactNode;
+  expanded?: boolean;
+  onClick?: () => void;
+  className?: string;
+}
+
+function MessageThink({
+  title,
+  icon,
+  loading,
+  children,
+  expanded: propsExpanded,
+  onClick,
+  className,
+}: MessageThinkProps) {
+  const [expanded, setExpanded] = useState(propsExpanded || false);
+
+  useEffect(() => {
+    setExpanded(propsExpanded || false);
+  }, [propsExpanded]);
+
+  useEffect(() => {
+    // 如果 propsExpanded 未定义，则根据 loading 状态设置 expanded
+    if (propsExpanded === undefined && loading !== undefined) {
+      setExpanded(loading ? true : false);
+    }
+  }, [propsExpanded, loading]);
+
+  const handleClick = useCallback(() => {
+    setExpanded(!expanded);
+    onClick?.();
+  }, [expanded, onClick]);
+
+  return (
+    <Think
+      title={title}
+      icon={icon || <Icons component={ThinkIcon} className="!text-sm" />}
+      loading={loading}
+      blink={loading}
+      expanded={expanded}
+      onClick={handleClick}
+      className={classNames('fea-message-think', className)}
+    >
+      {children}
+    </Think>
+  );
+}
+
+function MessageThinkOfDeepSeek(props: MessageThinkProps) {
+  return (
+    <MessageThink
+      {...props}
+      className={classNames('fea-message-think-deep-seek', props.className)}
+    />
+  );
+}
+
+export { MessageThink, MessageThinkOfDeepSeek };
+export type { MessageThinkProps };