feat: split into multiple items

components/agents/currency-converter.tsx

@@ -0,0 +1,117 @@
+import { FormError } from "@/components/forms/error"
+import { formatCurrency } from "@/lib/utils"
+import { format, startOfDay } from "date-fns"
+import { Loader2 } from "lucide-react"
+import { useEffect, useState } from "react"
+import { Button } from "../ui/button"
+
+async function getCurrencyRate(currencyCodeFrom: string, currencyCodeTo: string, date: Date): Promise<number> {
+  const formattedDate = format(date, "yyyy-MM-dd")
+  const response = await fetch(`/api/currency?from=${currencyCodeFrom}&to=${currencyCodeTo}&date=${formattedDate}`)
+
+  if (!response.ok) {
+    const errorData = await response.json()
+    console.log("Currency API error:", errorData.error)
+    throw new Error(errorData.error || "Failed to fetch currency rate")
+  }
+
+  const data = await response.json()
+  return data.rate
+}
+
+export const CurrencyConverterTool = ({
+  originalTotal,
+  originalCurrencyCode,
+  targetCurrencyCode,
+  date,
+  onChange,
+}: {
+  originalTotal: number
+  originalCurrencyCode: string
+  targetCurrencyCode: string
+  date?: Date | undefined
+  onChange?: (value: number) => void
+}) => {
+  const normalizedDate = startOfDay(date || new Date(Date.now() - 24 * 60 * 60 * 1000))
+  const normalizedDateString = format(normalizedDate, "yyyy-MM-dd")
+  const [exchangeRate, setExchangeRate] = useState(0)
+  const [convertedTotal, setConvertedTotal] = useState(0)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchAndUpdateRates = async () => {
+    try {
+      setIsLoading(true)
+      setError(null)
+
+      const rate = await getCurrencyRate(originalCurrencyCode, targetCurrencyCode, normalizedDate)
+      setExchangeRate(rate)
+      setConvertedTotal(Math.round(originalTotal * rate * 100) / 100)
+    } catch (error) {
+      console.error("Error fetching currency rates:", error)
+      setExchangeRate(0)
+      setConvertedTotal(0)
+      setError(error instanceof Error ? error.message : "Failed to fetch currency rate")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleRestart = () => {
+    setError(null)
+    fetchAndUpdateRates()
+  }
+
+  useEffect(() => {
+    fetchAndUpdateRates()
+  }, [originalCurrencyCode, targetCurrencyCode, normalizedDateString, originalTotal])
+
+  useEffect(() => {
+    onChange?.(convertedTotal)
+  }, [convertedTotal])
+
+  if (!originalTotal || !originalCurrencyCode || !targetCurrencyCode || originalCurrencyCode === targetCurrencyCode) {
+    return <></>
+  }
+
+  return (
+    <div className="flex flex-row gap-2 items-center">
+      {isLoading ? (
+        <div className="flex flex-row items-center gap-2 text-sm text-muted-foreground">
+          <Loader2 className="w-4 h-4 animate-spin" />
+          <div className="font-semibold">Loading exchange rates...</div>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <div>{formatCurrency(originalTotal * 100, originalCurrencyCode)}</div>
+            <div>=</div>
+            <div>{formatCurrency(originalTotal * 100 * exchangeRate, targetCurrencyCode).slice(0, 1)}</div>
+            <input
+              type="number"
+              step="0.01"
+              name="convertedTotal"
+              value={convertedTotal}
+              onChange={(e) => {
+                const newValue = parseFloat(e.target.value || "0")
+                !isNaN(newValue) && setConvertedTotal(Math.round(newValue * 100) / 100)
+              }}
+              className="w-32 rounded-md border border-input px-2 py-1"
+            />
+          </div>
+          {!error && (
+            <div className="text-xs text-muted-foreground">The exchange rate will be added to the transaction</div>
+          )}
+          {error && (
+            <div className="flex flex-row gap-2">
+              <FormError className="mt-0 text-sm">{error}</FormError>
+              <Button variant="outline" size="sm" className="text-xs" onClick={handleRestart}>
+                Retry
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

components/agents/items-detect.tsx

@@ -0,0 +1,79 @@
+import { formatCurrency } from "@/lib/utils"
+import { Save, Split } from "lucide-react"
+import { Button } from "../ui/button"
+import { TransactionData } from "@/models/transactions"
+import { splitFileIntoItemsAction } from "@/app/(app)/unsorted/actions"
+import { useNotification } from "@/app/(app)/context"
+import { useState } from "react"
+import { Loader2 } from "lucide-react"
+import { File } from "@/prisma/client"
+
+export const ItemsDetectTool = ({ file, data }: { file?: File; data: TransactionData }) => {
+  const { showNotification } = useNotification()
+  const [isSplitting, setIsSplitting] = useState(false)
+
+  const handleSplit = async () => {
+    if (!file) {
+      console.error("No file selected")
+      return
+    }
+
+    setIsSplitting(true)
+    try {
+      const formData = new FormData()
+      formData.append("fileId", file.id)
+      formData.append("items", JSON.stringify(data.items))
+
+      const result = await splitFileIntoItemsAction(null, formData)
+      if (result.success) {
+        showNotification({ code: "global.banner", message: "Split successful!", type: "success" })
+        showNotification({ code: "sidebar.unsorted", message: "new" })
+        setTimeout(() => showNotification({ code: "sidebar.unsorted", message: "" }), 3000)
+      } else {
+        showNotification({ code: "global.banner", message: result.error || "Failed to split", type: "failed" })
+      }
+    } catch (error) {
+      console.error("Failed to split items:", error)
+      showNotification({ code: "global.banner", message: "Failed to split items", type: "failed" })
+    } finally {
+      setIsSplitting(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col divide-y divide-border">
+        {data.items?.map((item, index) => (
+          <div
+            key={`${item.name || ""}-${item.merchant || ""}-${item.description || ""}-${index}`}
+            className="flex flex-row items-start gap-10 py-2 hover:bg-muted/50 transition-colors"
+          >
+            <div className="flex flex-col flex-1">
+              <div className="text-sm">{item.name}</div>
+              <div className="text-xs text-muted-foreground">{item.description}</div>
+            </div>
+            <div className="font-medium">
+              {formatCurrency((item.total || 0) * 100, item.currencyCode || data.currencyCode || "USD")}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {file && data.items && data.items.length > 1 && (
+        <Button onClick={handleSplit} className="mt-2 px-4 py-2" disabled={isSplitting}>
+          {isSplitting ? (
+            <>
+              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+              Splitting...
+            </>
+          ) : (
+            <>
+              <Split className="w-4 h-4 mr-2" />
+              Split into {data.items.length} individual transactions
+            </>
+          )}
+        </Button>
+      )}
+    </div>
+  )
+}

components/agents/tool-window.tsx

@@ -2,10 +2,10 @@ import { Bot } from "lucide-react"
 
 export default function ToolWindow({ title, children }: { title: string; children: React.ReactNode }) {
   return (
-    <div className="border-2 border-purple-500 bg-purple-100 rounded-md overflow-hidden">
+    <div className="border-2 border-purple-500 bg-purple-100 rounded-md overflow-hidden break-all">
       <div className="flex flex-row gap-1 items-center font-bold text-xs bg-purple-200 text-purple-800 p-1">
         <Bot className="w-4 h-4" />
-        <span>Tool called: {title}</span>
+        <span>{title}</span>
       </div>
       <div className="p-4">{children}</div>
     </div>