[V0_FILE]typescriptreact:file="components/user-profile.tsx" isFixed="true" isQuickEdit="true" "use client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import type { UserData } from "@/components/medication-checker" import { useState } from "react" type UserProfileProps = { userData: UserData onUpdateProfile: (data: Partial) => void } export function UserProfile({ userData, onUpdateProfile }: UserProfileProps) { const [formData, setFormData] = useState({ age: userData.age || "", gender: userData.gender || "", weight: userData.weight || "", height: userData.height || "", conditions: userData.conditions || [], allergies: userData.allergies || [], alcohol: userData.lifestyle.alcohol || "", smoking: userData.lifestyle.smoking || "", diet: userData.lifestyle.diet || [], }) const commonConditions = [ "Hypertension", "Diabetes", "Asthma", "Heart Disease", "Kidney Disease", "Liver Disease", "Depression", "Anxiety", "Thyroid Disorder", ] const commonAllergies = [ "Penicillin", "Sulfa Drugs", "NSAIDs", "Aspirin", "Latex", "Shellfish", "Nuts", "Eggs", "Dairy", ] const dietaryFactors = ["Grapefruit", "High Sodium", "Low Potassium", "Caffeine", "Vitamin K Rich Foods"] const handleSaveProfile = () => { onUpdateProfile({ age: formData.age ? Number(formData.age) : undefined, gender: formData.gender, weight: formData.weight ? Number(formData.weight) : undefined, height: formData.height ? Number(formData.height) : undefined, conditions: formData.conditions, allergies: formData.allergies, lifestyle: { alcohol: formData.alcohol, smoking: formData.smoking, diet: formData.diet, }, }) } const handleConditionToggle = (condition: string) => { setFormData((prev) => { const conditions = prev.conditions.includes(condition) ? prev.conditions.filter((c) => c !== condition) : [...prev.conditions, condition] return { ...prev, conditions } }) } const handleAllergyToggle = (allergy: string) => { setFormData((prev) => { const allergies = prev.allergies.includes(allergy) ? prev.allergies.filter((a) => a !== allergy) : [...prev.allergies, allergy] return { ...prev, allergies } }) } const handleDietToggle = (diet: string) => { setFormData((prev) => { const dietList = prev.diet.includes(diet) ? prev.diet.filter((d) => d !== diet) : [...prev.diet, diet] return { ...prev, diet: dietList } }) } return (

Your Health Profile

Providing more information helps us better analyze potential medication interactions specific to your health situation.

Demographics Medical History Lifestyle Personal Information

Age setFormData({ ...formData, age: e.target.value })} />

Gender setFormData({ ...formData, gender: value })} >

Male

Female

Other

Weight (kg) setFormData({ ...formData, weight: e.target.value })} />

Height (cm) setFormData({ ...formData, height: e.target.value })} />

Medical Conditions & Allergies

Medical Conditions

{commonConditions.map((condition) => (

handleConditionToggle(condition)} /> {condition}

))}

Allergies

{commonAllergies.map((allergy) => (

handleAllergyToggle(allergy)} /> {allergy}

))}

Lifestyle Factors

Alcohol Consumption setFormData({ ...formData, alcohol: value })} >

None

Occasional (1-2 drinks/week)

Moderate (3-7 drinks/week)

Heavy (8+ drinks/week)

Smoking Status setFormData({ ...formData, smoking: value })} >

Never smoked

Former smoker

Light smoker (< 10/day)

Heavy smoker (10+/day)

Dietary Factors

Select any that apply to your regular diet

{dietaryFactors.map((diet) => (

handleDietToggle(diet)} /> {diet}

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { MedicationChecker } from "@/components/medication-checker" export default function Home() { return (

AI Medication Interaction Checker

Get personalized alerts about potential drug interactions based on your medication profile.

) } [V0_FILE]typescriptreact:file="components/chat-interface.tsx" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { Send, Bot, User } from "lucide-react" import type { Medication } from "@/components/medication-checker" type Message = { role: "user" | "assistant" content: string } type ChatInterfaceProps = { onAddMedication: (medication: Medication) => void onCheckInteractions: () => void } export function ChatInterface({ onAddMedication, onCheckInteractions }: ChatInterfaceProps) { const [messages, setMessages] = useState([ { role: "assistant", content: "Hello! I'm your medication interaction assistant. What medications are you currently taking?", }, ]) const [input, setInput] = useState("") const messagesEndRef = useRef(null) useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, [messages]) const handleSendMessage = () => { if (!input.trim()) return // Add user message const userMessage: Message = { role: "user", content: input, } setMessages((prev) => [...prev, userMessage]) setInput("") // Process the message and generate a response setTimeout(() => { let response = "" // Simple keyword detection for demo purposes if (input.toLowerCase().includes("aspirin")) { response = "I've added Aspirin to your medication list. What's the dosage?" onAddMedication({ name: "Aspirin", dosage: "81mg", frequency: "Daily", }) } else if (input.toLowerCase().includes("warfarin")) { response = "I've added Warfarin to your medication list. This medication has several known interactions." onAddMedication({ name: "Warfarin", dosage: "5mg", frequency: "Daily", }) } else if (input.toLowerCase().includes("check") || input.toLowerCase().includes("interaction")) { response = "I'll check for interactions between your medications now." onCheckInteractions() } else { response = "I understand you're interested in checking medication interactions. Could you tell me what medications you're taking?" } const assistantMessage: Message = { role: "assistant", content: response, } setMessages((prev) => [...prev, assistantMessage]) }, 500) } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSendMessage() } } return (

{messages.map((message, index) => (

{message.role === "user" ? ( ) : ( )}

{message.content}

))}

setInput(e.target.value)} onKeyDown={handleKeyDown} className="flex-1" />

) } [V0_FILE]typescriptreact:file="components/medication-form.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Plus, Trash2 } from "lucide-react" import type { Medication } from "@/components/medication-checker" import { Alert, AlertDescription } from "@/components/ui/alert" import { AlertCircle } from "lucide-react" type MedicationFormProps = { medications: Medication[] onAddMedication: (medication: Medication) => void onCheckInteractions: () => void } export function MedicationForm({ medications, onAddMedication, onCheckInteractions }: MedicationFormProps) { const [newMedication, setNewMedication] = useState({ name: "", dosage: "", frequency: "", }) const handleAddMedication = () => { if (newMedication.name.trim() === "") return onAddMedication(newMedication) setNewMedication({ name: "", dosage: "", frequency: "", }) } return (

Your Medications

{medications.length === 0 ? (

No medications added yet. Add your medications below.

) : (

{medications.map((med, index) => ( {med.name}

Dosage: {med.dosage}

Frequency: {med.frequency}

))}

)}

Add New Medication

Medication Name setNewMedication({ ...newMedication, name: e.target.value })} />

Dosage setNewMedication({ ...newMedication, dosage: e.target.value })} />

Frequency

{medications.length >= 2 && (

)} {medications.length === 1 && ( Add at least one more medication to check for potential interactions. )}

) } [V0_FILE]typescriptreact:file="components/results-panel.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { AlertCircle, FileText } from "lucide-react" import type { InteractionResult, Medication } from "@/components/medication-checker" type ResultsPanelProps = { results: InteractionResult[] medications: Medication[] } export function ResultsPanel({ results, medications }: ResultsPanelProps) { const getSeverityColor = (severity: string) => { switch (severity) { case "high": return "bg-destructive text-destructive-foreground" case "medium": return "bg-yellow-500 text-white" case "low": return "bg-secondary text-secondary-foreground" default: return "bg-primary text-primary-foreground" } } return (

Interaction Analysis Results

Based on your medication profile, we've identified the following potential interactions.

{results.length === 0 ? (

No Interactions Detected

We haven't detected any significant interactions between your medications. However, always consult with your healthcare provider.

) : (

{results.map((result, index) => (

{result.medications.join(" + ")} Interaction {result.severity === "high" ? "High Risk" : result.severity === "medium" ? "Medium Risk" : "Low Risk"}

Description

{result.description}

Recommendation

{result.recommendation}

Important Never change your medication regimen without consulting your healthcare provider. ))}

)}

Your Medication Summary

{medications.map((med, index) => ( {med.name}

{med.dosage}, {med.frequency}

))}

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}"], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/medication-checker.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card } from "@/components/ui/card" import { MedicationForm } from "@/components/medication-form" import { ResultsPanel } from "@/components/results-panel" import { ChatInterface } from "@/components/chat-interface" export type Medication = { name: string dosage: string frequency: string } export type InteractionResult = { severity: "high" | "medium" | "low" description: string recommendation: string medications: string[] } export type UserData = { age?: number gender?: string weight?: number height?: number conditions?: string[] allergies?: string[] lifestyle: { alcohol?: string smoking?: string diet?: string[] } } export function MedicationChecker() { const [medications, setMedications] = useState([]) const [results, setResults] = useState([]) const [activeTab, setActiveTab] = useState("chat") const handleAddMedication = (medication: Medication) => { setMedications((prev) => [...prev, medication]) } const handleCheckInteractions = () => { // In a real app, this would call an API to check interactions // For demo purposes, we'll simulate some results if (medications.length >= 2) { const sampleResults: InteractionResult[] = [ { severity: "high", description: "Potential increased risk of bleeding", recommendation: "Consult your healthcare provider immediately", medications: [medications[0].name, medications[1].name], }, ] setResults(sampleResults) setActiveTab("results") } } return ( AI Chat Medications Results ) }