From d53044f3f6c95302c47f03f3f229bd13afaa08a8 Mon Sep 17 00:00:00 2001
From: Vasily Zubarev <me@vas3k.ru>
Date: Wed, 9 Apr 2025 13:48:23 +0200
Subject: [PATCH] feat: better exchange rate tool ux

---
 components/agents/agent-window.tsx    | 13 +++++++
 components/forms/convert-currency.tsx | 54 ++++++++++++++++-----------
 components/unsorted/analyze-form.tsx  |  8 ++--
 3 files changed, 50 insertions(+), 25 deletions(-)
 create mode 100644 components/agents/agent-window.tsx

diff --git a/components/agents/agent-window.tsx b/components/agents/agent-window.tsx
new file mode 100644
index 0000000..123ce33
--- /dev/null
+++ b/components/agents/agent-window.tsx
@@ -0,0 +1,13 @@
+import { Bot } from "lucide-react"
+
+export default function AgentWindow({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="border-2 border-purple-500 bg-purple-100 rounded-md overflow-hidden">
+      <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>Agent called: {title}</span>
+      </div>
+      <div className="p-4">{children}</div>
+    </div>
+  )
+}
diff --git a/components/forms/convert-currency.tsx b/components/forms/convert-currency.tsx
index c6cea27..8b3fe71 100644
--- a/components/forms/convert-currency.tsx
+++ b/components/forms/convert-currency.tsx
@@ -16,9 +16,14 @@ export const FormConvertCurrency = ({
   date?: Date | undefined
   onChange?: (value: number) => void
 }) => {
+  if (!originalTotal || !originalCurrencyCode || !targetCurrencyCode || originalCurrencyCode === targetCurrencyCode) {
+    return <></>
+  }
+
   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)
 
   useEffect(() => {
@@ -27,11 +32,11 @@ export const FormConvertCurrency = ({
         setIsLoading(true)
         const exchangeRate = await getCurrencyRate(originalCurrencyCode, targetCurrencyCode, normalizedDate)
         setExchangeRate(exchangeRate)
-        onChange?.(originalTotal * exchangeRate)
+        setConvertedTotal(Math.round(originalTotal * exchangeRate * 100) / 100)
       } catch (error) {
         console.error("Error fetching currency rates:", error)
         setExchangeRate(0)
-        onChange?.(0)
+        setConvertedTotal(0)
       } finally {
         setIsLoading(false)
       }
@@ -40,31 +45,36 @@ export const FormConvertCurrency = ({
     fetchData()
   }, [originalCurrencyCode, targetCurrencyCode, normalizedDateString, originalTotal])
 
-  if (!originalTotal || !originalCurrencyCode || !targetCurrencyCode || originalCurrencyCode === targetCurrencyCode) {
-    return <></>
-  }
+  useEffect(() => {
+    onChange?.(convertedTotal)
+  }, [convertedTotal])
 
   return (
-    <div className="flex flex-row gap-2 items-center text-muted-foreground">
+    <div className="flex flex-row gap-2 items-center">
       {isLoading ? (
-        <div className="flex flex-row gap-2">
-          <Loader2 className="animate-spin" />
-          <div>Loading exchange rates...</div>
+        <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 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={(originalTotal * exchangeRate).toFixed(2)}
-            onChange={(e) => onChange?.(parseFloat(e.target.value))}
-            className="w-32 rounded-md border border-input bg-transparent  px-1"
-          />
-          <div className="text-xs">(exchange rate on {format(normalizedDate, "LLLL dd, yyyy")})</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>
+          <div className="text-xs text-muted-foreground">The exchange rate will be added to the transaction</div>
         </div>
       )}
     </div>
diff --git a/components/unsorted/analyze-form.tsx b/components/unsorted/analyze-form.tsx
index 36752fd..d0e08a8 100644
--- a/components/unsorted/analyze-form.tsx
+++ b/components/unsorted/analyze-form.tsx
@@ -11,8 +11,10 @@ import { FormSelectType } from "@/components/forms/select-type"
 import { FormInput, FormTextarea } from "@/components/forms/simple"
 import { Button } from "@/components/ui/button"
 import { Category, Currency, Field, File, Project } from "@prisma/client"
+import { format } from "date-fns"
 import { Brain, Loader2 } from "lucide-react"
 import { startTransition, useActionState, useMemo, useState } from "react"
+import AgentWindow from "../agents/agent-window"
 
 export default function AnalyzeForm({
   file,
@@ -197,16 +199,16 @@ export default function AnalyzeForm({
         </div>
 
         {formData.total != 0 && formData.currencyCode && formData.currencyCode !== settings.default_currency && (
-          <>
+          <AgentWindow title={`Exchange rate on ${format(new Date(formData.issuedAt || Date.now()), "LLLL dd, yyyy")}`}>
             <FormConvertCurrency
               originalTotal={formData.total}
               originalCurrencyCode={formData.currencyCode}
               targetCurrencyCode={settings.default_currency}
-              date={formData.issuedAt ? new Date(formData.issuedAt) : undefined}
+              date={new Date(formData.issuedAt || Date.now())}
               onChange={(value) => setFormData((prev) => ({ ...prev, convertedTotal: value }))}
             />
             <input type="hidden" name="convertedCurrencyCode" value={settings.default_currency} />
-          </>
+          </AgentWindow>
         )}
 
         <div className="flex flex-row gap-4">