From be279a5f869d857a6afe843f6d0526670fcd7503 Mon Sep 17 00:00:00 2001
From: Abdussamet Kocak <abdus@abdus.dev>
Date: Thu, 27 Feb 2025 08:54:51 +0100
Subject: [PATCH] chat: Support new models

---
 chat.html | 44 ++++++++++++++++++--------------------------
 1 file changed, 18 insertions(+), 26 deletions(-)

diff --git a/chat.html b/chat.html
index ff57bdc..b7db808 100644
--- a/chat.html
+++ b/chat.html
@@ -188,13 +188,13 @@
                     </label>
 
                     <label class="model-opt__label">
-                        <input type="radio" name="model" value="claude-3-5-sonnet-20241022" />
-                        Claude 3.5 Sonnet
+                        <input type="radio" name="model" value="claude-3-7-sonnet-20250219" />
+                        Claude 3.7 Sonnet
                     </label>
 
                     <label class="model-opt__label">
-                        <input type="radio" name="model" value="gemini-1.5-flash-8b-latest" />
-                        Gemini 1.5 Flash 8b
+                        <input type="radio" name="model" value="gemini-2.0-flash-lite" />
+                        Gemini 2.0 Flash Lite
                     </label>
                 </details>
             </div>
@@ -263,23 +263,15 @@
 
                 const chat = {
                     chatgpt: (params) => chatWithOpenAI({ ...params, apiKey: window.env.OPENAI_API_KEY, model: "gpt-4o" }),
-                    claude: (params) =>
-                        chatWithClaude({
-                            ...params,
-                            apiKey: window.env.ANTHROPIC_API_KEY,
-                            model: "claude-3-5-sonnet-20241022",
-                        }),
+                    claude: (params) => chatWithClaude({ ...params, apiKey: window.env.ANTHROPIC_API_KEY, model: "claude-3-5-sonnet-20241022" }),
                     "gpt-4o": (params) => chatWithOpenAI({ ...params, apiKey: window.env.OPENAI_API_KEY, model: "gpt-4o" }),
                     "gpt-4o-mini": (params) => chatWithOpenAI({ ...params, apiKey: window.env.OPENAI_API_KEY, model: "gpt-4o-mini" }),
-                    "gemini-1.5-flash-8b-latest": (params) =>
-                        chatWithGemini({ ...params, apiKey: window.env.GEMINI_API_KEY, model: "gemini-1.5-flash-8b-latest" }),
-                    "claude-3-5-sonnet-20241022": (params) =>
-                        chatWithClaude({
-                            ...params,
-                            apiKey: window.env.ANTHROPIC_API_KEY,
-                            model: "claude-3-5-sonnet-20241022",
-                        }),
+                    "gemini-1.5-flash-8b-latest": (params) => chatWithGemini({ ...params, apiKey: window.env.GEMINI_API_KEY, model: "gemini-1.5-flash-8b-latest" }),
+                    "gemini-2.0-flash-lite": (params) => chatWithGemini({ ...params, apiKey: window.env.GEMINI_API_KEY, model: "gemini-2.0-flash-lite" }),
+                    "claude-3-5-sonnet-20241022": (params) => chatWithClaude({ ...params, apiKey: window.env.ANTHROPIC_API_KEY, model: "claude-3-5-sonnet-20241022" }),
+                    "claude-3-7-sonnet-20250219": (params) => chatWithClaude({ ...params, apiKey: window.env.ANTHROPIC_API_KEY, model: "claude-3-7-sonnet-20250219" }),
                 }[pickedModel];
+
                 if (!chat) {
                     console.error(`Unknown model: ${window.env.MODEL}`);
                     return;
@@ -309,18 +301,18 @@
             }
 
             function createMessageElement(content, isUser) {
-                const message = document.createElement("div");
-                message.className = `message ${isUser ? "user-message" : "system-message"}`;
-                message.innerHTML = marked.parse(content, { sanitize: true });
-                return message;
+                const $el = document.createElement("div");
+                $el.className = `message ${isUser ? "user-message" : "system-message"}`;
+                $el.innerHTML = marked.parse(content, { sanitize: true });
+                return $el;
             }
 
-            function updateMessageContent(element, content) {
-                element.innerHTML = marked.parse(content, { sanitize: true });
+            function updateMessageContent($el, markdown) {
+                $el.innerHTML = marked.parse(markdown, { sanitize: true });
             }
 
-            function scrollToBottom(element) {
-                element.scrollTop = element.scrollHeight;
+            function scrollToBottom($el) {
+                $el.scrollTop = $el.scrollHeight;
             }
 
             async function chatWithOpenAI({ onContent, messages, signal, apiKey, model }) {