Refactor search bubble utils (#378)

fix(handlers): fix error log text

refactor(webhook): extract text and media search
- We will reuse them when proessing batch

refactor(webhook): extract bubble generation so that we can reuse them in batch processing
- Both text & media now uses "I choose 2" instead of "I choose 'some text'" to simplify logic
- Searching for text now also shows preview

refactor(handler): use `createTextMessage` in `initState` and `processMedia`
- to avoid user from copying chatbot

![image](https://github.com/cofacts/rumors-line-bot/assets/108608/edf90b3b-d24a-4abc-8a6f-11dfd13b8df9)

src/webhook/handlers/__tests__/__snapshots__/processMedia.test.js.snap

@@ -13,13 +13,42 @@ Object {
   },
   "replies": Array [
     Object {
-      "text": "🔍 There are some messages that looks similar to the one you have sent to me.",
-      "type": "text",
+      "altText": "🔍 There are some messages that looks similar to the one you have sent to me.",
+      "contents": Object {
+        "body": Object {
+          "contents": Array [
+            Object {
+              "text": "🔍 There are some messages that looks similar to the one you have sent to me.",
+              "type": "text",
+              "wrap": true,
+            },
+          ],
+          "layout": "vertical",
+          "type": "box",
+        },
+        "type": "bubble",
+      },
+      "type": "flex",
     },
     Object {
-      "text": "Internet rumors are often mutated and shared.
+      "altText": "Internet rumors are often mutated and shared.
 Please choose the version that looks the most similar👇",
-      "type": "text",
+      "contents": Object {
+        "body": Object {
+          "contents": Array [
+            Object {
+              "text": "Internet rumors are often mutated and shared.
+Please choose the version that looks the most similar👇",
+              "type": "text",
+              "wrap": true,
+            },
+          ],
+          "layout": "vertical",
+          "type": "box",
+        },
+        "type": "bubble",
+      },
+      "type": "flex",
     },
     Object {
       "altText": "Please choose the most similar message from the list.",
@@ -336,13 +365,42 @@ Object {
   },
   "replies": Array [
     Object {
-      "text": "🔍 There are some messages that looks similar to the one you have sent to me.",
-      "type": "text",
+      "altText": "🔍 There are some messages that looks similar to the one you have sent to me.",
+      "contents": Object {
+        "body": Object {
+          "contents": Array [
+            Object {
+              "text": "🔍 There are some messages that looks similar to the one you have sent to me.",
+              "type": "text",
+              "wrap": true,
+            },
+          ],
+          "layout": "vertical",
+          "type": "box",
+        },
+        "type": "bubble",
+      },
+      "type": "flex",
     },
     Object {
-      "text": "Internet rumors are often mutated and shared.
+      "altText": "Internet rumors are often mutated and shared.
 Please choose the version that looks the most similar👇",
-      "type": "text",
+      "contents": Object {
+        "body": Object {
+          "contents": Array [
+            Object {
+              "text": "Internet rumors are often mutated and shared.
+Please choose the version that looks the most similar👇",
+              "type": "text",
+              "wrap": true,
+            },
+          ],
+          "layout": "vertical",
+          "type": "box",
+        },
+        "type": "bubble",
+      },
+      "type": "flex",
     },
     Object {
       "altText": "Please choose the most similar message from the list.",
@@ -584,13 +642,42 @@ Object {
   },
   "replies": Array [
     Object {
-      "text": "🔍 There are some messages that looks similar to the one you have sent to me.",
-      "type": "text",
+      "altText": "🔍 There are some messages that looks similar to the one you have sent to me.",
+      "contents": Object {
+        "body": Object {
+          "contents": Array [
+            Object {
+              "text": "🔍 There are some messages that looks similar to the one you have sent to me.",
+              "type": "text",
+              "wrap": true,
+            },
+          ],
+          "layout": "vertical",
+          "type": "box",
+        },
+        "type": "bubble",
+      },
+      "type": "flex",
     },
     Object {
-      "text": "Internet rumors are often mutated and shared.
+      "altText": "Internet rumors are often mutated and shared.
 Please choose the version that looks the most similar👇",
-      "type": "text",
+      "contents": Object {
+        "body": Object {
+          "contents": Array [
+            Object {
+              "text": "Internet rumors are often mutated and shared.
+Please choose the version that looks the most similar👇",
+              "type": "text",
+              "wrap": true,
+            },
+          ],
+          "layout": "vertical",
+          "type": "box",
+        },
+        "type": "bubble",
+      },
+      "type": "flex",
     },
     Object {
       "altText": "Please choose the most similar message from the list.",

src/webhook/handlers/__tests__/initState.test.ts

@@ -92,20 +92,16 @@ it('long article replies still below flex message limit', async () => {
   });
   expect(gql.__finished()).toBe(true);
   expect(result.replies.length).toBeLessThanOrEqual(5); // Reply message API limit
-  const flexReply = result.replies.find(
-    (reply): reply is FlexMessage => reply.type === 'flex'
+  const carouselReply = result.replies.find(
+    (reply): reply is FlexMessage & { contents: { type: 'carousel' } } =>
+      reply.type === 'flex' && reply.contents.type === 'carousel'
   );
 
   // Make TS happy
   /* istanbul ignore if */
-  if (!flexReply) throw new Error('No flex reply in replies');
+  if (!carouselReply) throw new Error('No carouselReply reply in replies');
 
-  const carousel = flexReply.contents;
-
-  // Make TS happy
-  /* istanbul ignore if */
-  if (carousel.type !== 'carousel')
-    throw new Error('Flex reply content is not carousel');
+  const carousel = carouselReply.contents;
 
   expect(carousel.contents.length).toBeLessThanOrEqual(10); // Flex message carousel 10 bubble limit
   expect(JSON.stringify(carousel).length).toBeLessThan(50 * 1000); // Flex message carousel 50K limit
@@ -252,15 +248,15 @@ it('should handle message matches only hyperlinks', async () => {
         Object {
           "ea": "Search",
           "ec": "Article",
-          "el": "AVvY-yizyCdS-nWhuYGA",
+          "el": "AVvY-yizyCdS-nWhuYGB",
           "ni": true,
         },
       ],
       Array [
         Object {
           "ea": "Search",
           "ec": "Article",
-          "el": "AVvY-yizyCdS-nWhuYGB",
+          "el": "AVvY-yizyCdS-nWhuYGA",
           "ni": true,
         },
       ],

src/webhook/handlers/__tests__/processMedia.test.js

@@ -149,8 +149,10 @@ it('twelve articles found', async () => {
   expect(result).toMatchSnapshot();
   expect(gql.__finished()).toBe(true);
   expect(result.replies.length).toBeLessThanOrEqual(5); // Reply message API limit
-  const carousel = result.replies.find(({ type }) => type === 'flex').contents;
-  expect(carousel.type).toBe('carousel');
+  const carousel = result.replies.find(
+    ({ type, contents }) => type === 'flex' && contents.type === 'carousel'
+  ).contents;
+  expect(carousel).not.toBe(null);
   expect(carousel.contents.length).toBeLessThanOrEqual(10); // Flex message carousel 10 bubble limit
   expect(JSON.stringify(carousel).length).toBeLessThan(50 * 1000); // Flex message carousel 50K limit
 });

src/webhook/handlers/askingArticleSource.ts

@@ -30,7 +30,7 @@ const askingArticleSource: ChatbotPostbackHandler = async ({
   try {
     input = inputSchema.parse(postbackInput);
   } catch (e) {
-    console.error('[choosingReply]', e);
+    console.error('[askingArticleSource]', e);
     throw new ManipulationError(t`Please choose from provided options.`);
   }