feat(desktop): add screenshot button in chatbox at electron env

client/desktop/src/main/inject/message-handler.ts

@@ -1,5 +1,6 @@
 import { generateInstallPluginScript } from '.';
 import log from 'electron-log';
+import { startScreenshots } from '../screenshots';
 
 export function handleTailchatMessage(
   type: string,
@@ -12,4 +13,9 @@ export function handleTailchatMessage(
     webview.executeJavaScript(generateInstallPluginScript());
     return;
   }
+
+  if (type === 'callScreenshotsTool') {
+    startScreenshots();
+    return;
+  }
 }

client/desktop/src/main/screenshots.ts

@@ -1,9 +1,13 @@
 import { globalShortcut } from 'electron';
 import Screenshots from 'electron-screenshots';
 import _once from 'lodash/once';
+import log from 'electron-log';
+
+let _screenshots: Screenshots;
 
 export const initScreenshots = _once(() => {
   const screenshots = new Screenshots();
+  _screenshots = screenshots;
 
   globalShortcut.register('ctrl+shift+a', () => {
     screenshots.startCapture();
@@ -23,3 +27,12 @@ export const initScreenshots = _once(() => {
     console.log('capture', buffer, bounds);
   });
 });
+
+export function startScreenshots() {
+  if (!_screenshots) {
+    log.warn('_screenshots not inited');
+    return;
+  }
+
+  _screenshots.startCapture();
+}

client/web/plugins/com.msgbyte.env.electron/src/index.tsx

@@ -1,4 +1,10 @@
-import { regCustomPanel } from '@capital/common';
+import {
+  regCustomPanel,
+  regChatInputButton,
+  postMessageEvent,
+} from '@capital/common';
+import { Icon } from '@capital/component';
+import React from 'react';
 import { DeviceInfoPanel } from './DeviceInfoPanel';
 import { Translate } from './translate';
 
@@ -13,3 +19,18 @@ regCustomPanel({
   label: Translate.deviceInfo,
   render: DeviceInfoPanel,
 });
+
+regChatInputButton({
+  render: () => {
+    return (
+      <Icon
+        className="text-2xl cursor-pointer"
+        icon="mdi:content-cut"
+        rotate={3}
+        onClick={() => {
+          postMessageEvent('callScreenshotsTool');
+        }}
+      />
+    );
+  },
+});

client/web/src/plugin/common/index.ts

@@ -32,6 +32,7 @@ export {
   appendUrlSearch,
 } from '@/utils/url-helper';
 export { getServiceWorkerRegistration } from '@/utils/sw-helper';
+export { postMessageEvent } from '@/utils/event-helper';
 import {
   /**
    * 注意: Tailchat 内部的request不会被导出为插件可用模块，如果需要网络请求的话请自行import axios(以作为复用依赖)