feat: 增加喵语发送功能

web/plugins/com.msgbyte.miaolang/src/SendMiaoModal.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useCallback } from 'react';
+import { useState } from 'react';
+import {
+  ModalWrapper,
+  useModalContext,
+  ChatInputActionContextProps,
+} from '@capital/common';
+import { Button, TextArea } from '@capital/component';
+import { encode } from './trans';
+
+interface SendMiaoModalProps {
+  actions: ChatInputActionContextProps;
+}
+export const SendMiaoModal: React.FC<SendMiaoModalProps> = React.memo(
+  (props) => {
+    const [text, setText] = useState('');
+    const modalContext = useModalContext();
+
+    const handleSendMiao = useCallback(() => {
+      const miao = encode(text);
+
+      props.actions.sendMsg(miao);
+      modalContext?.closeModal();
+    }, [text, modalContext, props.actions]);
+
+    return (
+      <ModalWrapper title="喵言喵语">
+        <TextArea
+          placeholder="输入人话"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+        />
+
+        <Button
+          style={{ marginTop: 8 }}
+          type="primary"
+          block={true}
+          onClick={handleSendMiao}
+        >
+          发送喵语
+        </Button>
+      </ModalWrapper>
+    );
+  }
+);
+SendMiaoModal.displayName = 'SendMiaoModal';

web/plugins/com.msgbyte.miaolang/src/index.ts

@@ -1,5 +1,11 @@
 import { decode, encode, isMiao } from './trans';
-import { regMessageInterpreter } from '@capital/common';
+import {
+  regMessageInterpreter,
+  regChatInputAction,
+  openModal,
+} from '@capital/common';
+import { createElement } from 'react';
+import { SendMiaoModal } from './SendMiaoModal';
 
 const miao = encode('喵语翻译已加载');
 const human = decode(miao);
@@ -17,3 +23,10 @@ regMessageInterpreter({
     return decode(message);
   },
 });
+
+regChatInputAction({
+  label: '喵言喵语',
+  onClick: (actions) => {
+    openModal(createElement(SendMiaoModal, { actions }));
+  },
+});

web/src/components/ChatBox/ChatInputBox/Addon.tsx

@@ -1,25 +1,33 @@
 import { chatInputActions } from '@/plugin/common';
 import { Icon } from '@iconify/react';
 import { Dropdown, Menu } from 'antd';
-import React, { useMemo } from 'react';
+import React from 'react';
+import { useChatInputActionContext } from './context';
 
 export const ChatInputAddon: React.FC = React.memo(() => {
-  const menu = useMemo(() => {
+  const actionContext = useChatInputActionContext();
-    return (
-      <Menu>
-        {chatInputActions.map((item, i) => (
-          <Menu.Item key={item.label + i} onClick={item.onClick}>
-            {item.label}
-          </Menu.Item>
-        ))}
-      </Menu>
-    );
-  }, []);
 
   if (chatInputActions.length === 0) {
     return null;
   }
 
+  if (actionContext === null) {
+    return null;
+  }
+
+  const menu = (
+    <Menu>
+      {chatInputActions.map((item, i) => (
+        <Menu.Item
+          key={item.label + i}
+          onClick={() => item.onClick(actionContext)}
+        >
+          {item.label}
+        </Menu.Item>
+      ))}
+    </Menu>
+  );
+
   return (
     <Dropdown overlay={menu} placement="topRight" trigger={['click']}>
       <Icon

web/src/components/ChatBox/ChatInputBox/context.ts

@@ -0,0 +1,12 @@
+import React, { useContext } from 'react';
+
+export interface ChatInputActionContextProps {
+  sendMsg: (message: string) => void;
+}
+export const ChatInputActionContext =
+  React.createContext<ChatInputActionContextProps | null>(null);
+ChatInputActionContext.displayName = 'ChatInputContext';
+
+export function useChatInputActionContext() {
+  return useContext(ChatInputActionContext);
+}

web/src/components/ChatBox/ChatInputBox/index.tsx

@@ -3,6 +3,7 @@ import { Input } from 'antd';
 import React, { useCallback, useRef, useState } from 'react';
 import { t } from 'tailchat-shared';
 import { ChatInputAddon } from './Addon';
+import { ChatInputActionContext } from './context';
 
 interface ChatInputBoxProps {
   onSendMsg: (msg: string) => void;
@@ -27,22 +28,24 @@ export const ChatInputBox: React.FC<ChatInputBoxProps> = React.memo((props) => {
   );
 
   return (
-    <div className="px-4 py-2">
+    <ChatInputActionContext.Provider value={{ sendMsg: props.onSendMsg }}>
-      <div className="bg-gray-600 flex rounded-md items-center">
+      <div className="px-4 py-2">
-        <Input
+        <div className="bg-gray-600 flex rounded-md items-center">
-          ref={inputRef}
+          <Input
-          className="outline-none shadow-none border-0 py-2.5 px-4 flex-1"
+            ref={inputRef}
-          placeholder={t('输入一些什么')}
+            className="outline-none shadow-none border-0 py-2.5 px-4 flex-1"
-          value={message}
+            placeholder={t('输入一些什么')}
-          onChange={(e) => setMessage(e.target.value)}
+            value={message}
-          onKeyDown={handleKeyDown}
+            onChange={(e) => setMessage(e.target.value)}
-        />
+            onKeyDown={handleKeyDown}
+          />
 
-        <div className="px-2">
+          <div className="px-2">
-          <ChatInputAddon />
+            <ChatInputAddon />
+          </div>
         </div>
       </div>
-    </div>
+    </ChatInputActionContext.Provider>
   );
 });
 ChatInputBox.displayName = 'ChatInputBox';

web/src/plugin/common/index.ts

@@ -8,3 +8,4 @@ export {
   useGroupPanelParams,
   useCurrentGroupPanelInfo,
 } from '@/routes/Main/Content/Group/utils';
+export { openModal, ModalWrapper, useModalContext } from '@/components/Modal';

web/src/plugin/common/reg.ts

@@ -1,3 +1,4 @@
+import type { ChatInputActionContextProps } from '@/components/ChatBox/ChatInputBox/context';
 import { buildRegFn, buildRegList, FastFormFieldMeta } from 'tailchat-shared';
 
 /**
@@ -55,7 +56,8 @@ export const [getMessageRender, regMessageRender] = buildRegFn<
 
 interface ChatInputAction {
   label: string;
-  onClick: () => void;
+  onClick: (actions: ChatInputActionContextProps) => void;
 }
+export type { ChatInputActionContextProps };
 export const [chatInputActions, regChatInputAction] =
   buildRegList<ChatInputAction>();

web/src/plugin/component/index.tsx

@@ -0,0 +1,4 @@
+import Button from 'antd/lib/button';
+import TextArea from 'antd/lib/input/TextArea';
+
+export { Button, TextArea };

web/src/plugin/loader.ts

@@ -17,4 +17,5 @@ function registerDependencies() {
 
 function registerModules() {
   regSharedModule('@capital/common', () => import('./common/index'));
+  regSharedModule('@capital/component', () => import('./component/index'));
 }