How To Build End-To-End AI Voice Agentic App Using AI/ML API and OpenAI Realtime API

npx shadcn@latest init

npx shadcn@latest add button

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>WEI</Button>
    </div>
  )
}

export type SessionStatus = "DISCONNECTED" | "CONNECTING" | "CONNECTED";

export interface ToolParameterProperty {
  type: string;
  description?: string;
  enum?: string[];
  pattern?: string;
  properties?: Record<string, ToolParameterProperty>;
  required?: string[];
  additionalProperties?: boolean;
  items?: ToolParameterProperty;
}

export interface ToolParameters {
  type: string;
  properties: Record<string, ToolParameterProperty>;
  required?: string[];
  additionalProperties?: boolean;
}

export interface Tool {
  type: "function";
  name: string;
  description: string;
  parameters: ToolParameters;
}

export interface AgentConfig {
  name: string;
  publicDescription: string; // gives context to agent transfer tool
  instructions: string;
  tools: Tool[];
  toolLogic?: Record<
    string,
    (args: any, transcriptLogsFiltered: TranscriptItem[]) => Promise<any> | any
  >;
  downstreamAgents?: AgentConfig[] | { name: string; publicDescription: string }[];
}

export type AllAgentConfigsType = Record<string, AgentConfig[]>;

export interface TranscriptItem {
  itemId: string;
  type: "MESSAGE" | "BREADCRUMB";
  role?: "user" | "assistant";
  title?: string;
  data?: Record<string, any>;
  expanded: boolean;
  timestamp: string;
  createdAtMs: number;
  status: "IN_PROGRESS" | "DONE";
  isHidden: boolean;
}

export interface Log {
  id: number;
  timestamp: string;
  direction: string;
  eventName: string;
  data: any;
  expanded: boolean;
  type: string;
}

export interface ServerEvent {
  type: string;
  event_id?: string;
  item_id?: string;
  transcript?: string;
  delta?: string;
  session?: {
    id?: string;
  };
  item?: {
    id?: string;
    object?: string;
    type?: string;
    status?: string;
    name?: string;
    arguments?: string;
    role?: "user" | "assistant";
    content?: {
      type?: string;
      transcript?: string | null;
      text?: string;
    }[];
  };
  response?: {
    output?: {
      type?: string;
      name?: string;
      arguments?: any;
      call_id?: string;
    }[];
    status_details?: {
      error?: any;
    };
  };
}

export interface LoggedEvent {
  id: number;
  direction: "client" | "server";
  expanded: boolean;
  timestamp: string;
  eventName: string;
  eventData: Record<string, any>; // can have arbitrary objects logged
}

export interface Activity {
  points: number;
  description: string;
}

export interface Routine {
  name: string;
  activities: Activity[];
}

import { AgentConfig } from "@/app/types";
import { getUserDataForAgent } from "@/app/utils/agentDatabaseTools";
import { injectTransferTools } from "./utils";
import { general } from "./general";

const greeter: AgentConfig = {
  name: "greeter",
  publicDescription:
    "A friendly welcome agent that greets users and provides a personalized welcome experience.",
  instructions: `
# Personality
You are Wei, a warm and friendly wellness buddy. Your role is to greet users with personalized welcome messages that acknowledge their progress, habits, and achievements. Your tone is encouraging, positive, and conversational. 
... omitted for brevity. 
`,
  tools: [
    {
      type: "function",
      name: "getUserData",
      description:
        "Get the user's profile information, habits, completions, rewards, points, streak, and recent activity.",
      parameters: {
        type: "object",
        properties: {},
        required: [],
      },
    },
  ],
  toolLogic: {
    getUserData: async () => {
      try {
        const userData = await getUserDataForAgent();
        return userData;
      } catch (error) {
        console.error("Error getting user data for greeter agent:", error);
        return {
          error: "Failed to retrieve user data. Please try again later."
        };
      }
    },
  },
  downstreamAgents: [general],
};

const agents = injectTransferTools([greeter, general]);

export default agents;

import { AgentConfig, TranscriptItem } from "@/app/types";
import { getUserDataForAgent, completeHabit } from "@/app/utils/agentDatabaseTools";

export const general: AgentConfig = {
    name: "general",
    publicDescription: "Your general wellbeing assistant. I can help you track habits, manage rewards, and provide encouragement.",
    instructions: `
# Personality and Tone
You're Wei, a friendly, motivating, and supportive wellbeing assistant who helps users track their habits, earn points, and redeem rewards. Your personality is warm and encouraging, but also straightforward and helpful. You should be conversational but concise.
... omitted for brevity.
`,
    tools: [
        {
            type: "function",
            name: "getUserData",
            description:
                "Get the user's profile information, habits, completions, rewards, points, streak, and recent activity.",
            parameters: {
                type: "object",
                properties: {},
                required: [],
            },
        },
        {
            type: "function",
            name: "completeHabit",
            description:
                "Mark a habit as complete, award points to the user, and return the updated points balance.",
            parameters: {
                type: "object",
                properties: {
                    habitId: {
                        type: "string",
                        description: "The ID of the habit to complete",
                    },
                },
                required: ["habitId"],
            },
        },
    ],
    toolLogic: {
        getUserData: async () => {
            try {
                const userData = await getUserDataForAgent();
                return userData;
            } catch (error) {
                console.error("Error getting user data for agent:", error);
                return {
                    error: "Failed to retrieve user data. Please try again later."
                };
            }
        },
        completeHabit: async ({ habitId }) => {
            try {
                const result = await completeHabit(habitId);
                return result;
            } catch (error) {
                console.error("Error completing habit:", error);
                return {
                    success: false,
                    message: "Failed to complete habit. Please try again later."
                };
            }
        }
    },
};

export default general;

import { AgentConfig } from "@/app/types";
import { getUserStats, getUserRewards, getRewardRedemptions } from "@/app/utils/agentDatabaseTools";
import { DATABASE_NAME } from "@/lib/config";
import { DATABASE_VERSION } from "@/lib/config";
import { openDB } from "idb";

const rewardsManager: AgentConfig = {
  name: "rewardsManager",
  publicDescription:
    "Displays available rewards and processes point redemptions.",
  instructions: `
# Personality and Tone
## Identity
You\'re Wei\'s cheerful curator—fun-loving, a bit mischievous, who makes rewards feel special.
... omitted for brevity.
`,
  tools: [
    {
      type: "function",
      name: "getUserStats",
      description: "Get the user's current points balance and streak information",
      parameters: {
        type: "object",
        properties: {},
        required: [],
      },
    },
    {
      type: "function",
      name: "getUserRewards",
      description: "Get the list of rewards available to the user",
      parameters: {
        type: "object",
        properties: {},
        required: [],
      },
    },
    {
      type: "function",
      name: "getRewardRedemptions",
      description: "Get the user's past reward redemptions",
      parameters: {
        type: "object",
        properties: {
          daysAgo: {
            type: "number",
            description: "Get redemptions from this many days ago (default 30)",
          },
        },
        required: [],
      },
    },
    {
      type: "function",
      name: "redeemReward",
      description: "Redeem a reward for the user, deducting points from their balance",
      parameters: {
        type: "object",
        properties: {
          rewardId: {
            type: "string",
            description: "The ID of the reward to redeem",
          },
        },
        required: ["rewardId"],
      },
    },
  ],
  toolLogic: {
    getUserStats: async () => {
      try {
        const stats = await getUserStats();
        return stats;
      } catch (error) {
        console.error("Error getting user stats:", error);
        return { error: "Failed to retrieve user stats" };
      }
    },
    getUserRewards: async () => {
      try {
        const rewards = await getUserRewards();
        return { rewards };
      } catch (error) {
        console.error("Error getting user rewards:", error);
        return { error: "Failed to retrieve rewards" };
      }
    },
    getRewardRedemptions: async ({ daysAgo = 30 }) => {
      try {
        const redemptions = await getRewardRedemptions(daysAgo);
        return { redemptions };
      } catch (error) {
        console.error("Error getting reward redemptions:", error);
        return { error: "Failed to retrieve reward redemptions" };
      }
    },
    redeemReward: async ({ rewardId }) => {
      try {
        // We need to use the database context directly since redeemReward isn't exported
        // First get the database from the context
        const db = await openDB(DATABASE_NAME, DATABASE_VERSION);

        // Get the reward details
        const reward = await db.get('rewards', rewardId);
        if (!reward) {
          db.close();
          return { 
            success: false, 
            message: "Reward not found" 
          };
        }

        // Get the user's current points
        const userData = await db.get('user', 'default');
        if (!userData || userData.points < reward.cost) {
          db.close();
          return { 
            success: false, 
            message: "Not enough points to redeem this reward" 
          };
        }

        // Create redemption record
        const redemptionId = `redemption_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
        await db.add('rewardRedemptions', {
          id: redemptionId,
          rewardId,
          redeemedAt: new Date(),
          cost: reward.cost
        });

        // Update user points
        await db.put('user', {
          ...userData,
          points: userData.points - reward.cost,
          lastActive: new Date()
        });

        // Get updated user stats
        const updatedUserData = await db.get('user', 'default');
        db.close();

        return { 
          success: true, 
          message: "Reward redeemed successfully", 
          newPoints: updatedUserData?.points || 0
        };
      } catch (error) {
        console.error("Error redeeming reward:", error);
        return { success: false, message: "Failed to redeem reward" };
      }
    },
  },
};

export default rewardsManager;

import { AgentConfig } from "@/app/types";
import { getUserStats, getHabitCompletions } from "@/app/utils/agentDatabaseTools";

const pointsCalculator: AgentConfig = {
    name: "pointsCalculator",
    publicDescription:
      "Handles computing bonus points (chain, load, gradient) on top of the base award.",
    instructions:
      `
      # Personality and Tone
      ... omitted for brevity.
`,
    tools: [
      {
        type: "function",
        name: "getUserStats",
        description: "Get the user's current points balance and streak information",
        parameters: {
          type: "object",
          properties: {},
          required: [],
        },
      },
      {
        type: "function",
        name: "getHabitCompletions",
        description: "Get the user's habit completion history for calculating bonuses",
        parameters: {
          type: "object",
          properties: {
            daysAgo: {
              type: "number",
              description: "Get completions from this many days ago (default 30)",
            },
          },
          required: [],
        },
      },
      {
        type: "function",
        name: "calculateBonusPoints",
        description: "Calculate bonus points based on streak, consistency, and habit difficulty",
        parameters: {
          type: "object",
          properties: {
            habitId: {
              type: "string",
              description: "The ID of the habit to calculate bonuses for",
            },
            basePoints: {
              type: "number",
              description: "The base points awarded for this habit",
            },
          },
          required: ["habitId", "basePoints"],
        },
      },
    ],
    toolLogic: {
      getUserStats: async () => {
        try {
          const stats = await getUserStats();
          return stats;
        } catch (error) {
          console.error("Error getting user stats:", error);
          return { error: "Failed to retrieve user stats" };
        }
      },
      getHabitCompletions: async ({ daysAgo = 30 }) => {
        try {
          const completions = await getHabitCompletions(daysAgo);
          return { completions };
        } catch (error) {
          console.error("Error getting habit completions:", error);
          return { error: "Failed to retrieve habit completions" };
        }
      },
      calculateBonusPoints: async ({ habitId, basePoints }) => {
        try {
          // Get user's habit completions to calculate streaks and consistency
          const completions = await getHabitCompletions(30);

          // Filter completions for this specific habit
          const habitCompletions = completions.filter(
            completion => completion.habitId === habitId
          );

          // Get user stats for streak information
          const stats = await getUserStats();

          // Calculate chain bonus (consecutive days)
          let chainBonus = 0;
          if (habitCompletions.length > 0) {
            // Sort by date, newest first
            const sortedCompletions = [...habitCompletions].sort(
              (a, b) => new Date(b.completedAt).getTime() - new Date(a.completedAt).getTime()
            );

            // Check if there was a completion yesterday
            const yesterday = new Date();
            yesterday.setDate(yesterday.getDate() - 1);
            yesterday.setHours(0, 0, 0, 0);

            const yesterdayCompletion = sortedCompletions.find(completion => {
              const completionDate = new Date(completion.completedAt);
              completionDate.setHours(0, 0, 0, 0);
              return completionDate.getTime() === yesterday.getTime();
            });

            if (yesterdayCompletion) {
              chainBonus = Math.min(3, Math.floor(habitCompletions.length / 2));
            }
          }

          // Calculate streak bonus
          const streakBonus = Math.min(5, Math.floor(stats.streakDays / 3));

          // Calculate consistency bonus (based on completion frequency)
          const today = new Date();
          today.setHours(0, 0, 0, 0);
          const lastWeekCompletions = completions.filter(completion => {
            const completionDate = new Date(completion.completedAt);
            const daysDiff = Math.floor((today.getTime() - completionDate.getTime()) / (1000 * 60 * 60 * 24));
            return daysDiff < 7;
          });

          const consistencyBonus = Math.min(2, Math.floor(lastWeekCompletions.length / 3));

          // Calculate total bonus
          const totalBonus = chainBonus + streakBonus + consistencyBonus;
          const totalPoints = basePoints + totalBonus;

          return {
            basePoints,
            chainBonus,
            streakBonus,
            consistencyBonus,
            totalBonus,
            totalPoints,
            explanation: `${basePoints} base + ${chainBonus} chain + ${streakBonus} streak + ${consistencyBonus} consistency = ${totalPoints} total`
          };
        } catch (error) {
          console.error("Error calculating bonus points:", error);
          return { 
            error: "Failed to calculate bonus points",
            basePoints,
            totalPoints: basePoints
          };
        }
      }
    },
  };

export default pointsCalculator;

import { AgentConfig } from "@/app/types";
import { getUserHabits, getHabitCompletions, completeHabit } from "@/app/utils/agentDatabaseTools";

const habitTracker: AgentConfig = {
  name: "habitTracker",
  publicDescription:
    "Logs user activities and awards base points for each habit.",
  instructions:
    `# Personality and Tone
## Identity
You\'re Wei\'s meticulous assistant—calm, precise, and detail-oriented—dedicated to tracking every healthy choice the user makes.
... omitted for brevity.
`,
  tools: [
    {
      type: "function",
      name: "getUserHabits",
      description: "Get the list of habits the user has created",
      parameters: {
        type: "object",
        properties: {},
        required: [],
      },
    },
    {
      type: "function",
      name: "getHabitCompletions",
      description: "Get the list of habit completions for the past X days",
      parameters: {
        type: "object",
        properties: {
          daysAgo: {
            type: "number",
            description: "Get completions from this many days ago (default 30)",
          },
        },
        required: [],
      },
    },
    {
      type: "function",
      name: "completeHabit",
      description: "Mark a habit as complete and award points to the user",
      parameters: {
        type: "object",
        properties: {
          habitId: {
            type: "string",
            description: "The ID of the habit to mark as complete",
          },
        },
        required: ["habitId"],
      },
    },
  ],
  toolLogic: {
    getUserHabits: async () => {
      try {
        const habits = await getUserHabits();
        return { habits };
      } catch (error) {
        console.error("Error getting user habits:", error);
        return { error: "Failed to retrieve habits" };
      }
    },
    getHabitCompletions: async ({ daysAgo = 30 }) => {
      try {
        const completions = await getHabitCompletions(daysAgo);
        return { completions };
      } catch (error) {
        console.error("Error getting habit completions:", error);
        return { error: "Failed to retrieve habit completions" };
      }
    },
    completeHabit: async ({ habitId }) => {
      try {
        const result = await completeHabit(habitId);
        return result;
      } catch (error) {
        console.error("Error completing habit:", error);
        return { success: false, message: "Failed to complete habit" };
      }
    },
  },
};

export default habitTracker;

import { AgentConfig } from "@/app/types";

/**
 * This agent specializes in providing users with information about their data
 * It can answer questions about points, habits, streaks, etc.
 */
const userDataAgent: AgentConfig = {
  name: "user-data-agent",
  publicDescription: "Helps users understand their data, points, habits, and rewards",
  instructions: `You are Wei's user data specialist. Your primary role is to help users access and understand their data.
  ... omitted for brevity.
`,
  tools: [],
};

export default userDataAgent; 

import rewardsManager from "./rewards-manager";
import pointsCalculator from "./points-calculator";
import habitTracker from "./habit-tracker";
import userDataAgent from "./user-data-agent";
import { injectTransferTools } from "../utils";

// Set up the transfer relationships between agents
rewardsManager.downstreamAgents = [pointsCalculator, habitTracker, userDataAgent];
pointsCalculator.downstreamAgents = [rewardsManager, habitTracker, userDataAgent];
habitTracker.downstreamAgents = [rewardsManager, pointsCalculator, userDataAgent];
userDataAgent.downstreamAgents = [rewardsManager, pointsCalculator, habitTracker];

// Apply transfer tools to all agents
const agents = injectTransferTools([
  rewardsManager,
  pointsCalculator,
  habitTracker,
  userDataAgent,
]);

export default agents;

import { AllAgentConfigsType } from "@/app/types";
import greeter from "./greeter";
import wellbeing from "./wellbeing";

export const allAgentSets: AllAgentConfigsType = {
  wellbeing,
  greeter,
};

// Set wellbeing as the default agent set since it contains our user data agent
export const defaultAgentSetKey = "wellbeing";

import { AgentConfig, Tool } from "@/app/types";
import { UserCache } from "@/app/contexts/UserCacheContext";

/**
 * This defines and adds "transferAgents" tool dynamically based on the specified downstreamAgents on each agent.
 */
export function injectTransferTools(agentDefs: AgentConfig[]): AgentConfig[] {
  // Iterate over each agent definition
  agentDefs.forEach((agentDef) => {
    const downstreamAgents = agentDef.downstreamAgents || [];

    // Only proceed if there are downstream agents
    if (downstreamAgents.length > 0) {
      // Build a list of downstream agents and their descriptions for the prompt
      const availableAgentsList = downstreamAgents
        .map(
          (dAgent) =>
            `- ${dAgent.name}: ${dAgent.publicDescription ?? "No description"}`
        )
        .join("\n");

      // Create the transfer_agent tool specific to this agent
      const transferAgentTool: Tool = {
        type: "function",
        name: "transferAgents",
        description: `Triggers a transfer of the user to a more specialized agent. 
  Calls escalate to a more specialized LLM agent or to a human agent, with additional context. 
  Only call this function if one of the available agents is appropriate. Don't transfer to your own agent type.

  Let the user know you're about to transfer them before doing so.

  Available Agents:
  ${availableAgentsList}
        `,
        parameters: {
          type: "object",
          properties: {
            rationale_for_transfer: {
              type: "string",
              description: "The reasoning why this transfer is needed.",
            },
            conversation_context: {
              type: "string",
              description:
                "Relevant context from the conversation that will help the recipient perform the correct action.",
            },
            destination_agent: {
              type: "string",
              description:
                "The more specialized destination_agent that should handle the user's intended request.",
              enum: downstreamAgents.map((dAgent) => dAgent.name),
            },
          },
          required: [
            "rationale_for_transfer",
            "conversation_context",
            "destination_agent",
          ],
        },
      };

      // Ensure the agent has a tools array
      if (!agentDef.tools) {
        agentDef.tools = [];
      }

      // Add the newly created tool to the current agent's tools
      agentDef.tools.push(transferAgentTool);
    }

    // so .stringify doesn't break with circular dependencies
    agentDef.downstreamAgents = agentDef.downstreamAgents?.map(
      ({ name, publicDescription }) => ({
        name,
        publicDescription,
      })
    );
  });

  return agentDefs;
}

/**
 * Enhances agent instructions with user data from cache
 * This allows agents to have personalized context about the user
 * Also adds user data access tools to the agent
 */
export function injectUserContext(agentDef: AgentConfig, userCache: UserCache): AgentConfig {
  // Create a deep copy to avoid mutating the original
  const enhancedAgent = { ...agentDef };

  if (!userCache) {
    return enhancedAgent;
  }

  // Create a user context section to append to instructions
  const userContextBlock = createUserContextBlock(userCache);

  // Append the user context to the agent's instructions
  if (enhancedAgent.instructions) {
    enhancedAgent.instructions = `${enhancedAgent.instructions}\n\n# User Context\n${userContextBlock}`;
  }

  // Add user data access tools
  const userDataTools = createUserDataTools();

  // Ensure the agent has a tools array
  if (!enhancedAgent.tools) {
    enhancedAgent.tools = [];
  }

  // Add user data tools to the agent's tools
  enhancedAgent.tools.push(...userDataTools);

  return enhancedAgent;
}

/**
 * Creates a formatted block of user context from cache data
 * Optimized to provide concise but useful information
 */
function createUserContextBlock(userCache: UserCache): string {
  if (!userCache) {
    return "No user data available.";
  }

  let contextBlock = '';

  // Add user profile information
  if (userCache.profile) {
    contextBlock += `## User Profile\n`;
    contextBlock += `- Name: ${userCache.profile.name || 'Unknown'}\n`;
    if (userCache.profile.bio) contextBlock += `- Bio: ${userCache.profile.bio}\n`;
    contextBlock += `- Member since: ${userCache.profile.joinDate || 'Unknown'}\n\n`;
  }

  // Add points and streak information (most frequently asked)
  contextBlock += `## Summary Stats\n`;
  contextBlock += `- Current points: ${userCache.points || 0}\n`;
  contextBlock += `- Current streak: ${userCache.streak || 0} days\n`;

  // Add habit count and category summary (not full details)
  if (userCache.habits && userCache.habits.length > 0) {
    const habitCategories = userCache.habits.reduce((acc: Record<string, number>, habit: any) => {
      const category = habit.category || 'Uncategorized';
      acc[category] = (acc[category] || 0) + 1;
      return acc;
    }, {});

    contextBlock += `- Active habits: ${userCache.habits.length} habits\n`;
    contextBlock += `- Categories: ${Object.entries(habitCategories).map(([cat, count]) => `${cat} (${count})`).join(', ')}\n\n`;
  }

  // Add just 2-3 recent activities as examples (not all)
  if (userCache.recentActivity && userCache.recentActivity.length > 0) {
    contextBlock += `## Recent Activity Examples\n`;
    userCache.recentActivity.slice(0, 3).forEach((activity: any) => {
      contextBlock += `- ${activity.action} "${activity.target}" (${activity.points > 0 ? '+' : ''}${activity.points} points) on ${activity.date}\n`;
    });
    contextBlock += '\n';
  }

  // Add note about available tools
  contextBlock += `*Note: For detailed user information, use the provided user data access functions.*\n`;

  return contextBlock;
}

/**
 * Creates a set of tools that allow the agent to access specific user data
 * Note: The actual implementation of these tools is in the API route handler
 */
function createUserDataTools(): Tool[] {
  // Prepare the tools array
  const tools: Tool[] = [];

  // Get user profile info
  const getUserProfileTool: Tool = {
    type: "function",
    name: "getUserProfile",
    description: "Get detailed user profile information",
    parameters: {
      type: "object",
      properties: {
        fields: {
          type: "array",
          items: {
            type: "string"
          },
          description: "Optional array of specific profile fields to retrieve"
        }
      },
      required: []
    }
  };
  tools.push(getUserProfileTool);

  // Get user points and streak
  const getUserStatsTool: Tool = {
    type: "function",
    name: "getUserStats",
    description: "Get user's current points and streak information",
    parameters: {
      type: "object",
      properties: {},
      required: []
    }
  };
  tools.push(getUserStatsTool);

  // Get user habits
  const getUserHabitsTool: Tool = {
    type: "function",
    name: "getUserHabits",
    description: "Get list of user's active habits with details",
    parameters: {
      type: "object",
      properties: {
        category: {
          type: "string",
          description: "Optional category to filter habits by"
        }
      },
      required: []
    }
  };
  tools.push(getUserHabitsTool);

  // Get user recent activity
  const getUserActivityTool: Tool = {
    type: "function",
    name: "getRecentActivity",
    description: "Get user's recent activity history",
    parameters: {
      type: "object",
      properties: {
        limit: {
          type: "number",
          description: "Number of activities to return (defaults to 5)"
        },
        activityType: {
          type: "string",
          description: "Filter by activity type ('Completed' or 'Redeemed')"
        }
      },
      required: []
    }
  };
  tools.push(getUserActivityTool);

  // Get user rewards
  const getUserRewardsTool: Tool = {
    type: "function",
    name: "getUserRewards",
    description: "Get user's available rewards",
    parameters: {
      type: "object",
      properties: {},
      required: []
    }
  };
  tools.push(getUserRewardsTool);

  // Get reward redemptions
  const getRewardRedemptionsTool: Tool = {
    type: "function",
    name: "getRewardRedemptions",
    description: "Get the user's past reward redemptions",
    parameters: {
      type: "object",
      properties: {
        daysAgo: {
          type: "number",
          description: "Get redemptions from this many days ago (default 30)"
        }
      },
      required: []
    }
  };
  tools.push(getRewardRedemptionsTool);

  return tools;
}

import { NextResponse } from "next/server";
import OpenAI from "openai";

const openai = new OpenAI();

// Define default functions that all agents can access
const defaultFunctions = [
  {
    name: "getUserProfile",
    description: "Get the user's profile information",
    parameters: {
      type: "object",
      properties: {
        fields: {
          type: "array",
          items: {
            type: "string"
          },
          description: "Optional array of specific profile fields to retrieve"
        }
      },
      required: []
    }
  },
  {
    name: "getUserHabits",
    description: "Get the list of habits the user has created",
    parameters: {
      type: "object",
      properties: {},
      required: []
    }
  },
  {
    name: "getHabitCompletions",
    description: "Get the list of habit completions for the past X days",
    parameters: {
      type: "object",
      properties: {
        daysAgo: {
          type: "number",
          description: "Get completions from this many days ago (default 30)"
        }
      },
      required: []
    }
  },
  {
    name: "completeHabit",
    description: "Mark a habit as complete and award points to the user",
    parameters: {
      type: "object",
      properties: {
        habitId: {
          type: "string",
          description: "The ID of the habit to mark as complete"
        }
      },
      required: ["habitId"]
    }
  },
  {
    name: "getUserStats",
    description: "Get the user's current points balance and streak information",
    parameters: {
      type: "object",
      properties: {},
      required: []
    }
  },
  {
    name: "getUserRewards",
    description: "Get the list of rewards available to the user",
    parameters: {
      type: "object",
      properties: {},
      required: []
    }
  },
  {
    name: "getRewardRedemptions",
    description: "Get the user's past reward redemptions",
    parameters: {
      type: "object",
      properties: {
        daysAgo: {
          type: "number",
          description: "Get redemptions from this many days ago (default 30)"
        }
      },
      required: []
    }
  },
  {
    name: "redeemReward",
    description: "Redeem a reward for the user, deducting points from their balance",
    parameters: {
      type: "object",
      properties: {
        rewardId: {
          type: "string",
          description: "The ID of the reward to redeem"
        }
      },
      required: ["rewardId"]
    }
  },
  {
    name: "calculateBonusPoints",
    description: "Calculate bonus points based on streak, consistency, and habit difficulty",
    parameters: {
      type: "object",
      properties: {
        habitId: {
          type: "string",
          description: "The ID of the habit to calculate bonuses for"
        },
        basePoints: {
          type: "number",
          description: "The base points awarded for this habit"
        }
      },
      required: ["habitId", "basePoints"]
    }
  }
];

export async function POST(req: Request) {
  try {
    // Extract request parameters
    const { model, messages, functions, function_call, userCache } = await req.json();

    // Set up the completion options
    const completionOptions: any = {
      model,
      messages,
    };

    // Use client-provided functions or default functions
    if (functions) {
      completionOptions.functions = functions;
    } else {
      completionOptions.functions = defaultFunctions;
    }

    // Handle function_call parameter
    if (function_call) {
      completionOptions.function_call = function_call;
    } else {
      completionOptions.function_call = 'auto';
    }

    // Make the API call
    const completion = await openai.chat.completions.create(completionOptions);

    // Check if the model has generated a function call
    const message = completion.choices[0].message;

    if (message.function_call) {
      // Handle the function call using cached data if available
      const functionResponse = await handleFunctionCall(message.function_call, userCache);

      // Add the function call and result to the messages for a follow-up
      const newMessages = [
        ...messages,
        {
          role: 'assistant',
          content: null,
          function_call: message.function_call
        },
        {
          role: 'function',
          name: message.function_call.name,
          content: functionResponse
        }
      ];

      // Call the model again with the function result
      const followUpCompletion = await openai.chat.completions.create({
        model,
        messages: newMessages,
        functions: completionOptions.functions,
        function_call: 'auto'
      });

      return NextResponse.json(followUpCompletion);
    }

    if (message.tool_calls) {
      // Handle tool calls in the OpenAI format
      const toolResponse = await handleToolCalls(message.tool_calls, userCache);

      // Add the tool calls and result to messages for follow-up
      const newMessages = [
        ...messages,
        {
          role: 'assistant',
          content: null,
          tool_calls: message.tool_calls
        }
      ];

      // Add each tool response
      for (const toolCall of toolResponse) {
        newMessages.push({
          role: 'tool',
          tool_call_id: toolCall.tool_call_id,
          content: toolCall.content
        });
      }

      // Call the model again with the tool results
      const followUpCompletion = await openai.chat.completions.create({
        model,
        messages: newMessages,
        tools: completionOptions.functions.map((fn: any) => ({ type: 'function', function: fn })),
        tool_choice: 'auto'
      });

      return NextResponse.json(followUpCompletion);
    }

    return NextResponse.json(completion);
  } catch (error: any) {
    console.error("Error in /chat/completions:", error);
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

async function handleFunctionCall(functionCall: any, userCache: any) {
  const { name, arguments: argsString } = functionCall;
  let args;

  try {
    args = JSON.parse(argsString);
  } catch (e) {
    return JSON.stringify({ error: "Invalid function arguments" });
  }

  // If we have userCache, use it for function responses
  if (userCache) {
    return await handleDatabaseFunction(name, args, userCache);
  }

  // Otherwise return a message that the function isn't available without cached data
  return JSON.stringify({
    error: "This function requires user data that is not currently available.",
    message: "Please try refreshing the page to load your latest data."
  });
}

// Handle tool calls using cached data
async function handleToolCalls(toolCalls: any, userCache: any) {
  const responses = [];

  for (const toolCall of toolCalls) {
    if (toolCall.type === 'function') {
      const { name, arguments: argsString } = toolCall.function;
      let args;

      try {
        args = JSON.parse(argsString);
      } catch (e) {
        responses.push({
          tool_call_id: toolCall.id,
          content: JSON.stringify({ error: "Invalid function arguments" })
        });
        continue;
      }

      const result = await handleDatabaseFunction(name, args, userCache);
      responses.push({
        tool_call_id: toolCall.id,
        content: result
      });
    }
  }

  return responses;
}

async function handleDatabaseFunction(name: string, args: any, userCache: any) {
  switch (name) {
    case "getUserProfile":
      // Return the user profile with optional field filtering
      if (args.fields && Array.isArray(args.fields) && args.fields.length > 0) {
        const filteredProfile: Record<string, any> = {};
        for (const field of args.fields) {
          if (userCache.profile && userCache.profile[field] !== undefined) {
            filteredProfile[field] = userCache.profile[field];
          }
        }
        return JSON.stringify(filteredProfile);
      }
      // Return the complete profile if no fields specified
      return JSON.stringify(userCache.profile || { name: "Unknown User" });

    case "getUserHabits":
      // Filter habits by category if specified
      if (args.category && userCache.habits) {
        const filteredHabits = userCache.habits.filter((habit: any) => habit.category === args.category);
        return JSON.stringify({
          habits: filteredHabits,
          count: filteredHabits.length
        });
      }
      // Return all habits if no category filter
      return JSON.stringify({
        habits: userCache.habits || [],
        count: (userCache.habits || []).length
      });

    case "getHabitCompletions":
      // Get completions from the past X days
      const daysAgo = args.daysAgo || 30;
      const cutoffDate = new Date();
      cutoffDate.setDate(cutoffDate.getDate() - daysAgo);

      // Filter completions by date
      const filteredCompletions = userCache.completions
        ? userCache.completions.filter(
            (completion: any) => new Date(completion.completedAt) >= cutoffDate
          )
        : [];

      return JSON.stringify({
        completions: filteredCompletions,
        count: filteredCompletions.length
      });

    case "getUserStats":
      // Return points and streak
      return JSON.stringify({
        points: userCache.points || 0,
        streak: userCache.streak || 0
      });

    case "getUserRewards":
      // Return all rewards
      return JSON.stringify({
        rewards: userCache.rewards || [],
        count: (userCache.rewards || []).length
      });

    case "getRewardRedemptions":
      // Get redemptions from the past X days
      const redemptionDaysAgo = args.daysAgo || 30;
      const redemptionCutoffDate = new Date();
      redemptionCutoffDate.setDate(redemptionCutoffDate.getDate() - redemptionDaysAgo);

      // Filter redemptions by date
      const filteredRedemptions = userCache.redemptions
        ? userCache.redemptions.filter(
            (redemption: any) => new Date(redemption.redeemedAt) >= redemptionCutoffDate
          )
        : [];

      return JSON.stringify({
        redemptions: filteredRedemptions,
        count: filteredRedemptions.length
      });

    case "getRecentActivity":
      // Get recent activity with optional filtering
      let activities = userCache.recentActivity || [];
      const limit = args.limit || 5;

      // Filter by activity type if provided
      if (args.activityType) {
        activities = activities.filter((activity: any) => activity.action === args.activityType);
      }

      return JSON.stringify({
        activities: activities.slice(0, limit),
        count: activities.length
      });

    case "completeHabit":
      // This would normally update the database, but in this context
      // we're just returning a success message since we can't modify the DB from here
      return JSON.stringify({
        success: true,
        message: "Habit marked as complete (simulation only, database not updated)"
      });

    case "redeemReward":
      // This would normally update the database, but in this context
      // we're just returning a success message since we can't modify the DB from here
      return JSON.stringify({
        success: true,
        message: "Reward redeemed (simulation only, database not updated)"
      });

    case "calculateBonusPoints":
      // Get the habit from cache
      const habit = userCache.habits
        ? userCache.habits.find((h: any) => h.id === args.habitId)
        : null;

      if (!habit) {
        return JSON.stringify({
          error: "Habit not found",
          bonusPoints: 0
        });
      }

      // Calculate a simple bonus based on streak
      const streakBonus = Math.min(50, Math.floor(userCache.streak / 2));
      const difficultyBonus = habit.difficulty ? (habit.difficulty * 5) : 0;
      const totalBonus = streakBonus + difficultyBonus;

      return JSON.stringify({
        basePoints: args.basePoints,
        streakBonus,
        difficultyBonus, 
        totalBonus,
        totalPoints: args.basePoints + totalBonus
      });

    default:
      return JSON.stringify({
        error: `Unknown function: ${name}`,
        message: "This function is not supported."
      });
  }
}

npx shadcn@latest add --all

npx shadcn@latest add --all

npm install motion

npx motion-primitives@latest add text-effect text-shimmer glow-effect

npx shadcn@latest add "https://prompt-kit.com/c/[COMPONENT].json"

"use client";

import { useState, useRef, useEffect } from "react";
import { usePathname } from "next/navigation";
import { useChat } from "@/app/contexts/ChatContext";
import { Card, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import ChatMessage from "./ChatMessage";
import ChatHistory from "./ChatHistory";
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";
import { ChatInput } from "../chat-input/chat-input";
import { ArrowLeft, ListMagnifyingGlass, PencilSimpleLine } from "@phosphor-icons/react/dist/ssr";
import { useRouter } from "next/navigation";
import { TextShimmer } from "@/components/motion-primitives/text-shimmer";

interface ChatInterfaceProps {}

export default function ChatInterface({ }: ChatInterfaceProps) {
  const { messages, isTyping, sendMessage, clearMessages, loadConversation, currentConversationId } = useChat();
  const [inputValue, setInputValue] = useState("");
  const [isSending, setIsSending] = useState(false);
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const scrollAreaRef = useRef<HTMLDivElement>(null);
  const pathname = usePathname();
  const router = useRouter();

  // Scroll to bottom when messages change
  useEffect(() => {
    if (scrollAreaRef.current) {
      scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight;
    }
  }, [messages]);

  const handleSendMessage = async () => {
    if (!inputValue.trim() || isSending) return;

    setIsSending(true);
    setInputValue("");

    try {
      await sendMessage(inputValue.trim());
    } catch (error) {
      console.error("Failed to send message:", error);
    } finally {
      setIsSending(false);
    }
  };

  const handleLoadConversation = (conversation: any) => {
    // Load the conversation messages to the chat
    if (conversation && conversation.messages) {
      // Exclude the welcome message (first message) from the conversation
      const messagesToLoad = conversation.messages.slice(1);

      // Load messages into the chat
      loadConversation(messagesToLoad);

      // Close drawer
      setIsDrawerOpen(false);
    }
  };

  return (
    <Card className={`flex gap-4 bg-transparent border-none shadow-none flex-col p-2 h-[100dvh]`}>
      <CardHeader className="pb-0 pt-0 px-0 border-b border-border [.border-b]:pb-2">
        <div className="flex items-center justify-between">
          <CardTitle className="flex items-center gap-2">
            <Button 
              variant="ghost" 
              size="icon" 
              onClick={() => router.back()}
              title="Back to dashboard"
            >
              <ArrowLeft className="size-4" />
            </Button>
            <Avatar className="h-8 w-8 bg-gradient-to-br from-pink-500 to-rose-500">
              <AvatarImage src="/wei-icon.png" alt="Wei Icon" />
              <AvatarFallback>WEI</AvatarFallback>
            </Avatar>
            <span>Chat with Wei</span>
          </CardTitle>

          <div className="flex items-center gap-2">
            <Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
              <DrawerTrigger asChild>
                <Button 
                  variant="ghost" 
                  size="icon" 
                  title="Chat History"
                >
                  <ListMagnifyingGlass className="size-4" />
                </Button>
              </DrawerTrigger>
              <DrawerContent>
                <div className="mx-auto w-full max-w-sm">
                  <DrawerHeader className="text-center">
                    <DrawerTitle>Conversation History</DrawerTitle>
                  </DrawerHeader>

                  <ChatHistory onSelectConversation={handleLoadConversation} />

                </div>
              </DrawerContent>
            </Drawer>

            <Button variant="ghost" size="icon" onClick={clearMessages} title="Reset chat">
              <PencilSimpleLine className="size-4" />
            </Button>
          </div>
        </div>
      </CardHeader>

      <ScrollArea className="flex-1 px-0 overflow-y-auto" ref={scrollAreaRef}>
        <div className="space-y-4 py-4">
          {messages.map((message) => (
            <ChatMessage 
              key={message.id} 
              message={message} 
            />
          ))}

          {isTyping && (
            <div className="flex items-center gap-2 animate-pulse">
              <Avatar className="h-8 w-8 bg-gradient-to-br from-pink-500 to-rose-500">
                <AvatarImage src="/wei-icon.png" alt="Wei Icon" />
                <AvatarFallback>WEI</AvatarFallback>
              </Avatar>
              <span className="text-sm text-muted-foreground">
                <TextShimmer>
                  Wei is typing...
                </TextShimmer>
              </span>
            </div>
          )}
        </div>
      </ScrollArea>

      <CardFooter className="pt-0 px-0 w-full">
        <ChatInput
          value={inputValue}
          onValueChange={setInputValue}
          onSend={handleSendMessage}
          isSubmitting={isSending}
          files={[]}
          onFileUpload={() => {}}
          onFileRemove={() => {}}
          stop={() => {}}
          status={isSending ? "submitted" : "ready"}
          connected={true}
          partnerDisconnected={false}
        />
      </CardFooter>
    </Card>
  );
} 

"use client"

import {
  PromptInput,
  PromptInputAction,
  PromptInputActions,
  PromptInputTextarea,
} from "@/components/prompt-kit/prompt-input"
import { Button } from "@/components/ui/button"
import { ArrowUp } from "@phosphor-icons/react/dist/ssr"
import React, { useCallback, useEffect, useRef, useState } from "react"
import { ButtonFileUpload } from "./button-file-upload"
import { ButtonVideoChat } from "./button-video-chat"
import { FileList } from "./file-list"
import { ButtonEmojiPicker } from "./button-emoji-picker"
import { ButtonGifPicker } from "./button-gif-picker"
import { toast } from "sonner"
import { Stop } from "@phosphor-icons/react"
import { ButtonRecord } from "./button-record"

type ChatInputProps = {
  value: string
  onValueChange: (value: string) => void
  onSend: () => void
  isSubmitting?: boolean
  files: File[]
  onFileUpload: (files: File[]) => void
  onFileRemove: (file: File) => void
  stop: () => void
  status?: "submitted" | "streaming" | "ready" | "error"
  connected?: boolean
  partnerDisconnected?: boolean
}

export function ChatInput({
  value,
  onValueChange,
  onSend,
  isSubmitting,
  files,
  onFileUpload,
  onFileRemove,
  stop,
  status,
  connected = true,
  partnerDisconnected = false,
}: ChatInputProps) {

  const textareaRef = useRef<HTMLTextAreaElement | null>(null);

  // Textarea auto-resize
  useEffect(() => {
    const textarea = textareaRef.current;
    if (!textarea) return;

    const adjustHeight = () => {
      textarea.style.height = 'auto';
      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
    };

    textarea.addEventListener('input', adjustHeight);

    return () => {
      textarea.removeEventListener('input', adjustHeight);
    };
  }, []);

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (isSubmitting) return

      if (e.key === "Enter" && !e.shiftKey) {
        e.preventDefault()
        onSend()
      }
    },
    [onSend, isSubmitting]
  )

  const handleInputChange = (newValue: string) => {
    if (pendingAttachment) return; // Disable text input if image is selected

    if (newValue.length > 1000) {
      toast("Message too long", { 
        description: "Please keep your message under 1000 characters.",
        duration: 2000,
      });
      return;
    }

    onValueChange(newValue);
  };

  const handleMainButtonClick = () => {
    if (isSubmitting && status !== "streaming") {
      return;
    }

    if (isSubmitting && status === "streaming") {
      stop();
      return;
    }

    onSend();
  };

  return (
    <>
      <div className="w-full relative order-2 px-0 sm:px-0 pb-0 md:order-1">
        <PromptInput
          className={`rounded-xl border-input bg-card/80 relative z-10 overflow-hidden border p-0 pb-2 shadow-xs backdrop-blur-xl`}
          maxHeight={200}
          value={value}
          onValueChange={handleInputChange}
        >
          <FileList files={files} onFileRemove={onFileRemove} />
          <PromptInputTextarea
            placeholder={connected ? (files.length > 0 ? "Image selected. Click send to share it." : "Type a message...") : "Connect to start chatting..."}
            onKeyDown={handleKeyDown}
            className="mt-2 ml-2 min-h-[44px] max-h-[150px] text-sm leading-[1.3] sm:text-sm md:text-sm placeholder:text-sm"
            disabled={isSubmitting || files.length > 0 || pendingAttachment !== null}
            ref={textareaRef}
          />
          <PromptInputActions className="mt-1 w-full justify-between px-2">
            <div className="flex gap-2">
              {/* File Upload */}
              {/* Emoji Picker */}
              {/* GIF Picker */}
            </div>
            <div className="flex gap-2">
              {/* Video Chat Button */}
              {/* Record Button */}
              {/* Send Message Button */}
              <PromptInputAction
                tooltip={isSubmitting ? "Stop generating" : (value.length > 0 || files.length > 0 ? "Send message" : "Enter a message")}
              >
                <Button
                  variant="default"
                  size="icon"
                  className={`size-8 rounded-lg transition-all duration-300 ease-out ${isSubmitting && "cursor-wait"} ${(value.length > 0 || files.length > 0) ? "cursor-pointer" : "cursor-not-allowed"}`}
                  onClick={handleMainButtonClick}
                  disabled={!(value.length > 0 || files.length > 0) || !connected || partnerDisconnected || (isSubmitting && status !== "streaming")}
                  type="button"
                  aria-label={isSubmitting && status === "streaming" ? "Stop generating" : "Send message"}
                >
                  {isSubmitting && status === "streaming" ? (
                    <Stop className="size-4" weight="fill"/>
                  ) : (
                    <ArrowUp className="size-4" />
                  )}
                </Button>
              </PromptInputAction>
            </div>
          </PromptInputActions>
        </PromptInput>
      </div>
    </>
  )
}

// functions

const handleEmojiClick = (emoji: string) => {
    console.log("Handling emoji click in ChatInput:", emoji);
    if (pendingAttachment) {
      console.log("Ignoring emoji - pending attachment exists");
      return; // Disable emoji if image is selected
    }

    try {
      // Get current cursor position
      const cursorPosition = textareaRef.current?.selectionStart || value.length;
      const newValue = value.slice(0, cursorPosition) + emoji + value.slice(cursorPosition);

      // Update value
      onValueChange(newValue);

      // Focus the textarea and set cursor position after the inserted emoji
      setTimeout(() => {
        if (textareaRef.current) {
          textareaRef.current.focus();
          const newPosition = cursorPosition + emoji.length;
          textareaRef.current.setSelectionRange(newPosition, newPosition);
        }
      }, 10);
    } catch (error) {
      console.error("Error inserting emoji:", error);
    }
  };

  const handleGifSelect = (gif: any) => {
    // Fetch the GIF as a blob
    fetch(gif.images.original.url)
      .then(response => {
        if (!response.ok) {
          throw new Error(`Failed to fetch GIF: ${response.status} ${response.statusText}`);
        }
        return response.blob();
      })
      .then(blob => {
        // Convert blob to file
        const file = new File([blob], `giphy-${gif.id}.gif`, { type: 'image/gif' });
        onFileUpload([file]);

        toast.success(
          "GIF selected", {
          description: "GIF ready to send. Click send to share it.",
          duration: 2000,
        });
      })
      .catch(error => {
        toast.error("Failed to load GIF", {
          description: "Please try another one.",
        });
      });
  };

  // UI

  {/* Emoji Picker */}
  <div>
    <ButtonEmojiPicker
      onEmojiSelect={(emoji) => {
        console.log("Emoji selected in chat input:", emoji);
        toast.info("Emoji picker is Premium feature");
        // handleEmojiClick(emoji);
      }}
      disabled={isSubmitting && status === "submitted"}
    />
  </div>

  {/* GIF Picker */}
  <div>
    <ButtonGifPicker
      onGifSelect={(gif) => {
        console.log("GIF selected in chat input:", gif.id);
        toast.info("GIF picker is Premium feature");
        // handleGifSelect(gif);
      }}
      disabled={isSubmitting && status === "submitted"}
    />
  </div>