add translate action to ctx ocr

commands/interaction/context/ocr.js

@@ -1,13 +1,15 @@
-const { googleVisionOcr } = require('#api');
+const { googleVisionOcr, googleTranslate } = require('#api');
+const { TRANSLATE_DISPLAY_MAPPINGS, TRANSLATE_LANGUAGES } = require('#constants');
 
 const { getMessageAttachment, validateAttachment } = require('#utils/attachment');
 const { createEmbed } = require('#utils/embed');
 const { acknowledge } = require('#utils/interactions');
-const { codeblock } = require('#utils/markdown');
+const { codeblock, pill, icon } = require('#utils/markdown');
 const { editOrReply } = require('#utils/message');
-const { STATICS } = require('#utils/statics');
+const { STATICS, STATIC_ICONS, STATIC_ACTIONS } = require('#utils/statics');
 
 const { ApplicationCommandTypes, MessageFlags } = require("detritus-client/lib/constants");
+const { Components } = require('detritus-client/lib/utils');
 
 module.exports = {
   name: 'OCR',
@@ -38,15 +40,52 @@ module.exports = {
 
       if(ocr.response.body.status == 1) return editOrReply(context, createEmbed("warning", context, ocr.response.body.text))
 
-      await editOrReply(context, createEmbed("default", context, {
-        thumbnail: {
-          url: attachment
-        },
-        description: codeblock("ansi", ["​" + ocr.response.body.text.substr(0,3900)]),
-        footer: {
-          iconUrl: STATICS.google,
-          text: `Google Cloud Vision • ${context.application.name} • Took ${ocr.timings}s`
+      const components = new Components({        
+        timeout: 100000,
+        run: async (ctx) => {
+          if (ctx.userId !== context.userId) return await ctx.respond(InteractionCallbackTypes.DEFERRED_UPDATE_MESSAGE);
+          
+          await ctx.editOrRespond({
+            embeds: [createEmbed("ai_custom", context, STATIC_ACTIONS.translate)]
+          })
+
+          let translate = await googleTranslate(context, ocr.response.body.text, "en", "auto")
+
+          let fromFlag = TRANSLATE_DISPLAY_MAPPINGS[translate.response.body.language.from || sourceLanguage] || ''
+          let toFlag = TRANSLATE_DISPLAY_MAPPINGS[translate.response.body.language.to] || ''
+
+          return editOrReply(context, createEmbed("default", context, {
+            description: `${icon("locale")} ​ ${fromFlag} ${pill(TRANSLATE_LANGUAGES[translate.response.body.language.from || sourceLanguage] || translate.response.body.language.from || "Detected Language")} ​ ​ ​​${icon("arrow_right")} ​ ​ ​ ​${toFlag} ${pill(TRANSLATE_LANGUAGES[translate.response.body.language.to] || translate.response.body.language.to)}\n${codeblock("ansi", [translate.response.body.translation])}`,
+            thumbnail: {
+              url: attachment
+            },
+            footer: {
+              iconUrl: STATICS.googletranslate,
+              text: `Google Translate • ${context.application.name}`
+            }
+          }))
         }
+      })
+
+      components.addButton({
+        label: "Translate",
+        emoji: icon("button_translate"),
+        custom_id: "actions-translate",
+        style: 2
+      })
+
+      await editOrReply(context, createEmbed("default", context, {
+        embeds: [{
+          thumbnail: {
+            url: attachment
+          },
+          description: codeblock("ansi", ["​" + ocr.response.body.text.substr(0,3900)]),
+          footer: {
+            iconUrl: STATICS.google,
+            text: `Google Cloud Vision • ${context.application.name} • Took ${ocr.timings}s`
+          }
+        }],
+        components
       }))
     }catch(e){
       console.log(e)

labscore/constants.js

@@ -65,6 +65,7 @@ module.exports.ICONS = Object.freeze({
   "button_thermometer": "<:ico_button_thermometer:1263593823016062987>",
   "button_trash": "<:ico_button_trash:1271212355883372716>",
   "button_user_profile_swap": "<:ico_button_user_profile_swap:1263594003442700368>",
+  "button_translate": "<:ico_button_translate:1304161023288283249>",
 
   "button_chevron_left": "<:button_chevron_left:1263594121256374413>",
   "button_chevron_right": "<:button_chevron_right:1263594132023279669>",

labscore/utils/statics.js

@@ -3,6 +3,12 @@ const { Hosts } = require('../api/endpoints')
 // Add static brand icons here
 // Update the revision id to break discord cache
 const Statics = Object.freeze({
+  actions: {
+    translate: {
+      file: "icons/boulevard/action-translate.png",
+      revision: 1
+    }
+  },
   assets: {
     chat_loading: {
       file: "loading/05_chat_loading.7y2ji893rho0.gif",
@@ -262,4 +268,8 @@ module.exports.STATIC_ASSETS = Object.freeze({
   image_loading: staticAsset(Statics.assets.image_loading),
   embed_invite_spacer: staticAsset(Statics.assets.embed_invite_spacer),
   emoji_placeholder: staticAsset(Statics.assets.emoji_placeholder)
+})
+
+module.exports.STATIC_ACTIONS = Object.freeze({
+  translate: staticAsset(Statics.actions.translate)
 })