add AI generated support ticket titles via Anthropic

apps/web/app/api/support/route.ts

@@ -1,3 +1,4 @@
+import { anthropic } from "@/lib/anthropic";
 import { withSession } from "@/lib/auth";
 import { plain, upsertPlainCustomer } from "@/lib/plain";
 import { NextResponse } from "next/server";
@@ -13,11 +14,31 @@ export const GET = withSession(async ({ session }) => {
 export const POST = withSession(async ({ req, session }) => {
   const { message, attachmentIds } = await req.json();
 
+  let title = "New Support Request";
+
+  try {
+    const { content } = await anthropic.messages.create({
+      messages: [
+        {
+          role: "user",
+          content: `Create a short but concise title that summarizes the following support request. Only return the generated title, and nothing else.
+            
+            ${message}`,
+        },
+      ],
+      model: "claude-3-sonnet-20240229",
+      max_tokens: 300,
+    });
+    title = content[0].text;
+  } catch (e) {
+    console.error("Error generating title:", e);
+  }
+
   const res = await plain.createThread({
     customerIdentifier: {
       externalId: session.user.id,
     },
-    title: "New Support Request",
+    title,
     components: [
       {
         componentText: {
@@ -28,7 +49,5 @@ export const POST = withSession(async ({ req, session }) => {
     attachmentIds,
   });
 
-  console.log("Support request filed:", res);
-
   return NextResponse.json(res);
 });

apps/web/lib/anthropic.ts

@@ -0,0 +1,5 @@
+import Anthropic from "@anthropic-ai/sdk";
+
+export const anthropic = new Anthropic({
+  apiKey: process.env.ANTHROPIC_API_KEY || "",
+});

apps/web/package.json

@@ -11,6 +11,7 @@
     "script": "tsx ./scripts/run.ts"
   },
   "dependencies": {
+    "@anthropic-ai/sdk": "^0.20.4",
     "@boxyhq/saml-jackson": "^1.14.2",
     "@dub/tailwind-config": "workspace:*",
     "@dub/ui": "workspace:*",
@@ -44,6 +45,7 @@
     "@visx/shape": "^2.12.2",
     "@visx/text": "^3.3.0",
     "@visx/tooltip": "^2.16.0",
+    "ai": "^3.0.22",
     "aws4fetch": "^1.0.18",
     "bottleneck": "^2.19.5",
     "cmdk": "^0.2.0",

apps/web/ui/layout/help/contact-form.tsx

@@ -84,7 +84,7 @@ export function ContactForm({
     <div className="relative w-full px-3 pb-16 pt-5 sm:px-6">
       <button
         type="button"
-        className="-ml-2 flex items-center space-x-1 rounded-md px-2 py-1"
+        className="-ml-2 flex items-center space-x-1 px-2 py-1"
         onClick={() => setScreen("main")}
       >
         <ChevronLeft className="h-5 w-5" />
@@ -248,7 +248,7 @@ export function ContactForm({
               }}
             />
 
-            <div className="fixed bottom-0 left-0 z-10 flex h-16 w-full items-center justify-center bg-white px-3 sm:px-6">
+            <div className="fixed bottom-0 left-0 z-10 flex h-16 w-full items-center justify-center rounded-b-lg bg-white px-3 sm:px-6">
               <Button
                 className="h-9"
                 disabled={!data.message}

packages/ui/src/popover.tsx

@@ -53,7 +53,7 @@ export function Popover({
         <PopoverPrimitive.Content
           sideOffset={8}
           align={align}
-          className="animate-slide-up-fade z-50 items-center rounded-md border border-gray-200 bg-white drop-shadow-lg sm:block"
+          className="animate-slide-up-fade z-50 items-center rounded-lg border border-gray-200 bg-white drop-shadow-lg sm:block"
         >
           {content}
         </PopoverPrimitive.Content>