From 6e51e1c3500d8b045882acd698daa0b1d481345b Mon Sep 17 00:00:00 2001
From: Riccardo Senica <riccardo@frompixels.com>
Date: Fri, 29 Nov 2024 21:20:21 +0100
Subject: [PATCH] feat: tweaking of newsletter prompt

---
 components/email/Newsletter.tsx | 47 +++++++++++++++-------
 utils/anthropic/client.ts       | 30 ++++++++++++++
 utils/anthropic/summarize.ts    | 28 +++++++++++++
 utils/anthropic/tool.ts         | 37 +++++++++++++++++
 utils/anthropicClient.ts        | 19 ---------
 utils/getNewsletterSubject.ts   | 70 ---------------------------------
 utils/summarize.ts              | 21 ----------
 7 files changed, 128 insertions(+), 124 deletions(-)
 create mode 100644 utils/anthropic/client.ts
 create mode 100644 utils/anthropic/summarize.ts
 create mode 100644 utils/anthropic/tool.ts
 delete mode 100644 utils/anthropicClient.ts
 delete mode 100644 utils/getNewsletterSubject.ts
 delete mode 100644 utils/summarize.ts

diff --git a/components/email/Newsletter.tsx b/components/email/Newsletter.tsx
index 9088175..f6a59fb 100644
--- a/components/email/Newsletter.tsx
+++ b/components/email/Newsletter.tsx
@@ -1,26 +1,23 @@
 import React from 'react';
-import { summirize } from '@utils/summarize';
+import { summirize } from '@utils/anthropic/summarize';
 import { NewsType } from '@utils/validationSchemas';
 import createDOMPurify from 'isomorphic-dompurify';
-import getNewsletterSubject from '@utils/getNewsletterSubject';
 import { Template } from './Template';
 
 export const NewsletterTemplate = async (stories: NewsType[]) => {
-  const summary = await summirize(stories);
-  const sanitizedSummary = createDOMPurify.sanitize(summary, {
-    USE_PROFILES: { html: true },
-    ADD_ATTR: ['target', 'rel', 'style']
-  });
+  const { title, content, focus } = await summirize(stories);
 
-  if (!sanitizedSummary) {
-    console.error('Failed to sanitize summary');
-    throw new Error('Failed to sanitize summary');
+  const sanitizedContent = createDOMPurify.sanitize(content);
+
+  const sanitizedFocus = createDOMPurify.sanitize(focus);
+
+  if (!sanitizedContent || !sanitizedFocus) {
+    console.error('Failed to sanitize newsletter');
+    throw new Error('Failed to sanitize newsletter');
   }
 
-  const topic = getNewsletterSubject(sanitizedSummary);
-
   return {
-    subject: topic,
+    subject: title,
     template: (
       <Template
         variant='newsletter'
@@ -60,7 +57,29 @@ export const NewsletterTemplate = async (stories: NewsType[]) => {
                 }
               `}
             </style>
-            <div dangerouslySetInnerHTML={{ __html: sanitizedSummary }} />
+            <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
+            <div
+              style={{
+                marginTop: '24px',
+                color: '#374151',
+                padding: '20px',
+                background: '#F8FAFC',
+                borderLeft: '3px solid #386FA4',
+                borderRadius: '4px'
+              }}
+            >
+              <h3
+                style={{
+                  margin: '0 0 12px 0',
+                  color: '#386FA4',
+                  fontSize: '18px',
+                  fontWeight: '600'
+                }}
+              >
+                What to Watch
+              </h3>
+              <div dangerouslySetInnerHTML={{ __html: sanitizedFocus }} />
+            </div>
           </div>
         }
       />
diff --git a/utils/anthropic/client.ts b/utils/anthropic/client.ts
new file mode 100644
index 0000000..ba1b82c
--- /dev/null
+++ b/utils/anthropic/client.ts
@@ -0,0 +1,30 @@
+import Anthropic from '@anthropic-ai/sdk';
+import { BaseTool } from './tool';
+
+export async function getMessage<T>(text: string, tool: BaseTool) {
+  const anthropic = new Anthropic({
+    apiKey: process.env.ANTHROPIC_API_KEY
+  });
+
+  console.info('Anthropic request with text: ', text);
+
+  const response = await anthropic.messages.create({
+    model: 'claude-3-5-sonnet-20241022',
+    max_tokens: 2048,
+    messages: [{ role: 'user', content: text }],
+    tools: [tool]
+  });
+
+  console.info('Anthropic response: ', response);
+
+  try {
+    const data = response.content as [
+      { type: string; text: string },
+      { type: string; input: object } // object of type V
+    ];
+
+    return data[1].input as T;
+  } catch (error) {
+    throw Error(JSON.stringify(error));
+  }
+}
diff --git a/utils/anthropic/summarize.ts b/utils/anthropic/summarize.ts
new file mode 100644
index 0000000..5d80a85
--- /dev/null
+++ b/utils/anthropic/summarize.ts
@@ -0,0 +1,28 @@
+import { getMessage } from './client';
+import { NewsType } from '../validationSchemas';
+import { NewsletterTool, newsletterTool } from './tool';
+
+export async function summirize(news: NewsType[]) {
+  const newsInput = news
+    .map(n => `TITLE: ${n.title}, CONTENT: ${n.text}, LINK: ${n.url}`)
+    .join('\n\n');
+
+  const promptSetup =
+    "You are a tech journalist with a technology degree and background. Create a tech newsletter from the following list of posts from an online forum. Use the NewsletterTool to structure your response with the following requirements:\n\n1. TITLE:\n- Create a title that is 40-50 characters long\n- Capture the most significant themes or developments\n- Use engaging but professional language\n\n2. CONTENT:\nSummarize the following list of posts from an online forum as a TL;DR (Too Long; Didn't Read) summary. Your summary should:\n1. Be 300-400 words long (not counting the urls)\n2. Structure the content in 2-3 short paragraphs, with each paragraph focusing on a specific theme or technology area\n3. Start with the 2-3 most significant or impactful news items in the first paragraph\n4. Use HTML paragraph tags (<p>) to separate paragraphs for better readability\n5. Use a tone that is informative and slightly enthusiastic, aimed at tech-savvy general readers\n6. Incorporate links as follows, including at most 3-4 words: <a href='[LINK]' target='_blank' rel='noopener noreferrer'>[linked text]</a>\n7. Each mentioned news item must include its own url link\n\n3. FOCUS:\nEnd with a forward-looking assessment of the key developments and trends emerging from these news items. Consider their potential impact on the tech landscape and any implications for future developments. Keep this section concise while maintaining an analytical perspective that helps readers understand what to watch for in the coming weeks and months.\n\nUse the NewsletterTool to provide your response with these three components.\n\nThe news items are structured as follows:\n\nTITLE: <title>\nCONTENT: <content>\nLINK: <link>\n\nPlease analyze and summarize the following news:";
+
+  try {
+    const { title, content, focus } = await getMessage<NewsletterTool>(
+      promptSetup + newsInput,
+      newsletterTool
+    );
+
+    return {
+      title,
+      content,
+      focus
+    };
+  } catch (error) {
+    console.error('Error in summarize:', error);
+    throw Error(JSON.stringify(error));
+  }
+}
diff --git a/utils/anthropic/tool.ts b/utils/anthropic/tool.ts
new file mode 100644
index 0000000..e47ed6d
--- /dev/null
+++ b/utils/anthropic/tool.ts
@@ -0,0 +1,37 @@
+export interface BaseTool {
+  readonly name: string;
+  readonly input_schema: {
+    readonly type: 'object';
+    readonly properties: Record<string, unknown>;
+    readonly required?: readonly string[];
+    readonly description?: string;
+  };
+}
+
+export interface NewsletterTool {
+  title: string;
+  content: string;
+  focus: string;
+}
+
+export const newsletterTool: BaseTool = {
+  name: 'NewsletterTool' as const,
+  input_schema: {
+    type: 'object' as const,
+    description: 'Newsletter',
+    properties: {
+      title: {
+        type: 'string' as const,
+        description: 'The title of the newsletter'
+      },
+      content: {
+        type: 'string' as const,
+        description: 'The main content of the newsletter'
+      },
+      focus: {
+        type: 'string' as const,
+        description: 'The text of the focus segment'
+      }
+    }
+  }
+} as const;
diff --git a/utils/anthropicClient.ts b/utils/anthropicClient.ts
deleted file mode 100644
index 0301b65..0000000
--- a/utils/anthropicClient.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import Anthropic from '@anthropic-ai/sdk';
-
-export async function getMessage(text: string) {
-  const anthropic = new Anthropic({
-    apiKey: process.env.ANTHROPIC_API_KEY
-  });
-
-  console.log('Anthropic request with text: ', text);
-
-  const response = await anthropic.messages.create({
-    model: 'claude-3-5-sonnet-20240620',
-    max_tokens: 1024,
-    messages: [{ role: 'user', content: text }]
-  });
-
-  console.log('Anthropic response: ', response);
-
-  return response;
-}
diff --git a/utils/getNewsletterSubject.ts b/utils/getNewsletterSubject.ts
deleted file mode 100644
index 225ddbc..0000000
--- a/utils/getNewsletterSubject.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-function extractMainTopic(summary: string): string {
-  const firstParaMatch = summary.match(/<p>(.*?)<\/p>/);
-  if (!firstParaMatch) return 'tech updates';
-
-  const firstPara = firstParaMatch[1];
-
-  const cleanText = firstPara
-    .replace(/<[^>]*>/g, '')
-    .replace(/\s+/g, ' ')
-    .replace(/[,.]+/g, ' ')
-    .trim();
-
-  const techAreas = [
-    {
-      name: 'AI',
-      pattern: /\b(AI|artificial intelligence|machine learning|ML|GPT|LLM)\b/i,
-      preserveCase: true
-    },
-    {
-      name: 'security',
-      pattern: /\b(security|cyber|hack|privacy|breach)\b/i
-    },
-    {
-      name: 'Web3',
-      pattern: /\b(blockchain|crypto|web3|NFT|token|ethereum|bitcoin)\b/i,
-      preserveCase: true
-    },
-    {
-      name: 'cloud',
-      pattern: /\b(cloud|AWS|Azure|serverless|containerization|kubernetes)\b/i
-    },
-    {
-      name: 'mobile',
-      pattern: /\b(mobile|iOS|Android|app|smartphone)\b/i
-    },
-    {
-      name: 'development',
-      pattern: /\b(developer|programming|code|software|development)\b/i
-    }
-  ];
-
-  for (const area of techAreas) {
-    if (area.pattern.test(cleanText)) {
-      return area.preserveCase ? area.name : area.name.toLowerCase();
-    }
-  }
-
-  const words = cleanText
-    .split(' ')
-    .filter(
-      word =>
-        word.length > 2 &&
-        !/^(and|the|in|of|at|by|for)$/i.test(word) &&
-        !/[,.]/.test(word)
-    )
-    .slice(0, 2)
-    .join(' ');
-
-  return words.toLowerCase() || 'tech updates';
-}
-
-export default function getNewsletterSubject(summary: string) {
-  const topic = extractMainTopic(summary);
-  const title =
-    topic === 'tech updates'
-      ? 'Today in tech updates'
-      : `Today in tech: ${topic}`;
-
-  return title;
-}
diff --git a/utils/summarize.ts b/utils/summarize.ts
deleted file mode 100644
index 808ed7d..0000000
--- a/utils/summarize.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { getMessage } from './anthropicClient';
-import { NewsType } from './validationSchemas';
-
-export async function summirize(news: NewsType[]) {
-  const newsInput = news
-    .map(n => `TITLE: ${n.title}, CONTENT: ${n.text}, LINK: ${n.url}`)
-    .join('\n\n');
-
-  const promptSetup =
-    'You are a tech journalist with a technology degree and background. Summarize the following list of posts from an online forum as a TL;DR (Too Long; Didn&apos;t Read) summary. Your summary should:\n\n1. Be 300-400 words long (not counting the urls).\n\n2. Structure the content in 2-3 short paragraphs, with each paragraph focusing on a specific theme or technology area.\n\n3. Start with the 2-3 most significant or impactful news items in the first paragraph.\n\n4. Use HTML paragraph tags (<p>) to separate paragraphs for better readability.\n\n5. Use a tone that is informative and slightly enthusiastic, aimed at tech-savvy general readers.\n\n6. Incorporate links as follows, including at most 3-4 words: <a href=&apos;[LINK]&apos; target=&apos;_blank&apos; rel=&apos;noopener noreferrer&apos;>[linked text]</a>.\n\n7. Each mentioned news item must include its own url link.\n\n8. End with a section wrapped in a div with inline styles: <div style=&apos;margin-top: 24px; padding: 20px; background: #F8FAFC; border-left: 3px solid #386FA4; border-radius: 4px;&apos;>. Inside this div, start with an <h3 style=&apos;margin: 0 0 12px 0; color: #386FA4; font-size: 18px; font-weight: 600;&apos;>What to Watch</h3> followed by a paragraph highlighting emerging trends or developments to follow.</div>\n\nFocus on conveying the key points and their potential impact on the tech landscape. Your response should consist of the summary only.\n\nThe news items are structured as follows:\n\nTITLE: <title>\nCONTENT: <content>\nLINK: <link>\n\nPlease summarize the following news:';
-  try {
-    const response = await getMessage(promptSetup + newsInput);
-
-    const summary = response.content[0] as { text: string };
-
-    return summary.text;
-  } catch (error) {
-    console.error(error);
-    return '';
-  }
-}