add pics component support

dev/extras.ts

-import { Awaitable, Context, Schema } from 'koishi';
+import { Awaitable, Context, Schema, segment } from 'koishi';
 import {
   DefinePlugin,
   MultiInstancePlugin,
@@ -65,6 +65,8 @@ export default class ExtrasInDev {
       isDefault: true,
       // endpoint: 'https://cdn02.moecube.com:444',
     });
+
+    ctx.command('pic2').action(() => segment('pics'));
   }
 
   static using = ['pics'] as const;

package.json

@@ -28,13 +28,13 @@
   "homepage": "https://github.com/koishijs/koishi-plugin-pics",
   "dependencies": {
     "@koishijs/assets": "^1.0.1",
-    "koishi-thirdeye": "^11.1.14",
+    "koishi-thirdeye": "^11.1.17",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@koishijs/plugin-console": "^4.7.1",
+    "@koishijs/plugin-console": "^5.0.0",
     "@koishijs/plugin-database-memory": "^2.0.1",
-    "@koishijs/plugin-sandbox": "^2.4.0",
+    "@koishijs/plugin-sandbox": "^2.5.0",
     "@types/jest": "^29.2.0",
     "@types/lodash": "^4.14.176",
     "@types/node": "^16.11.4",
@@ -57,7 +57,7 @@
     "ws": "^8.3.0"
   },
   "peerDependencies": {
-    "koishi": "^4.10.4"
+    "koishi": "^4.10.10"
   },
   "jest": {
     "moduleFileExtensions": [

src/index.ts

 // import 'source-map-support/register';
-import { Context, Random, Logger, Bot, remove } from 'koishi';
+import { Context, Random, Logger, Bot, remove, Session, Dict } from 'koishi';
 import { PicsPluginConfig } from './config';
 import _ from 'lodash';
-import { segment, Quester } from 'koishi';
+import { segment, Quester, Element } from 'koishi';
 import {
   StarterPlugin,
   Caller,
@@ -14,11 +14,11 @@ import {
   LifecycleEvents,
   Provide,
   PutArgs,
-  PutBot,
   PutOption,
   PutRenderer,
   Renderer,
   UseCommand,
+  UseComponent,
 } from 'koishi-thirdeye';
 import { AxiosRequestConfig } from 'axios';
 import { PicAssetsTransformMiddleware } from './middlewares/assets';
@@ -322,4 +322,19 @@ export default class PicsContainer
     this._http = this.http.extend(this.config.httpConfig);
     this.installDefaultMiddlewares();
   }
+
+  @UseComponent('pics')
+  async picsComponent(attrs: Dict<any>, children: Element[], session: Session) {
+    const tags = attrs.tags?.split(/[ ,+\uFF0C\uFF0B\u3001]/) || [];
+    const sourceTags = attrs.source?.split(/[ ,+\uFF0C\uFF0B\u3001]/) || [];
+    const result = await this.randomPic(tags, sourceTags);
+    if (!result) {
+      return attrs.fallback || '';
+    }
+    const segment = await this.getSegment(result.url);
+    if (result.description) {
+      segment.attrs.description = result.description;
+    }
+    return segment;
+  }
 }