feat: add an outbound call button

webapp/app/api/twilio/call/route.ts

@@ -0,0 +1,40 @@
+import { NextResponse } from "next/server";
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { phoneNumber } = body;
+
+    if (!phoneNumber) {
+      return NextResponse.json(
+        { error: "Phone number is required" },
+        { status: 400 }
+      );
+    }
+
+    const response = await fetch(`${process.env.PUBLIC_URL}/make-call`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ phoneNumber }),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: data.error || "Failed to make call" },
+        { status: response.status }
+      );
+    }
+
+    return NextResponse.json(data);
+  } catch (error: any) {
+    console.error("Error making call:", error);
+    return NextResponse.json(
+      { error: error.message || "Internal server error" },
+      { status: 500 }
+    );
+  }
+}

webapp/components/phone-number-checklist.tsx

@@ -3,61 +3,117 @@
 
 import React, { useState } from "react";
 import { Card } from "@/components/ui/card";
-import { CheckCircle, Circle, Eye, EyeOff } from "lucide-react";
+import { Separator } from "@/components/ui/separator";
+import { CheckCircle, Circle, Eye, EyeOff, Phone } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 type PhoneNumberChecklistProps = {
   selectedPhoneNumber: string;
   allConfigsReady: boolean;
   setAllConfigsReady: (ready: boolean) => void;
 };
 
+const DEFAULT_TARGET_NUMBER = "555-555-5555";
+
 const PhoneNumberChecklist: React.FC<PhoneNumberChecklistProps> = ({
   selectedPhoneNumber,
   allConfigsReady,
   setAllConfigsReady,
 }) => {
   const [isVisible, setIsVisible] = useState(true);
+  const [isCallLoading, setIsCallLoading] = useState(false);
+  const [targetNumber, setTargetNumber] = useState(DEFAULT_TARGET_NUMBER);
+
+  const handleCall = async () => {
+    if (!selectedPhoneNumber || !allConfigsReady || !targetNumber) return;
+
+    try {
+      setIsCallLoading(true);
+      const response = await fetch("/api/twilio/call", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ phoneNumber: targetNumber }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to make call");
+      }
+    } catch (error: any) {
+      console.error("Error making call:", error);
+    } finally {
+      setIsCallLoading(false);
+    }
+  };
 
   return (
-    <Card className="flex items-center justify-between p-4">
-      <div className="flex flex-col">
-        <span className="text-sm text-gray-500">Number</span>
-        <div className="flex items-center">
-          <span className="font-medium w-36">
-            {isVisible ? selectedPhoneNumber || "None" : "••••••••••"}
-          </span>
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => setIsVisible(!isVisible)}
-            className="h-8 w-8"
-          >
-            {isVisible ? (
-              <Eye className="h-4 w-4" />
+    <Card className="p-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div>
+            <span className="text-sm text-gray-500">Twilio Number</span>
+            <div className="flex items-center">
+              <span className="font-medium w-36">
+                {isVisible ? selectedPhoneNumber || "None" : "••••••••••"}
+              </span>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setIsVisible(!isVisible)}
+                className="h-8 w-8"
+              >
+                {isVisible ? (
+                  <Eye className="h-4 w-4" />
+                ) : (
+                  <EyeOff className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            {allConfigsReady ? (
+              <CheckCircle className="text-green-500 w-4 h-4" />
             ) : (
-              <EyeOff className="h-4 w-4" />
+              <Circle className="text-gray-400 w-4 h-4" />
             )}
+            <span className="text-sm text-gray-700">
+              {allConfigsReady ? "Setup Ready" : "Setup Not Ready"}
+            </span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setAllConfigsReady(false)}
+          >
+            Checklist
           </Button>
         </div>
       </div>
-      <div className="flex items-center gap-4">
-        <div className="flex items-center gap-2">
-          {allConfigsReady ? (
-            <CheckCircle className="text-green-500 w-4 h-4" />
-          ) : (
-            <Circle className="text-gray-400 w-4 h-4" />
-          )}
-          <span className="text-sm text-gray-700">
-            {allConfigsReady ? "Setup Ready" : "Setup Not Ready"}
-          </span>
-        </div>
+
+      <Separator className="my-4" />
+
+      <div className="flex items-center justify-between">
+        <Input
+          value={targetNumber}
+          onChange={(e) => setTargetNumber(e.target.value)}
+          placeholder="Enter phone number to call"
+          className="max-w-[300px]"
+        />
         <Button
-          variant="outline"
-          size="sm"
-          onClick={() => setAllConfigsReady(false)}
+          variant="default"
+          size="default"
+          onClick={handleCall}
+          disabled={!allConfigsReady || isCallLoading || !targetNumber}
+          className="gap-2"
         >
-          Checklist
+          <Phone className="h-4 w-4" />
+          {isCallLoading ? "Calling..." : "Call"}
         </Button>
       </div>
     </Card>

webapp/components/ui/separator.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

webapp/package.json

@@ -14,6 +14,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-scroll-area": "^1.2.1",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

websocket-server/.env.example

@@ -1,4 +1,7 @@
 # rename this to .env
 
-OPENAI_API_KEY=""
-PUBLIC_URL=""
+OPENAI_API_KEY=your_openai_api_key
+PUBLIC_URL=your_ngrok_url
+TWILIO_ACCOUNT_SID=your_twilio_account_sid
+TWILIO_AUTH_TOKEN=your_twilio_auth_token
+TWILIO_PHONE_NUMBER=your_twilio_phone_number