From 95d4db8002bf9ffa71027d47c3ffb30abfeea3f8 Mon Sep 17 00:00:00 2001
From: Tony Giorgio <tonygiorgio@protonmail.com>
Date: Thu, 30 Jan 2025 23:14:06 -0600
Subject: [PATCH 1/3] Long chat warning

---
 frontend/src/components/ChatBox.tsx        | 207 ++++++++++++++-------
 frontend/src/routes/_auth.chat.$chatId.tsx |   2 +-
 2 files changed, 137 insertions(+), 72 deletions(-)

diff --git a/frontend/src/components/ChatBox.tsx b/frontend/src/components/ChatBox.tsx
index bf77cc1e5..24f8f17d5 100644
--- a/frontend/src/components/ChatBox.tsx
+++ b/frontend/src/components/ChatBox.tsx
@@ -1,5 +1,4 @@
 import { Blend, CornerRightUp } from "lucide-react";
-
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { useEffect, useRef, useState } from "react";
@@ -8,13 +7,76 @@ import { cn } from "@/utils/utils";
 import { useQuery } from "@tanstack/react-query";
 import { getBillingService } from "@/billing/billingService";
 import { Route as ChatRoute } from "@/routes/_auth.chat.$chatId";
+import { ChatMessage } from "@/state/LocalStateContext";
+import { useNavigate } from "@tanstack/react-router";
+
+// Rough token estimation function
+function estimateTokenCount(text: string): number {
+  // A very rough estimation: ~4 characters per token on average
+  return Math.ceil(text.length / 4);
+}
+
+function TokenWarning({
+  messages,
+  currentInput,
+  className
+}: {
+  messages: ChatMessage[];
+  currentInput: string;
+  className?: string;
+}) {
+  const totalTokens =
+    messages.reduce((acc, msg) => acc + estimateTokenCount(msg.content), 0) +
+    (currentInput ? estimateTokenCount(currentInput) : 0);
+
+  const navigate = useNavigate();
+
+  if (totalTokens < 10000) return null;
+
+  const handleNewChat = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    try {
+      await navigate({ to: "/" });
+      // Ensure element is available after navigation
+      setTimeout(() => document.getElementById("message")?.focus(), 0);
+    } catch (error) {
+      console.error("Navigation failed:", error);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-between px-3 py-1.5",
+        "border-b bg-muted/50 backdrop-blur-sm",
+        "text-xs text-muted-foreground/90",
+        className
+      )}
+    >
+      <div className="flex items-center gap-2 min-w-0">
+        <span className="text-[11px] font-semibold text-foreground/70 shrink-0">Tip:</span>
+        <span className="min-w-0">Long chats cause you to reach your usage limits faster.</span>
+      </div>
+      <button
+        onClick={handleNewChat}
+        className="font-medium text-primary hover:text-primary/80 hover:underline transition-colors whitespace-nowrap shrink-0 ml-4"
+      >
+        <span className="hidden md:inline">Start a new chat</span>
+        <span className="md:hidden">New chat</span>
+        <span className="sr-only">, to reduce token usage</span>
+      </button>
+    </div>
+  );
+}
 
 export default function Component({
   onSubmit,
-  startTall
+  startTall,
+  messages = []
 }: {
   onSubmit: (input: string) => void;
   startTall?: boolean;
+  messages?: ChatMessage[];
 }) {
   const [inputValue, setInputValue] = useState("");
   const {
@@ -152,78 +214,81 @@ export default function Component({
   })();
 
   return (
-    <form
-      className={cn(
-        "p-2 rounded-lg border border-primary bg-background/80 backdrop-blur-lg focus-within:ring-1 focus-within:ring-ring",
-        isDisabled && "opacity-50"
-      )}
-      onSubmit={handleSubmit}
-      onClick={(e) => {
-        if (isDisabled) {
-          e.preventDefault();
-          return;
-        }
-        if (!isFocused) {
-          inputRef.current?.focus();
-        }
-      }}
-    >
-      <Label htmlFor="message" className="sr-only">
-        Message
-      </Label>
-      <textarea
-        disabled={isDisabled}
-        ref={inputRef}
-        onKeyDown={handleKeyDown}
-        onFocus={() => setIsFocused(true)}
-        onBlur={() => setIsFocused(false)}
-        id="message"
-        name="message"
-        autoComplete="off"
-        placeholder={placeholderText}
-        rows={1}
-        style={{
-          height: "auto",
-          resize: "none",
-          overflowY: "auto",
-          maxHeight: "12rem",
-          ...(startTall ? { minHeight: "6rem" } : {})
-        }}
+    <div className="flex flex-col w-full">
+      <TokenWarning messages={messages} currentInput={inputValue} />
+      <form
         className={cn(
-          "flex w-full ring-offset-background bg-background/0",
-          "placeholder:text-muted-foreground focus-visible:outline-none",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          "!border-0 shadow-none !border-none focus-visible:ring-0 !ring-0",
-          billingStatus === null && "animate-pulse"
+          "p-2 rounded-lg border border-primary bg-background/80 backdrop-blur-lg focus-within:ring-1 focus-within:ring-ring",
+          isDisabled && "opacity-50"
         )}
-        value={inputValue}
-        onChange={(e) => setInputValue(e.target.value)}
-      />
-      <div className="flex items-center pt-0">
-        <div className="gap-2 text-xs opacity-50 flex items-center">
-          <Blend className="size-3" />
-          <span className={cn([startTall ? "" : "truncate max-w-[8rem]"])}>
-            {model.startsWith("ibnzterrell") ? (
-              <span className="flex items-center gap-1.5">
-                Llama 3.3 70B
-                <span className="text-[9px] bg-primary/10 text-primary px-1 rounded-full font-medium">
-                  New
+        onSubmit={handleSubmit}
+        onClick={(e) => {
+          if (isDisabled) {
+            e.preventDefault();
+            return;
+          }
+          if (!isFocused) {
+            inputRef.current?.focus();
+          }
+        }}
+      >
+        <Label htmlFor="message" className="sr-only">
+          Message
+        </Label>
+        <textarea
+          disabled={isDisabled}
+          ref={inputRef}
+          onKeyDown={handleKeyDown}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          id="message"
+          name="message"
+          autoComplete="off"
+          placeholder={placeholderText}
+          rows={1}
+          style={{
+            height: "auto",
+            resize: "none",
+            overflowY: "auto",
+            maxHeight: "12rem",
+            ...(startTall ? { minHeight: "6rem" } : {})
+          }}
+          className={cn(
+            "flex w-full ring-offset-background bg-background/0",
+            "placeholder:text-muted-foreground focus-visible:outline-none",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "!border-0 shadow-none !border-none focus-visible:ring-0 !ring-0",
+            billingStatus === null && "animate-pulse"
+          )}
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+        />
+        <div className="flex items-center pt-0">
+          <div className="gap-2 text-xs opacity-50 flex items-center">
+            <Blend className="size-3" />
+            <span className={cn([startTall ? "" : "truncate max-w-[8rem]"])}>
+              {model.startsWith("ibnzterrell") ? (
+                <span className="flex items-center gap-1.5">
+                  Llama 3.3 70B
+                  <span className="text-[9px] bg-primary/10 text-primary px-1 rounded-full font-medium">
+                    New
+                  </span>
                 </span>
-              </span>
-            ) : (
-              model
-            )}
-          </span>
+              ) : (
+                model
+              )}
+            </span>
+          </div>
+          <Button
+            type="submit"
+            size="sm"
+            className="ml-auto gap-1.5"
+            disabled={!inputValue.trim() || isDisabled}
+          >
+            <CornerRightUp className="size-3.5" />
+          </Button>
         </div>
-        <Button
-          type="submit"
-          size="sm"
-          className="ml-auto gap-1.5"
-          disabled={!inputValue.trim() || isDisabled}
-        >
-          <CornerRightUp className="size-3.5" />
-        </Button>
-      </div>
-    </form>
+      </form>
+    </div>
   );
 }
diff --git a/frontend/src/routes/_auth.chat.$chatId.tsx b/frontend/src/routes/_auth.chat.$chatId.tsx
index 00770ee4c..bb2c08711 100644
--- a/frontend/src/routes/_auth.chat.$chatId.tsx
+++ b/frontend/src/routes/_auth.chat.$chatId.tsx
@@ -294,7 +294,7 @@ function ChatComponent() {
         {/* Place the chat box inline (below messages) in normal flow */}
         <div className="w-full max-w-[45rem] mx-auto flex flex-col gap-2 px-2 pb-2">
           {error && <AlertDestructive title="Error" description={error} />}
-          <ChatBox onSubmit={sendMessage} />
+          <ChatBox onSubmit={sendMessage} messages={localChat.messages} />
         </div>
       </main>
     </div>

From 0afcf72d849589754aef28b881b314575f569bc7 Mon Sep 17 00:00:00 2001
From: Tony Giorgio <tonygiorgio@protonmail.com>
Date: Thu, 30 Jan 2025 23:31:17 -0600
Subject: [PATCH 2/3] Don't show "start new chat" on new chat

---
 frontend/src/components/ChatBox.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/ChatBox.tsx b/frontend/src/components/ChatBox.tsx
index 24f8f17d5..c50ddc523 100644
--- a/frontend/src/components/ChatBox.tsx
+++ b/frontend/src/components/ChatBox.tsx
@@ -19,10 +19,12 @@ function estimateTokenCount(text: string): number {
 function TokenWarning({
   messages,
   currentInput,
+  chatId,
   className
 }: {
   messages: ChatMessage[];
   currentInput: string;
+  chatId?: string;
   className?: string;
 }) {
   const totalTokens =
@@ -57,14 +59,16 @@ function TokenWarning({
         <span className="text-[11px] font-semibold text-foreground/70 shrink-0">Tip:</span>
         <span className="min-w-0">Long chats cause you to reach your usage limits faster.</span>
       </div>
-      <button
-        onClick={handleNewChat}
-        className="font-medium text-primary hover:text-primary/80 hover:underline transition-colors whitespace-nowrap shrink-0 ml-4"
-      >
-        <span className="hidden md:inline">Start a new chat</span>
-        <span className="md:hidden">New chat</span>
-        <span className="sr-only">, to reduce token usage</span>
-      </button>
+      {chatId && (
+        <button
+          onClick={handleNewChat}
+          className="font-medium text-primary hover:text-primary/80 hover:underline transition-colors whitespace-nowrap shrink-0 ml-4"
+        >
+          <span className="hidden md:inline">Start a new chat</span>
+          <span className="md:hidden">New chat</span>
+          <span className="sr-only">, to reduce token usage</span>
+        </button>
+      )}
     </div>
   );
 }
@@ -215,7 +219,7 @@ export default function Component({
 
   return (
     <div className="flex flex-col w-full">
-      <TokenWarning messages={messages} currentInput={inputValue} />
+      <TokenWarning messages={messages} currentInput={inputValue} chatId={chatId} />
       <form
         className={cn(
           "p-2 rounded-lg border border-primary bg-background/80 backdrop-blur-lg focus-within:ring-1 focus-within:ring-ring",

From bd0168fe5b2ed651682d5dcb2736dd4aef798a57 Mon Sep 17 00:00:00 2001
From: Tony Giorgio <tonygiorgio@protonmail.com>
Date: Thu, 30 Jan 2025 23:40:06 -0600
Subject: [PATCH 3/3] Fix borders on text warning

---
 frontend/src/components/ChatBox.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ChatBox.tsx b/frontend/src/components/ChatBox.tsx
index c50ddc523..b51e8fef1 100644
--- a/frontend/src/components/ChatBox.tsx
+++ b/frontend/src/components/ChatBox.tsx
@@ -49,8 +49,8 @@ function TokenWarning({
   return (
     <div
       className={cn(
-        "flex items-center justify-between px-3 py-1.5",
-        "border-b bg-muted/50 backdrop-blur-sm",
+        "flex items-center justify-between px-3 py-1.5 mb-1",
+        "bg-muted/50 backdrop-blur-sm rounded-t-lg",
         "text-xs text-muted-foreground/90",
         className
       )}