From e1b358b104ab56da7105092f00c1d56718f65cb1 Mon Sep 17 00:00:00 2001
From: Muhammad Ahmad <ahmadshaukat_4@outlook.com>
Date: Mon, 4 Nov 2024 09:03:11 +0500
Subject: [PATCH 1/6] feat: add model temperature and max tokens config (#149)

---
 package.json                                  |   3 +
 src/agent/open-canvas/nodes/customAction.ts   |   6 +-
 .../open-canvas/nodes/generateArtifact.ts     |  16 +-
 .../open-canvas/nodes/replyToGeneralInput.ts  |   6 +-
 .../open-canvas/nodes/rewriteArtifact.ts      |  42 +--
 .../open-canvas/nodes/rewriteArtifactTheme.ts |   6 +-
 .../nodes/rewriteCodeArtifactTheme.ts         |   6 +-
 src/agent/open-canvas/nodes/updateArtifact.ts |  17 +-
 .../nodes/updateHighlightedText.ts            |  12 +-
 src/agent/utils.ts                            |  17 +-
 src/components/canvas/canvas.tsx              |  14 +-
 .../chat-interface/model-selector.tsx         | 313 ++++++++++++++----
 src/components/chat-interface/thread.tsx      |  34 +-
 src/components/ui/command.tsx                 | 155 +++++++++
 src/components/ui/popover.tsx                 |  33 ++
 src/constants.ts                              |  81 ++++-
 src/contexts/GraphContext.tsx                 |  80 +++--
 src/hooks/useThread.tsx                       |  16 +-
 src/types.ts                                  |  22 ++
 yarn.lock                                     | 212 +++++++++++-
 20 files changed, 922 insertions(+), 169 deletions(-)
 create mode 100644 src/components/ui/command.tsx
 create mode 100644 src/components/ui/popover.tsx

diff --git a/package.json b/package.json
index 2188acd7..ccd143ab 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,8 @@
     "@radix-ui/react-hover-card": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-navigation-menu": "^1.2.1",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slider": "^1.2.1",
@@ -60,6 +62,7 @@
     "@vercel/kv": "^2.0.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "1.0.0",
     "date-fns": "^4.1.0",
     "dotenv": "^16.4.5",
     "eslint-plugin-unused-imports": "^4.1.4",
diff --git a/src/agent/open-canvas/nodes/customAction.ts b/src/agent/open-canvas/nodes/customAction.ts
index 052961d1..d1fe99ae 100644
--- a/src/agent/open-canvas/nodes/customAction.ts
+++ b/src/agent/open-canvas/nodes/customAction.ts
@@ -39,11 +39,13 @@ export const customAction = async (
     throw new Error("No custom quick action ID found.");
   }
 
-  const { modelName, modelProvider } =
+  const { modelName, modelProvider, modelConfig } =
     getModelNameAndProviderFromConfig(config);
   const smallModel = await initChatModel(modelName, {
-    temperature: 0.5,
     modelProvider,
+    // temperature: 0.5,
+    temperature: modelConfig.temperatureRange.current,
+    maxTokens: modelConfig.maxTokens.current,
   });
 
   const store = ensureStoreInConfig(config);
diff --git a/src/agent/open-canvas/nodes/generateArtifact.ts b/src/agent/open-canvas/nodes/generateArtifact.ts
index bd61bd46..7b832db5 100644
--- a/src/agent/open-canvas/nodes/generateArtifact.ts
+++ b/src/agent/open-canvas/nodes/generateArtifact.ts
@@ -1,5 +1,6 @@
-import { OpenCanvasGraphAnnotation, OpenCanvasGraphReturnType } from "../state";
-import { NEW_ARTIFACT_PROMPT } from "../prompts";
+import { LangGraphRunnableConfig } from "@langchain/langgraph";
+import { initChatModel } from "langchain/chat_models/universal";
+import { z } from "zod";
 import {
   ArtifactCodeV3,
   ArtifactMarkdownV3,
@@ -7,14 +8,13 @@ import {
   PROGRAMMING_LANGUAGES,
   Reflections,
 } from "../../../types";
-import { z } from "zod";
 import {
   ensureStoreInConfig,
   formatReflections,
   getModelNameAndProviderFromConfig,
 } from "../../utils";
-import { LangGraphRunnableConfig } from "@langchain/langgraph";
-import { initChatModel } from "langchain/chat_models/universal";
+import { NEW_ARTIFACT_PROMPT } from "../prompts";
+import { OpenCanvasGraphAnnotation, OpenCanvasGraphReturnType } from "../state";
 
 /**
  * Generate a new artifact based on the user's query.
@@ -23,11 +23,13 @@ export const generateArtifact = async (
   state: typeof OpenCanvasGraphAnnotation.State,
   config: LangGraphRunnableConfig
 ): Promise<OpenCanvasGraphReturnType> => {
-  const { modelName, modelProvider } =
+  const { modelName, modelProvider, modelConfig } =
     getModelNameAndProviderFromConfig(config);
   const smallModel = await initChatModel(modelName, {
-    temperature: 0.5,
     modelProvider,
+    // temperature: 0.5,
+    temperature: modelConfig.temperatureRange.current,
+    maxTokens: modelConfig.maxTokens.current,
   });
 
   const store = ensureStoreInConfig(config);
diff --git a/src/agent/open-canvas/nodes/replyToGeneralInput.ts b/src/agent/open-canvas/nodes/replyToGeneralInput.ts
index 5cd71d2f..fbca61a4 100644
--- a/src/agent/open-canvas/nodes/replyToGeneralInput.ts
+++ b/src/agent/open-canvas/nodes/replyToGeneralInput.ts
@@ -18,11 +18,13 @@ export const replyToGeneralInput = async (
   state: typeof OpenCanvasGraphAnnotation.State,
   config: LangGraphRunnableConfig
 ): Promise<OpenCanvasGraphReturnType> => {
-  const { modelName, modelProvider } =
+  const { modelName, modelProvider, modelConfig } =
     getModelNameAndProviderFromConfig(config);
   const smallModel = await initChatModel(modelName, {
-    temperature: 0.5,
     modelProvider,
+    // temperature: 0.5,
+    temperature: modelConfig.temperatureRange.current,
+    maxTokens: modelConfig.maxTokens.current,
   });
 
   const prompt = `You are an AI assistant tasked with responding to the users question.
diff --git a/src/agent/open-canvas/nodes/rewriteArtifact.ts b/src/agent/open-canvas/nodes/rewriteArtifact.ts
index 067a522f..628c73ba 100644
--- a/src/agent/open-canvas/nodes/rewriteArtifact.ts
+++ b/src/agent/open-canvas/nodes/rewriteArtifact.ts
@@ -1,15 +1,11 @@
-import { OpenCanvasGraphAnnotation, OpenCanvasGraphReturnType } from "../state";
-import {
-  GET_TITLE_TYPE_REWRITE_ARTIFACT,
-  OPTIONALLY_UPDATE_META_PROMPT,
-  UPDATE_ENTIRE_ARTIFACT_PROMPT,
-} from "../prompts";
+import { LangGraphRunnableConfig } from "@langchain/langgraph";
+import { initChatModel } from "langchain/chat_models/universal";
+import { z } from "zod";
+import { getArtifactContent } from "../../../contexts/utils";
 import {
-  ensureStoreInConfig,
-  formatArtifactContent,
-  formatReflections,
-  getModelNameAndProviderFromConfig,
-} from "../../utils";
+  isArtifactCodeContent,
+  isArtifactMarkdownContent,
+} from "../../../lib/artifact_content_types";
 import {
   ArtifactCodeV3,
   ArtifactMarkdownV3,
@@ -17,14 +13,18 @@ import {
   PROGRAMMING_LANGUAGES,
   Reflections,
 } from "../../../types";
-import { LangGraphRunnableConfig } from "@langchain/langgraph";
-import { z } from "zod";
-import { getArtifactContent } from "../../../contexts/utils";
 import {
-  isArtifactCodeContent,
-  isArtifactMarkdownContent,
-} from "../../../lib/artifact_content_types";
-import { initChatModel } from "langchain/chat_models/universal";
+  ensureStoreInConfig,
+  formatArtifactContent,
+  formatReflections,
+  getModelNameAndProviderFromConfig,
+} from "../../utils";
+import {
+  GET_TITLE_TYPE_REWRITE_ARTIFACT,
+  OPTIONALLY_UPDATE_META_PROMPT,
+  UPDATE_ENTIRE_ARTIFACT_PROMPT,
+} from "../prompts";
+import { OpenCanvasGraphAnnotation, OpenCanvasGraphReturnType } from "../state";
 
 export const rewriteArtifact = async (
   state: typeof OpenCanvasGraphAnnotation.State,
@@ -51,12 +51,14 @@ export const rewriteArtifact = async (
         "The language of the code artifact. This should be populated with the programming language if the user is requesting code to be written, or 'other', in all other cases."
       ),
   });
-  const { modelName, modelProvider } =
+  const { modelName, modelProvider, modelConfig } =
     getModelNameAndProviderFromConfig(config);
   const toolCallingModel = (
     await initChatModel(modelName, {
-      temperature: 0,
       modelProvider,
+      temperature: 0,
+      // temperature: modelConfig.temperatureRange.current,
+      maxTokens: modelConfig.maxTokens.current,
     })
   )
     .bindTools(
diff --git a/src/agent/open-canvas/nodes/rewriteArtifactTheme.ts b/src/agent/open-canvas/nodes/rewriteArtifactTheme.ts
index 0d5c73e5..43bdad4b 100644
--- a/src/agent/open-canvas/nodes/rewriteArtifactTheme.ts
+++ b/src/agent/open-canvas/nodes/rewriteArtifactTheme.ts
@@ -21,11 +21,13 @@ export const rewriteArtifactTheme = async (
   state: typeof OpenCanvasGraphAnnotation.State,
   config: LangGraphRunnableConfig
 ): Promise<OpenCanvasGraphReturnType> => {
-  const { modelName, modelProvider } =
+  const { modelName, modelProvider, modelConfig } =
     getModelNameAndProviderFromConfig(config);
   const smallModel = await initChatModel(modelName, {
-    temperature: 0.5,
     modelProvider,
+    // temperature: 0.5,
+    temperature: modelConfig.temperatureRange.current,
+    maxTokens: modelConfig.maxTokens.current,
   });
 
   const store = ensureStoreInConfig(config);
diff --git a/src/agent/open-canvas/nodes/rewriteCodeArtifactTheme.ts b/src/agent/open-canvas/nodes/rewriteCodeArtifactTheme.ts
index b1203c82..e098bf63 100644
--- a/src/agent/open-canvas/nodes/rewriteCodeArtifactTheme.ts
+++ b/src/agent/open-canvas/nodes/rewriteCodeArtifactTheme.ts
@@ -16,11 +16,13 @@ export const rewriteCodeArtifactTheme = async (
   state: typeof OpenCanvasGraphAnnotation.State,
   config: LangGraphRunnableConfig
 ): Promise<OpenCanvasGraphReturnType> => {
-  const { modelName, modelProvider } =
+  const { modelName, modelProvider, modelConfig } =
     getModelNameAndProviderFromConfig(config);
   const smallModel = await initChatModel(modelName, {
-    temperature: 0.5,
     modelProvider,
+    // temperature: 0.5,
+    temperature: modelConfig.temperatureRange.current,
+    maxTokens: modelConfig.maxTokens.current,
   });
 
   const currentArtifactContent = state.artifact
diff --git a/src/agent/open-canvas/nodes/updateArtifact.ts b/src/agent/open-canvas/nodes/updateArtifact.ts
index 74f97b60..65b9f528 100644
--- a/src/agent/open-canvas/nodes/updateArtifact.ts
+++ b/src/agent/open-canvas/nodes/updateArtifact.ts
@@ -1,11 +1,15 @@
-import { ChatOpenAI } from "@langchain/openai";
-import { OpenCanvasGraphAnnotation, OpenCanvasGraphReturnType } from "../state";
-import { UPDATE_HIGHLIGHTED_ARTIFACT_PROMPT } from "../prompts";
-import { ensureStoreInConfig, formatReflections } from "../../utils";
-import { ArtifactCodeV3, ArtifactV3, Reflections } from "../../../types";
 import { LangGraphRunnableConfig } from "@langchain/langgraph";
+import { ChatOpenAI } from "@langchain/openai";
 import { getArtifactContent } from "../../../contexts/utils";
 import { isArtifactCodeContent } from "../../../lib/artifact_content_types";
+import { ArtifactCodeV3, ArtifactV3, Reflections } from "../../../types";
+import {
+  ensureStoreInConfig,
+  formatReflections,
+  getModelNameAndProviderFromConfig,
+} from "../../utils";
+import { UPDATE_HIGHLIGHTED_ARTIFACT_PROMPT } from "../prompts";
+import { OpenCanvasGraphAnnotation, OpenCanvasGraphReturnType } from "../state";
 
 /**
  * Update an existing artifact based on the user's query.
@@ -14,9 +18,12 @@ export const updateArtifact = async (
   state: typeof OpenCanvasGraphAnnotation.State,
   config: LangGraphRunnableConfig
 ): Promise<OpenCanvasGraphReturnType> => {
+  const { modelConfig } = getModelNameAndProviderFromConfig(config);
   const smallModel = new ChatOpenAI({
     model: "gpt-4o",
     temperature: 0,
+    // temperature: modelConfig.temperatureRange.current,
+    maxTokens: modelConfig.maxTokens.current,
   });
 
   const store = ensureStoreInConfig(config);
diff --git a/src/agent/open-canvas/nodes/updateHighlightedText.ts b/src/agent/open-canvas/nodes/updateHighlightedText.ts
index e37f441c..3a9c133b 100644
--- a/src/agent/open-canvas/nodes/updateHighlightedText.ts
+++ b/src/agent/open-canvas/nodes/updateHighlightedText.ts
@@ -1,8 +1,10 @@
+import { getModelNameAndProviderFromConfig } from "@/agent/utils";
+import { LangGraphRunnableConfig } from "@langchain/langgraph";
 import { ChatOpenAI } from "@langchain/openai";
-import { OpenCanvasGraphAnnotation, OpenCanvasGraphReturnType } from "../state";
-import { ArtifactMarkdownV3 } from "../../../types";
 import { getArtifactContent } from "../../../contexts/utils";
 import { isArtifactMarkdownContent } from "../../../lib/artifact_content_types";
+import { ArtifactMarkdownV3 } from "../../../types";
+import { OpenCanvasGraphAnnotation, OpenCanvasGraphReturnType } from "../state";
 
 const PROMPT = `You are an expert AI writing assistant, tasked with rewriting some text a user has selected. The selected text is nested inside a larger 'block'. You should always respond with ONLY the updated text block in accordance with the user's request.
 You should always respond with the full markdown text block, as it will simply replace the existing block in the artifact.
@@ -27,11 +29,15 @@ Ensure you reply with the FULL text block, including the updated selected text.
  * Update an existing artifact based on the user's query.
  */
 export const updateHighlightedText = async (
-  state: typeof OpenCanvasGraphAnnotation.State
+  state: typeof OpenCanvasGraphAnnotation.State,
+  config: LangGraphRunnableConfig
 ): Promise<OpenCanvasGraphReturnType> => {
+  const { modelConfig } = getModelNameAndProviderFromConfig(config);
   const model = new ChatOpenAI({
     model: "gpt-4o",
     temperature: 0,
+    // temperature: modelConfig.temperatureRange.current,
+    maxTokens: modelConfig.maxTokens.current,
   }).withConfig({ runName: "update_highlighted_markdown" });
 
   const currentArtifactContent = state.artifact
diff --git a/src/agent/utils.ts b/src/agent/utils.ts
index e58c64cc..b0bd6e2f 100644
--- a/src/agent/utils.ts
+++ b/src/agent/utils.ts
@@ -1,4 +1,5 @@
 import { isArtifactCodeContent } from "@/lib/artifact_content_types";
+import { CustomModelConfig } from "@/types";
 import { BaseStore, LangGraphRunnableConfig } from "@langchain/langgraph";
 import { ArtifactCodeV3, ArtifactMarkdownV3, Reflections } from "../types";
 
@@ -114,33 +115,47 @@ export const formatArtifactContentWithTemplate = (
 
 export const getModelNameAndProviderFromConfig = (
   config: LangGraphRunnableConfig
-): { modelName: string; modelProvider: string } => {
+): {
+  modelName: string;
+  modelProvider: string;
+  modelConfig: CustomModelConfig;
+} => {
   const customModelName = config.configurable?.customModelName as string;
   if (!customModelName) {
     throw new Error("Model name is missing in config.");
   }
+
+  const modelConfig = config.configurable?.modelConfig as CustomModelConfig;
+  if (!modelConfig) {
+    throw new Error("Custom Model config is missing in config.");
+  }
+
   if (customModelName.includes("gpt-")) {
     return {
       modelName: customModelName,
       modelProvider: "openai",
+      modelConfig,
     };
   }
   if (customModelName.includes("claude-")) {
     return {
       modelName: customModelName,
       modelProvider: "anthropic",
+      modelConfig,
     };
   }
   if (customModelName.includes("fireworks/")) {
     return {
       modelName: customModelName,
       modelProvider: "fireworks",
+      modelConfig,
     };
   }
   if (customModelName.includes("gemini-")) {
     return {
       modelName: customModelName,
       modelProvider: "google-genai",
+      modelConfig,
     };
   }
 
diff --git a/src/components/canvas/canvas.tsx b/src/components/canvas/canvas.tsx
index f8b36967..d0b5c185 100644
--- a/src/components/canvas/canvas.tsx
+++ b/src/components/canvas/canvas.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { ArtifactRenderer } from "@/components/artifacts/ArtifactRenderer";
-import { ContentComposerChatInterface } from "./content-composer";
 import { ALL_MODEL_NAMES } from "@/constants";
+import { useGraphContext } from "@/contexts/GraphContext";
 import { useToast } from "@/hooks/use-toast";
 import { getLanguageTemplate } from "@/lib/get_language_template";
 import { cn } from "@/lib/utils";
@@ -10,16 +10,17 @@ import {
   ArtifactCodeV3,
   ArtifactMarkdownV3,
   ArtifactV3,
+  CustomModelConfig,
   ProgrammingLanguageOptions,
 } from "@/types";
-import { useEffect, useState } from "react";
-import { useGraphContext } from "@/contexts/GraphContext";
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { ContentComposerChatInterface } from "./content-composer";
 
 export function CanvasComponent() {
   const { threadData, graphData, userData } = useGraphContext();
   const { user } = userData;
-  const { threadId, clearThreadsWithNoValues, setModelName } = threadData;
+  const { threadId, clearThreadsWithNoValues, setModelName, setModelConfig } =
+    threadData;
   const { setArtifact } = graphData;
   const { toast } = useToast();
   const [chatStarted, setChatStarted] = useState(false);
@@ -91,6 +92,9 @@ export function CanvasComponent() {
               setModelName(
                 thread?.metadata?.customModelName as ALL_MODEL_NAMES
               );
+              setModelConfig(
+                thread?.metadata?.modelConfig as CustomModelConfig
+              );
             } else {
               setChatStarted(false);
             }
diff --git a/src/components/chat-interface/model-selector.tsx b/src/components/chat-interface/model-selector.tsx
index c5656948..4b2d9bac 100644
--- a/src/components/chat-interface/model-selector.tsx
+++ b/src/components/chat-interface/model-selector.tsx
@@ -1,28 +1,43 @@
 "use client";
 
-import { motion, AnimatePresence } from "framer-motion";
 import LLMIcon from "@/components/icons/svg/LLMIcon.svg";
-import NextImage from "next/image";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import {
   ALL_MODEL_NAMES,
   ANTHROPIC_MODELS,
-  OPENAI_MODELS,
   FIREWORKS_MODELS,
   GEMINI_MODELS,
   LS_HAS_SEEN_MODEL_DROPDOWN_ALERT,
+  OPENAI_MODELS,
 } from "@/constants";
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { ExternalLink, X } from "lucide-react";
-import { TighterText } from "../ui/header";
+import { CustomModelConfig, ModelConfigurationParams } from "@/types";
+
+import { cn } from "@/lib/utils";
+import { CaretSortIcon, GearIcon } from "@radix-ui/react-icons";
+import { AnimatePresence, motion } from "framer-motion";
+import { Check, ExternalLink, X } from "lucide-react";
+import NextImage from "next/image";
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import { TooltipIconButton } from "../ui/assistant-ui/tooltip-icon-button";
+import { TighterText } from "../ui/header";
+import { Slider } from "../ui/slider";
 
 const allModels = [
   ...ANTHROPIC_MODELS,
@@ -31,17 +46,14 @@ const allModels = [
   ...GEMINI_MODELS,
 ];
 
+const modelLabelMap = new Map(
+  allModels.map((model) => [model.name, model.label])
+);
+
 const modelNameToLabel = (modelName: ALL_MODEL_NAMES) => {
-  const model = allModels.find((m) => m.name === modelName);
-  return model?.label ?? modelName;
+  return modelLabelMap.get(modelName) ?? modelName;
 };
 
-interface ModelSelectorProps {
-  modelName: ALL_MODEL_NAMES;
-  setModelName: Dispatch<SetStateAction<ALL_MODEL_NAMES>>;
-  chatStarted: boolean;
-}
-
 const AlertNewModelSelectorFeature = ({
   chatStarted,
   showAlert,
@@ -144,19 +156,148 @@ const AlertNewModelSelectorFeature = ({
   );
 };
 
-export default function ModelSelector(props: ModelSelectorProps) {
-  const { modelName, setModelName } = props;
-  const [showAlert, setShowAlert] = useState(false);
+interface ModelSettingsProps {
+  model: ModelConfigurationParams;
+  className?: string;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onClick: (e: any) => any;
+  modelConfig: CustomModelConfig;
+  setModelConfig: (
+    config: CustomModelConfig | ((prev: CustomModelConfig) => CustomModelConfig)
+  ) => void;
+}
+
+const ModelSettings = ({
+  model,
+  className,
+  isOpen,
+  onOpenChange,
+  onClick,
+  modelConfig,
+  setModelConfig,
+}: ModelSettingsProps) => {
+  const handleTemperatureChange = useCallback(
+    (value: number[]) => {
+      setModelConfig((prev) => ({
+        ...prev,
+        temperatureRange: {
+          ...prev.temperatureRange,
+          current: value[0],
+        },
+      }));
+    },
+    [setModelConfig]
+  );
+
+  const handleMaxTokensChange = useCallback(
+    (value: number[]) => {
+      setModelConfig((prev) => ({
+        ...prev,
+        maxTokens: {
+          ...prev.maxTokens,
+          current: value[0],
+        },
+      }));
+    },
+    [setModelConfig]
+  );
+
+  return (
+    <Popover open={isOpen} onOpenChange={onOpenChange}>
+      <PopoverTrigger onClick={onClick} asChild>
+        <button className="flex-shrink-0 size-6">
+          <GearIcon className="size-4" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        side="right"
+        align="start"
+        className={cn("w-80 p-6 rounded-xl shadow-lg", className)}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="grid gap-4">
+          <SettingSection
+            title="Temperature"
+            description="Controls creativity - lower for focused outputs, higher for more variety and imagination."
+            value={modelConfig.temperatureRange.current}
+            min={model.config.temperatureRange.min}
+            max={model.config.temperatureRange.max}
+            step={0.1}
+            onChange={handleTemperatureChange}
+          />
+          <SettingSection
+            title="Max Tokens"
+            description="Set how long the AI's response can be - more tokens mean longer, more detailed responses."
+            value={modelConfig.maxTokens.current}
+            min={model.config.maxTokens.min}
+            max={model.config.maxTokens.max}
+            step={1}
+            onChange={handleMaxTokensChange}
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+interface SettingSectionProps {
+  title: string;
+  description: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  onChange: (value: number[]) => void;
+}
+
+const SettingSection = ({
+  title,
+  description,
+  value,
+  min,
+  max,
+  step,
+  onChange,
+}: SettingSectionProps) => (
+  <div className="space-y-2">
+    <h4 className="font-medium leading-none">{title}</h4>
+    <p className="text-sm text-muted-foreground">{description}</p>
+    <Slider
+      min={min}
+      max={max}
+      step={step}
+      value={[value]}
+      onValueChange={onChange}
+    />
+    <div className="text-right text-sm">{value}</div>
+  </div>
+);
+
+interface SelectSelectorProps {
+  modelName: ALL_MODEL_NAMES;
+  setModelName: (name: ALL_MODEL_NAMES) => void;
+  chatStarted: boolean;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  modelConfig: CustomModelConfig;
+  setModelConfig: (
+    config: CustomModelConfig | ((prev: CustomModelConfig) => CustomModelConfig)
+  ) => void;
+}
+
+export function SelectSelector(props: SelectSelectorProps) {
+  const { modelName, setModelName, modelConfig, setModelConfig, setOpen } =
+    props;
+  const [activeSettings, setActiveSettings] = useState<string | null>(null);
+
+  const handleModelChange = useCallback(
+    async (newModel: ALL_MODEL_NAMES) => {
+      setModelName(newModel);
+      setOpen(false);
+    },
+    [setModelName, setOpen]
+  );
 
-  const handleModelChange = async (newModel: ALL_MODEL_NAMES) => {
-    // Create a new thread with the new model
-    setModelName(newModel);
-    if (showAlert) {
-      // Ensure the model is closed if the user selects a model
-      setShowAlert(false);
-      localStorage.setItem(LS_HAS_SEEN_MODEL_DROPDOWN_ALERT, "true");
-    }
-  };
   const allAllowedModels = allModels.filter((model) => {
     if (
       model.name.includes("fireworks/") &&
@@ -188,30 +329,90 @@ export default function ModelSelector(props: ModelSelectorProps) {
   });
 
   return (
-    <div className="relative">
-      <Select value={modelName} onValueChange={handleModelChange}>
-        <SelectTrigger className="min-w-[180px] w-[210px] bg-transparent shadow-none text-sm focus:outline-none cursor-pointer hover:bg-gray-100 rounded transition-colors border-none text-gray-600">
-          <SelectValue>
-            <div className="flex items-center pr-2 truncate">
-              <NextImage
-                alt="Model icon"
-                src={LLMIcon}
-                width={14}
-                height={14}
-                className="mr-2"
+    <Command>
+      <CommandList>
+        {allAllowedModels.map((model) => (
+          <CommandGroup key={model.name} className="w-full">
+            <CommandItem
+              value={model.name}
+              onSelect={handleModelChange}
+              className="flex items-center"
+            >
+              <Check
+                className={cn(
+                  "mr-1 size-4",
+                  modelName === model.name ? "opacity-100" : "opacity-0"
+                )}
               />
-              <span className="truncate">{modelNameToLabel(modelName)}</span>
-            </div>
-          </SelectValue>
-        </SelectTrigger>
-        <SelectContent>
-          {allAllowedModels.map((model) => (
-            <SelectItem key={model.name} value={model.name}>
-              {model.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+              <span className="flex-1">{model.label}</span>
+              <ModelSettings
+                className="ml-auto"
+                model={model}
+                isOpen={activeSettings === model.name}
+                onOpenChange={(open) => {
+                  setActiveSettings(open ? model.name : null);
+                }}
+                onClick={(e) => e.stopPropagation()} // Prevent onSelect from being triggered
+                modelConfig={modelConfig}
+                setModelConfig={setModelConfig}
+              />
+            </CommandItem>
+          </CommandGroup>
+        ))}
+      </CommandList>
+    </Command>
+  );
+}
+
+interface ModelSelectorProps {
+  modelName: ALL_MODEL_NAMES;
+  setModelName: (name: ALL_MODEL_NAMES) => void;
+  chatStarted: boolean;
+  modelConfig: CustomModelConfig;
+  setModelConfig: (
+    config: CustomModelConfig | ((prev: CustomModelConfig) => CustomModelConfig)
+  ) => void;
+}
+
+export default function ModelSelector(props: ModelSelectorProps) {
+  const [showAlert, setShowAlert] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  console.log("ModelSelector modelConfig: ", props.modelConfig);
+
+  return (
+    <div className="relative">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger
+          className="min-w-[180px] w-[210px] bg-transparent shadow-none focus:outline-none cursor-pointer hover:bg-gray-100 rounded transition-colors border-none text-gray-600 h-9 px-3 py-2 text-sm focus:ring-1 focus:ring-ring"
+          asChild
+        >
+          <div className="flex items-center pr-2 truncate">
+            <NextImage
+              alt="Model icon"
+              src={LLMIcon}
+              width={14}
+              height={14}
+              className="mr-2"
+            />
+            <span className="truncate">
+              {modelNameToLabel(props.modelName)}
+            </span>
+            <CaretSortIcon className="size-4 opacity-50 ml-auto" />
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className="min-w-[180px] w-[240px] p-0">
+          <SelectSelector
+            chatStarted={props.chatStarted}
+            modelName={props.modelName}
+            setModelName={props.setModelName}
+            open={open}
+            setOpen={setOpen}
+            modelConfig={props.modelConfig}
+            setModelConfig={props.setModelConfig}
+          />
+        </PopoverContent>
+      </Popover>
       <div className="absolute top-full -left-10 pt-2 w-max min-w-full">
         <AlertNewModelSelectorFeature
           showAlert={showAlert}
diff --git a/src/components/chat-interface/thread.tsx b/src/components/chat-interface/thread.tsx
index f008b005..e7d9ef1b 100644
--- a/src/components/chat-interface/thread.tsx
+++ b/src/components/chat-interface/thread.tsx
@@ -1,19 +1,19 @@
+import { useGraphContext } from "@/contexts/GraphContext";
+import { useToast } from "@/hooks/use-toast";
+import { ProgrammingLanguageOptions } from "@/types";
 import { ThreadPrimitive } from "@assistant-ui/react";
+import { Thread as ThreadType } from "@langchain/langgraph-sdk";
 import { ArrowDownIcon, SquarePen } from "lucide-react";
 import { Dispatch, FC, SetStateAction } from "react";
-import { TooltipIconButton } from "../ui/assistant-ui/tooltip-icon-button";
-import { ProgrammingLanguageOptions } from "@/types";
-import ModelSelector from "./model-selector";
 import { ReflectionsDialog } from "../reflections-dialog/ReflectionsDialog";
-import { ThreadHistory } from "./thread-history";
+import { useLangSmithLinkToolUI } from "../tool-hooks/LangSmithLinkToolUI";
+import { TooltipIconButton } from "../ui/assistant-ui/tooltip-icon-button";
 import { TighterText } from "../ui/header";
-import { Thread as ThreadType } from "@langchain/langgraph-sdk";
-import { ThreadWelcome } from "./welcome";
 import { Composer } from "./composer";
 import { AssistantMessage, UserMessage } from "./messages";
-import { useToast } from "@/hooks/use-toast";
-import { useLangSmithLinkToolUI } from "../tool-hooks/LangSmithLinkToolUI";
-import { useGraphContext } from "@/contexts/GraphContext";
+import ModelSelector from "./model-selector";
+import { ThreadHistory } from "./thread-history";
+import { ThreadWelcome } from "./welcome";
 
 const ThreadScrollToBottom: FC = () => {
   return (
@@ -49,7 +49,14 @@ export const Thread: FC<ThreadProps> = (props: ThreadProps) => {
   const { toast } = useToast();
   const {
     userData: { user },
-    threadData: { createThread, modelName, setModelName, assistantId },
+    threadData: {
+      createThread,
+      modelName,
+      setModelName,
+      assistantId,
+      modelConfig,
+      setModelConfig,
+    },
     graphData: { clearState, runId, feedbackSubmitted, setFeedbackSubmitted },
   } = useGraphContext();
 
@@ -66,9 +73,10 @@ export const Thread: FC<ThreadProps> = (props: ThreadProps) => {
       return;
     }
     setModelName(modelName);
+    setModelConfig(modelConfig);
     clearState();
     setChatStarted(false);
-    const thread = await createThread(modelName, user.id);
+    const thread = await createThread(modelName, modelConfig, user.id);
     if (!thread) {
       toast({
         title: "Failed to create a new thread",
@@ -91,6 +99,8 @@ export const Thread: FC<ThreadProps> = (props: ThreadProps) => {
               chatStarted={false}
               modelName={modelName}
               setModelName={setModelName}
+              modelConfig={modelConfig}
+              setModelConfig={setModelConfig}
             />
           )}
         </div>
@@ -140,6 +150,8 @@ export const Thread: FC<ThreadProps> = (props: ThreadProps) => {
                 chatStarted={true}
                 modelName={modelName}
                 setModelName={setModelName}
+                modelConfig={modelConfig}
+                setModelConfig={setModelConfig}
               />
               <Composer />
             </div>
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
new file mode 100644
index 00000000..c52980e8
--- /dev/null
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 00000000..29c7bd2a
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/src/constants.ts b/src/constants.ts
index 4f997705..b4ae1d4c 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,3 +1,5 @@
+import { CustomModelConfig, ModelConfigurationParams } from "./types";
+
 export const LANGGRAPH_API_URL =
   process.env.LANGGRAPH_API_URL ?? "http://localhost:57318";
 // v2 is tied to the 'open-canvas-prod' deployment.
@@ -23,36 +25,97 @@ export const DEFAULT_INPUTS = {
   customQuickActionId: undefined,
 };
 
-export const OPENAI_MODELS = [
+export const OPENAI_MODELS: ModelConfigurationParams[] = [
   {
     name: "gpt-4o-mini",
     label: "GPT-4o mini",
+    config: {
+      provider: "openai",
+      temperatureRange: {
+        min: 0,
+        max: 1,
+        default: 0.5,
+        current: 0.5,
+      },
+      maxTokens: {
+        min: 1,
+        max: 16384,
+        default: 16384,
+        current: 16384,
+      },
+    },
   },
 ];
-export const ANTHROPIC_MODELS = [
+
+export const ANTHROPIC_MODELS: ModelConfigurationParams[] = [
   {
     name: "claude-3-haiku-20240307",
     label: "Claude 3 Haiku",
+    config: {
+      provider: "anthropic",
+      temperatureRange: {
+        min: 0,
+        max: 1,
+        default: 0.5,
+        current: 0.5,
+      },
+      maxTokens: {
+        min: 1,
+        max: 4096,
+        default: 4096,
+        current: 4096,
+      },
+    },
   },
-  // {
-  //   name: "claude-3-5-sonnet-20240620",
-  //   label: "Claude 3.5 Sonnet",
-  // },
 ];
-export const FIREWORKS_MODELS = [
+
+export const FIREWORKS_MODELS: ModelConfigurationParams[] = [
   {
     name: "accounts/fireworks/models/llama-v3p1-70b-instruct",
     label: "Fireworks Llama 70B",
+    config: {
+      provider: "fireworks",
+      temperatureRange: {
+        min: 0,
+        max: 1,
+        default: 0.5,
+        current: 0.5,
+      },
+      maxTokens: {
+        min: 1,
+        max: 16384,
+        default: 16384,
+        current: 16384,
+      },
+    },
   },
 ];
 
-export const GEMINI_MODELS = [
+export const GEMINI_MODELS: ModelConfigurationParams[] = [
   {
     name: "gemini-1.5-flash",
     label: "Gemini 1.5 Flash",
+    config: {
+      provider: "google-genai",
+      temperatureRange: {
+        min: 0,
+        max: 1,
+        default: 0.5,
+        current: 0.5,
+      },
+      maxTokens: {
+        min: 1,
+        max: 8192,
+        default: 8192,
+        current: 8192,
+      },
+    },
   },
 ];
-export const DEFAULT_MODEL_NAME: ALL_MODEL_NAMES = "gpt-4o-mini";
+
+export const DEFAULT_MODEL_NAME: ALL_MODEL_NAMES = OPENAI_MODELS[0].name;
+export const DEFAULT_MODE_CONFIG: CustomModelConfig = OPENAI_MODELS[0].config;
+
 export type OPENAI_MODEL_NAMES = (typeof OPENAI_MODELS)[number]["name"];
 export type ANTHROPIC_MODEL_NAMES = (typeof ANTHROPIC_MODELS)[number]["name"];
 export type FIREWORKS_MODEL_NAMES = (typeof FIREWORKS_MODELS)[number]["name"];
diff --git a/src/contexts/GraphContext.tsx b/src/contexts/GraphContext.tsx
index a522e800..302f4add 100644
--- a/src/contexts/GraphContext.tsx
+++ b/src/contexts/GraphContext.tsx
@@ -1,26 +1,25 @@
 import {
-  createContext,
-  useContext,
-  ReactNode,
-  useEffect,
-  useState,
-  useRef,
-  Dispatch,
-  SetStateAction,
-} from "react";
-import {
-  convertToArtifactV3,
-  createNewGeneratedArtifactFromTool,
-  replaceOrInsertMessageChunk,
-  updateHighlightedCode,
-  updateHighlightedMarkdown,
-  updateRewrittenArtifact,
-  removeCodeBlockFormatting,
-} from "./utils";
-import { useUser } from "@/hooks/useUser";
+  ALL_MODEL_NAMES,
+  DEFAULT_INPUTS,
+  DEFAULT_MODE_CONFIG,
+  DEFAULT_MODEL_NAME,
+  THREAD_ID_COOKIE_NAME,
+} from "@/constants";
+import { CustomModelConfig } from "@/types";
+
+import { useToast } from "@/hooks/use-toast";
+import { useRuns } from "@/hooks/useRuns";
 import { useThread } from "@/hooks/useThread";
+import { useUser } from "@/hooks/useUser";
+import { createClient } from "@/hooks/utils";
+import {
+  isArtifactCodeContent,
+  isArtifactMarkdownContent,
+  isDeprecatedArtifactType,
+} from "@/lib/artifact_content_types";
+import { setCookie } from "@/lib/cookies";
+import { reverseCleanContent } from "@/lib/normalize_string";
 import { addAssistantIdToUser } from "@/lib/supabase/add_assistant_id_to_user";
-import { debounce } from "lodash";
 import {
   ArtifactLengthOptions,
   ArtifactToolResponse,
@@ -34,24 +33,28 @@ import {
   TextHighlight,
 } from "@/types";
 import { AIMessage, BaseMessage } from "@langchain/core/messages";
-import { useRuns } from "@/hooks/useRuns";
-import { createClient } from "@/hooks/utils";
-import {
-  ALL_MODEL_NAMES,
-  DEFAULT_INPUTS,
-  DEFAULT_MODEL_NAME,
-  THREAD_ID_COOKIE_NAME,
-} from "@/constants";
-import { Thread } from "@langchain/langgraph-sdk";
-import { useToast } from "@/hooks/use-toast";
 import { parsePartialJson } from "@langchain/core/output_parsers";
+import { Thread } from "@langchain/langgraph-sdk";
+import { debounce } from "lodash";
 import {
-  isArtifactCodeContent,
-  isArtifactMarkdownContent,
-  isDeprecatedArtifactType,
-} from "@/lib/artifact_content_types";
-import { reverseCleanContent } from "@/lib/normalize_string";
-import { setCookie } from "@/lib/cookies";
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import {
+  convertToArtifactV3,
+  createNewGeneratedArtifactFromTool,
+  removeCodeBlockFormatting,
+  replaceOrInsertMessageChunk,
+  updateHighlightedCode,
+  updateHighlightedMarkdown,
+  updateRewrittenArtifact,
+} from "./utils";
 
 interface GraphData {
   runId: string | undefined;
@@ -311,6 +314,7 @@ export function GraphProvider({ children }: { children: ReactNode }) {
           config: {
             configurable: {
               customModelName: threadData.modelName,
+              modelConfig: threadData.modelConfig,
             },
           },
         }
@@ -880,8 +884,12 @@ export function GraphProvider({ children }: { children: ReactNode }) {
       threadData.setModelName(
         thread.metadata.customModelName as ALL_MODEL_NAMES
       );
+      threadData.setModelConfig(
+        thread.metadata.modelConfig as CustomModelConfig
+      );
     } else {
       threadData.setModelName(DEFAULT_MODEL_NAME);
+      threadData.setModelConfig(DEFAULT_MODE_CONFIG);
     }
 
     const castValues: {
diff --git a/src/hooks/useThread.tsx b/src/hooks/useThread.tsx
index 5760e30b..e78fb859 100644
--- a/src/hooks/useThread.tsx
+++ b/src/hooks/useThread.tsx
@@ -1,11 +1,13 @@
 import {
   ALL_MODEL_NAMES,
   ASSISTANT_ID_COOKIE,
+  DEFAULT_MODE_CONFIG,
   DEFAULT_MODEL_NAME,
   HAS_EMPTY_THREADS_CLEARED_COOKIE,
   THREAD_ID_COOKIE_NAME,
 } from "@/constants";
 import { getCookie, setCookie } from "@/lib/cookies";
+import { CustomModelConfig } from "@/types";
 import { Thread } from "@langchain/langgraph-sdk";
 import { useState } from "react";
 import { createClient } from "./utils";
@@ -17,9 +19,12 @@ export function useThread() {
   const [isUserThreadsLoading, setIsUserThreadsLoading] = useState(false);
   const [modelName, setModelName] =
     useState<ALL_MODEL_NAMES>(DEFAULT_MODEL_NAME);
+  const [modelConfig, setModelConfig] =
+    useState<CustomModelConfig>(DEFAULT_MODE_CONFIG);
 
   const createThread = async (
     customModelName: ALL_MODEL_NAMES = DEFAULT_MODEL_NAME,
+    custModelConfig: CustomModelConfig = modelConfig,
     userId: string
   ): Promise<Thread | undefined> => {
     const client = createClient();
@@ -28,11 +33,13 @@ export function useThread() {
         metadata: {
           supabase_user_id: userId,
           customModelName,
+          modelConfig: custModelConfig,
         },
       });
       setThreadId(thread.thread_id);
       setCookie(THREAD_ID_COOKIE_NAME, thread.thread_id);
       setModelName(customModelName);
+      setModelConfig(custModelConfig);
       await getUserThreads(userId);
       return thread;
     } catch (e) {
@@ -86,7 +93,7 @@ export function useThread() {
   const searchOrCreateThread = async (userId: string) => {
     const threadIdCookie = getCookie(THREAD_ID_COOKIE_NAME);
     if (!threadIdCookie) {
-      await createThread(modelName, userId);
+      await createThread(modelName, modelConfig, userId);
       return;
     }
 
@@ -101,7 +108,7 @@ export function useThread() {
       return threadIdCookie;
     } else {
       // Current thread has activity. Create a new thread.
-      await createThread(modelName, userId);
+      await createThread(modelName, modelConfig, userId);
       return;
     }
   };
@@ -176,6 +183,7 @@ export function useThread() {
       const thread = await client.threads.get(id);
       if (thread.metadata && thread.metadata.customModelName) {
         setModelName(thread.metadata.customModelName as ALL_MODEL_NAMES);
+        setModelConfig(thread.metadata.modelConfig as CustomModelConfig);
       }
       return thread;
     } catch (e) {
@@ -199,7 +207,7 @@ export function useThread() {
       // Create a new thread. Use .then to avoid blocking the UI.
       // Once completed, `createThread` will re-fetch all user
       // threads to update UI.
-      void createThread(modelName, userId);
+      void createThread(modelName, modelConfig, userId);
     }
     const client = createClient();
     try {
@@ -215,6 +223,7 @@ export function useThread() {
     userThreads,
     isUserThreadsLoading,
     modelName,
+    modelConfig,
     createThread,
     clearThreadsWithNoValues,
     searchOrCreateThread,
@@ -224,5 +233,6 @@ export function useThread() {
     setThreadId,
     getOrCreateAssistant,
     setModelName,
+    setModelConfig,
   };
 }
diff --git a/src/types.ts b/src/types.ts
index 22fbd6c5..e75736ec 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -265,3 +265,25 @@ export type RewriteArtifactMetaToolResponse =
       title: string;
       language: ProgrammingLanguageOptions;
     };
+
+export interface CustomModelConfig {
+  provider: "openai" | "anthropic" | "fireworks" | "google-genai";
+  temperatureRange: {
+    min: number;
+    max: number;
+    default: number;
+    current: number;
+  };
+  maxTokens: {
+    min: number;
+    max: number;
+    default: number;
+    current: number;
+  };
+}
+
+export interface ModelConfigurationParams {
+  name: string;
+  label: string;
+  config: CustomModelConfig;
+}
diff --git a/yarn.lock b/yarn.lock
index 8536e252..b19d26a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -70,6 +70,13 @@
     zod-to-json-schema "^3.23.3"
     zustand "^4.5.5"
 
+"@babel/runtime@^7.13.10":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
+  integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.14.6", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.6":
   version "7.25.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.7.tgz#7ffb53c37a8f247c8c4d335e89cdf16a2e0d0fb6"
@@ -1006,6 +1013,13 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.1.0.tgz#1e95610461a09cdf8bb05c152e76ca1278d5da46"
   integrity sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==
 
+"@radix-ui/primitive@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd"
+  integrity sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/primitive@1.1.0", "@radix-ui/primitive@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.0.tgz#42ef83b3b56dccad5d703ae8c42919a68798bbe2"
@@ -1062,11 +1076,25 @@
     "@radix-ui/react-primitive" "2.0.0"
     "@radix-ui/react-slot" "1.1.0"
 
+"@radix-ui/react-compose-refs@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
+  integrity sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-compose-refs@1.1.0", "@radix-ui/react-compose-refs@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
   integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
 
+"@radix-ui/react-context@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c"
+  integrity sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-context@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.0.tgz#6df8d983546cfd1999c8512f3a8ad85a6e7fcee8"
@@ -1077,6 +1105,27 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a"
   integrity sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==
 
+"@radix-ui/react-dialog@1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300"
+  integrity sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
 "@radix-ui/react-dialog@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz#d9345575211d6f2d13e209e84aec9a8584b54d6c"
@@ -1102,6 +1151,18 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc"
   integrity sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==
 
+"@radix-ui/react-dismissable-layer@1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz#3f98425b82b9068dfbab5db5fff3df6ebf48b9d4"
+  integrity sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-escape-keydown" "1.0.3"
+
 "@radix-ui/react-dismissable-layer@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz#2cd0a49a732372513733754e6032d3fb7988834e"
@@ -1137,6 +1198,13 @@
     "@radix-ui/react-primitive" "2.0.0"
     "@radix-ui/react-use-controllable-state" "1.1.0"
 
+"@radix-ui/react-focus-guards@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz#1ea7e32092216b946397866199d892f71f7f98ad"
+  integrity sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-focus-guards@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz#8e9abb472a9a394f59a1b45f3dd26cfe3fc6da13"
@@ -1147,6 +1215,16 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz#8635edd346304f8b42cae86b05912b61aef27afe"
   integrity sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==
 
+"@radix-ui/react-focus-scope@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz#2ac45fce8c5bb33eb18419cdc1905ef4f1906525"
+  integrity sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
 "@radix-ui/react-focus-scope@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz#ebe2891a298e0a33ad34daab2aad8dea31caf0b2"
@@ -1176,6 +1254,14 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69"
   integrity sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==
 
+"@radix-ui/react-id@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0"
+  integrity sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
 "@radix-ui/react-id@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
@@ -1214,6 +1300,26 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.6.0"
 
+"@radix-ui/react-navigation-menu@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.1.tgz#31989e026adecfbb2f7bd1108ee6fffb830b2ec1"
+  integrity sha512-egDo0yJD2IK8L17gC82vptkvW1jLeni1VuqCyzY727dSJdk5cDjINomouLoNk8RVF7g2aNIfENKWL4UzeU9c8Q==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-collection" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-dismissable-layer" "1.1.1"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-presence" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+    "@radix-ui/react-use-previous" "1.1.0"
+    "@radix-ui/react-visually-hidden" "1.1.0"
+
 "@radix-ui/react-popover@^1.0.7", "@radix-ui/react-popover@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.1.2.tgz#a0cab25f69aa49ad0077d91e9e9dcd323758020c"
@@ -1251,6 +1357,14 @@
     "@radix-ui/react-use-size" "1.1.0"
     "@radix-ui/rect" "1.1.0"
 
+"@radix-ui/react-portal@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15"
+  integrity sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
 "@radix-ui/react-portal@1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.1.tgz#1957f1eb2e1aedfb4a5475bd6867d67b50b1d15f"
@@ -1267,6 +1381,15 @@
     "@radix-ui/react-primitive" "2.0.0"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
+"@radix-ui/react-presence@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.1.tgz#491990ba913b8e2a5db1b06b203cb24b5cdef9ba"
+  integrity sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
 "@radix-ui/react-presence@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.0.tgz#227d84d20ca6bfe7da97104b1a8b48a833bfb478"
@@ -1283,6 +1406,14 @@
     "@radix-ui/react-compose-refs" "1.1.0"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
+"@radix-ui/react-primitive@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
+  integrity sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.2"
+
 "@radix-ui/react-primitive@2.0.0", "@radix-ui/react-primitive@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz#fe05715faa9203a223ccc0be15dc44b9f9822884"
@@ -1384,6 +1515,14 @@
     "@radix-ui/react-use-previous" "1.1.0"
     "@radix-ui/react-use-size" "1.1.0"
 
+"@radix-ui/react-slot@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
+  integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+
 "@radix-ui/react-slot@1.1.0", "@radix-ui/react-slot@^1.0.2", "@radix-ui/react-slot@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
@@ -1468,11 +1607,26 @@
     "@radix-ui/react-use-controllable-state" "1.1.0"
     "@radix-ui/react-visually-hidden" "1.1.0"
 
+"@radix-ui/react-use-callback-ref@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
+  integrity sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-callback-ref@1.1.0", "@radix-ui/react-use-callback-ref@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1"
   integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==
 
+"@radix-ui/react-use-controllable-state@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz#ecd2ced34e6330caf89a82854aa2f77e07440286"
+  integrity sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
 "@radix-ui/react-use-controllable-state@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz#1321446857bb786917df54c0d4d084877aab04b0"
@@ -1480,6 +1634,14 @@
   dependencies:
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
+"@radix-ui/react-use-escape-keydown@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz#217b840c250541609c66f67ed7bab2b733620755"
+  integrity sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
 "@radix-ui/react-use-escape-keydown@1.1.0", "@radix-ui/react-use-escape-keydown@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz#31a5b87c3b726504b74e05dac1edce7437b98754"
@@ -1487,6 +1649,13 @@
   dependencies:
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
+"@radix-ui/react-use-layout-effect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz#be8c7bc809b0c8934acf6657b577daf948a75399"
+  integrity sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-layout-effect@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
@@ -2697,6 +2866,14 @@ clsx@^2.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
+cmdk@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-1.0.0.tgz#0a095fdafca3dfabed82d1db78a6262fb163ded9"
+  integrity sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==
+  dependencies:
+    "@radix-ui/react-dialog" "1.0.5"
+    "@radix-ui/react-primitive" "1.0.3"
+
 codemirror@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29"
@@ -6626,7 +6803,7 @@ react-number-format@^5.3.1:
   resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-5.4.2.tgz#aec282241f36cee31da13dc5e0f364c0fc6902ab"
   integrity sha512-cg//jVdS49PYDgmcYoBnMMHl4XNTMuV723ZnHD2aXYtWWWqbVF3hjQ8iB+UZEuXapLbeA8P8H+1o6ZB1lcw3vg==
 
-react-remove-scroll-bar@^2.3.4, react-remove-scroll-bar@^2.3.6:
+react-remove-scroll-bar@^2.3.3, react-remove-scroll-bar@^2.3.4, react-remove-scroll-bar@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c"
   integrity sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==
@@ -6634,6 +6811,17 @@ react-remove-scroll-bar@^2.3.4, react-remove-scroll-bar@^2.3.6:
     react-style-singleton "^2.2.1"
     tslib "^2.0.0"
 
+react-remove-scroll@2.5.5:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77"
+  integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==
+  dependencies:
+    react-remove-scroll-bar "^2.3.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-remove-scroll@2.5.7:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz#15a1fd038e8497f65a695bf26a4a57970cac1ccb"
@@ -7206,8 +7394,16 @@ streamsearch@^1.1.0:
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -7295,8 +7491,14 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  name strip-ansi-cjs
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==

From 3907bf2027afb4a5adadfd7aaee599a6c06543dd Mon Sep 17 00:00:00 2001
From: Muhammad Ahmad <ahmadshaukat_4@outlook.com>
Date: Mon, 4 Nov 2024 09:18:00 +0500
Subject: [PATCH 2/6] feat: update model selection to set configuration on
 change

---
 src/components/chat-interface/model-selector.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/chat-interface/model-selector.tsx b/src/components/chat-interface/model-selector.tsx
index 4b2d9bac..4912977c 100644
--- a/src/components/chat-interface/model-selector.tsx
+++ b/src/components/chat-interface/model-selector.tsx
@@ -293,9 +293,14 @@ export function SelectSelector(props: SelectSelectorProps) {
   const handleModelChange = useCallback(
     async (newModel: ALL_MODEL_NAMES) => {
       setModelName(newModel);
+
+      const selectedModel = allModels.find((model) => model.name === newModel);
+      if (selectedModel) {
+        setModelConfig(selectedModel.config);
+      }
       setOpen(false);
     },
-    [setModelName, setOpen]
+    [setModelName, setOpen, setModelConfig]
   );
 
   const allAllowedModels = allModels.filter((model) => {

From dacf24da38ee16b01c0c62f59e423e3b5a8bff83 Mon Sep 17 00:00:00 2001
From: bracesproul <braceasproul@gmail.com>
Date: Tue, 5 Nov 2024 12:41:25 -0800
Subject: [PATCH 3/6] merge staging

---
 package.json                                  |   5 +-
 src/agent/open-canvas/index.ts                |   4 +-
 .../nodes/generate-artifact/index.ts          |  61 +++
 .../nodes/generate-artifact/schemas.ts        |  33 ++
 .../nodes/generate-artifact/utils.ts          |  39 ++
 .../open-canvas/nodes/generateArtifact.ts     | 133 ------
 src/agent/open-canvas/nodes/generatePath.ts   |   8 +-
 .../nodes/rewrite-artifact/index.ts           |  68 +++
 .../nodes/rewrite-artifact/schemas.ts         |  22 +
 .../nodes/rewrite-artifact/update-meta.ts     |  55 +++
 .../nodes/rewrite-artifact/utils.ts           | 110 +++++
 .../open-canvas/nodes/rewriteArtifact.ts      | 186 --------
 src/agent/utils.ts                            |  37 ++
 src/components/artifacts/ArtifactRenderer.tsx |   6 +-
 .../custom/NewCustomQuickActionDialog.tsx     |  17 +-
 .../custom/PromptContextTooltip.tsx           |  31 --
 .../assistant-select/alert-new-feature.tsx    |  87 ++++
 .../assistant-select/assistant-item.tsx       |  69 +++
 .../assistant-select/color-picker.tsx         |  82 ++++
 .../create-edit-assistant-dialog.tsx          | 330 ++++++++++++++
 .../edit-delete-dropdown.module.css           |  12 +
 .../assistant-select/edit-delete-dropdown.tsx |  95 ++++
 .../assistant-select/icon-select.tsx          | 185 ++++++++
 src/components/assistant-select/index.tsx     | 202 ++++++++
 src/components/assistant-select/utils.tsx     |  11 +
 src/components/canvas/content-composer.tsx    |   1 +
 src/components/chat-interface/composer.tsx    |   9 +-
 .../chat-interface/model-selector.tsx         | 430 ------------------
 .../alert-new-model-selector.tsx              | 113 +++++
 .../model-selector/constants.ts               |   8 +
 .../chat-interface/model-selector/index.tsx   | 101 ++++
 .../model-selector/model-settings.tsx         | 131 ++++++
 .../model-selector/new-badge.tsx              |  30 ++
 .../model-selector/select-selector.tsx        | 108 +++++
 src/components/chat-interface/thread.tsx      |   9 +-
 .../reflections-dialog/ReflectionsDialog.tsx  |  62 ++-
 src/components/ui/badge.tsx                   |  36 ++
 src/components/ui/inline-context-tooltip.tsx  |  31 ++
 src/constants.ts                              |  34 +-
 src/contexts/GraphContext.tsx                 |  30 +-
 src/hooks/useAssistants.tsx                   | 367 +++++++++++++++
 src/hooks/useStore.tsx                        |   1 +
 src/hooks/useThread.tsx                       |  28 +-
 src/lib/cookies.ts                            |   7 +
 src/lib/supabase/add_assistant_id_to_user.ts  |  38 --
 src/types.ts                                  |   1 +
 tailwind.config.ts                            |  15 +-
 yarn.lock                                     | 202 +++++---
 48 files changed, 2707 insertions(+), 973 deletions(-)
 create mode 100644 src/agent/open-canvas/nodes/generate-artifact/index.ts
 create mode 100644 src/agent/open-canvas/nodes/generate-artifact/schemas.ts
 create mode 100644 src/agent/open-canvas/nodes/generate-artifact/utils.ts
 delete mode 100644 src/agent/open-canvas/nodes/generateArtifact.ts
 create mode 100644 src/agent/open-canvas/nodes/rewrite-artifact/index.ts
 create mode 100644 src/agent/open-canvas/nodes/rewrite-artifact/schemas.ts
 create mode 100644 src/agent/open-canvas/nodes/rewrite-artifact/update-meta.ts
 create mode 100644 src/agent/open-canvas/nodes/rewrite-artifact/utils.ts
 delete mode 100644 src/agent/open-canvas/nodes/rewriteArtifact.ts
 delete mode 100644 src/components/artifacts/actions_toolbar/custom/PromptContextTooltip.tsx
 create mode 100644 src/components/assistant-select/alert-new-feature.tsx
 create mode 100644 src/components/assistant-select/assistant-item.tsx
 create mode 100644 src/components/assistant-select/color-picker.tsx
 create mode 100644 src/components/assistant-select/create-edit-assistant-dialog.tsx
 create mode 100644 src/components/assistant-select/edit-delete-dropdown.module.css
 create mode 100644 src/components/assistant-select/edit-delete-dropdown.tsx
 create mode 100644 src/components/assistant-select/icon-select.tsx
 create mode 100644 src/components/assistant-select/index.tsx
 create mode 100644 src/components/assistant-select/utils.tsx
 delete mode 100644 src/components/chat-interface/model-selector.tsx
 create mode 100644 src/components/chat-interface/model-selector/alert-new-model-selector.tsx
 create mode 100644 src/components/chat-interface/model-selector/constants.ts
 create mode 100644 src/components/chat-interface/model-selector/index.tsx
 create mode 100644 src/components/chat-interface/model-selector/model-settings.tsx
 create mode 100644 src/components/chat-interface/model-selector/new-badge.tsx
 create mode 100644 src/components/chat-interface/model-selector/select-selector.tsx
 create mode 100644 src/components/ui/badge.tsx
 create mode 100644 src/components/ui/inline-context-tooltip.tsx
 create mode 100644 src/hooks/useAssistants.tsx
 delete mode 100644 src/lib/supabase/add_assistant_id_to_user.ts

diff --git a/package.json b/package.json
index ccd143ab..6c720659 100644
--- a/package.json
+++ b/package.json
@@ -72,8 +72,9 @@
     "langsmith": "^0.1.61",
     "lodash": "^4.17.21",
     "lucide-react": "^0.441.0",
-    "next": "14.2.7",
+    "next": "14.2.10",
     "react": "^18",
+    "react-colorful": "^5.6.1",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
     "react-json-view": "^1.21.3",
@@ -100,7 +101,7 @@
     "@typescript-eslint/eslint-plugin": "^8.12.2",
     "@typescript-eslint/parser": "^8.8.1",
     "eslint": "^8",
-    "eslint-config-next": "14.2.7",
+    "eslint-config-next": "14.2.10",
     "postcss": "^8",
     "prettier": "^3.3.3",
     "tailwind-scrollbar": "^3.1.0",
diff --git a/src/agent/open-canvas/index.ts b/src/agent/open-canvas/index.ts
index 2dd9d194..3947ad68 100644
--- a/src/agent/open-canvas/index.ts
+++ b/src/agent/open-canvas/index.ts
@@ -1,11 +1,11 @@
 import { END, Send, START, StateGraph } from "@langchain/langgraph";
 import { DEFAULT_INPUTS } from "../../constants";
 import { customAction } from "./nodes/customAction";
-import { generateArtifact } from "./nodes/generateArtifact";
+import { generateArtifact } from "./nodes/generate-artifact";
 import { generateFollowup } from "./nodes/generateFollowup";
 import { generatePath } from "./nodes/generatePath";
 import { reflectNode } from "./nodes/reflect";
-import { rewriteArtifact } from "./nodes/rewriteArtifact";
+import { rewriteArtifact } from "./nodes/rewrite-artifact";
 import { rewriteArtifactTheme } from "./nodes/rewriteArtifactTheme";
 import { updateArtifact } from "./nodes/updateArtifact";
 import { replyToGeneralInput } from "./nodes/replyToGeneralInput";
diff --git a/src/agent/open-canvas/nodes/generate-artifact/index.ts b/src/agent/open-canvas/nodes/generate-artifact/index.ts
new file mode 100644
index 00000000..0977946b
--- /dev/null
+++ b/src/agent/open-canvas/nodes/generate-artifact/index.ts
@@ -0,0 +1,61 @@
+import {
+  OpenCanvasGraphAnnotation,
+  OpenCanvasGraphReturnType,
+} from "../../state";
+import { LangGraphRunnableConfig } from "@langchain/langgraph";
+import {
+  getFormattedReflections,
+  getModelFromConfig,
+  getModelNameAndProviderFromConfig,
+  optionallyGetSystemPromptFromConfig,
+} from "@/agent/utils";
+import { ARTIFACT_TOOL_SCHEMA } from "./schemas";
+import { ArtifactV3 } from "@/types";
+import { createArtifactContent, formatNewArtifactPrompt } from "./utils";
+
+/**
+ * Generate a new artifact based on the user's query.
+ */
+export const generateArtifact = async (
+  state: typeof OpenCanvasGraphAnnotation.State,
+  config: LangGraphRunnableConfig
+): Promise<OpenCanvasGraphReturnType> => {
+  const { modelName } = getModelNameAndProviderFromConfig(config);
+  const smallModel = await getModelFromConfig(config);
+
+  const modelWithArtifactTool = smallModel.bindTools(
+    [
+      {
+        name: "generate_artifact",
+        schema: ARTIFACT_TOOL_SCHEMA,
+      },
+    ],
+    { tool_choice: "generate_artifact" }
+  );
+
+  const memoriesAsString = await getFormattedReflections(config);
+  const formattedNewArtifactPrompt = formatNewArtifactPrompt(
+    memoriesAsString,
+    modelName
+  );
+
+  const userSystemPrompt = optionallyGetSystemPromptFromConfig(config);
+  const fullSystemPrompt = userSystemPrompt
+    ? `${userSystemPrompt}\n${formattedNewArtifactPrompt}`
+    : formattedNewArtifactPrompt;
+
+  const response = await modelWithArtifactTool.invoke(
+    [{ role: "system", content: fullSystemPrompt }, ...state.messages],
+    { runName: "generate_artifact" }
+  );
+
+  const newArtifactContent = createArtifactContent(response.tool_calls?.[0]);
+  const newArtifact: ArtifactV3 = {
+    currentIndex: 1,
+    contents: [newArtifactContent],
+  };
+
+  return {
+    artifact: newArtifact,
+  };
+};
diff --git a/src/agent/open-canvas/nodes/generate-artifact/schemas.ts b/src/agent/open-canvas/nodes/generate-artifact/schemas.ts
new file mode 100644
index 00000000..2e2d4a4f
--- /dev/null
+++ b/src/agent/open-canvas/nodes/generate-artifact/schemas.ts
@@ -0,0 +1,33 @@
+import { PROGRAMMING_LANGUAGES } from "@/types";
+import { z } from "zod";
+
+export const ARTIFACT_TOOL_SCHEMA = z.object({
+  type: z
+    .enum(["code", "text"])
+    .describe("The content type of the artifact generated."),
+  language: z
+    .enum(
+      PROGRAMMING_LANGUAGES.map((lang) => lang.language) as [
+        string,
+        ...string[],
+      ]
+    )
+    .optional()
+    .describe(
+      "The language/programming language of the artifact generated.\n" +
+        "If generating code, it should be one of the options, or 'other'.\n" +
+        "If not generating code, the language should ALWAYS be 'other'."
+    ),
+  isValidReact: z
+    .boolean()
+    .optional()
+    .describe(
+      "Whether or not the generated code is valid React code. Only populate this field if generating code."
+    ),
+  artifact: z.string().describe("The content of the artifact to generate."),
+  title: z
+    .string()
+    .describe(
+      "A short title to give to the artifact. Should be less than 5 words."
+    ),
+});
diff --git a/src/agent/open-canvas/nodes/generate-artifact/utils.ts b/src/agent/open-canvas/nodes/generate-artifact/utils.ts
new file mode 100644
index 00000000..4e6aca8e
--- /dev/null
+++ b/src/agent/open-canvas/nodes/generate-artifact/utils.ts
@@ -0,0 +1,39 @@
+import { NEW_ARTIFACT_PROMPT } from "../../prompts";
+import { ArtifactCodeV3, ArtifactMarkdownV3 } from "@/types";
+import { ToolCall } from "@langchain/core/messages/tool";
+
+export const formatNewArtifactPrompt = (
+  memoriesAsString: string,
+  modelName: string
+): string => {
+  return NEW_ARTIFACT_PROMPT.replace("{reflections}", memoriesAsString).replace(
+    "{disableChainOfThought}",
+    modelName.includes("claude")
+      ? "\n\nIMPORTANT: Do NOT preform chain of thought beforehand. Instead, go STRAIGHT to generating the tool response. This is VERY important."
+      : ""
+  );
+};
+
+export const createArtifactContent = (
+  toolCall: ToolCall | undefined
+): ArtifactCodeV3 | ArtifactMarkdownV3 => {
+  const toolArgs = toolCall?.args;
+  const artifactType = toolArgs?.type;
+
+  if (artifactType === "code") {
+    return {
+      index: 1,
+      type: "code",
+      title: toolArgs?.title,
+      code: toolArgs?.artifact,
+      language: toolArgs?.language,
+    };
+  }
+
+  return {
+    index: 1,
+    type: "text",
+    title: toolArgs?.title,
+    fullMarkdown: toolArgs?.artifact,
+  };
+};
diff --git a/src/agent/open-canvas/nodes/generateArtifact.ts b/src/agent/open-canvas/nodes/generateArtifact.ts
deleted file mode 100644
index 7b832db5..00000000
--- a/src/agent/open-canvas/nodes/generateArtifact.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { LangGraphRunnableConfig } from "@langchain/langgraph";
-import { initChatModel } from "langchain/chat_models/universal";
-import { z } from "zod";
-import {
-  ArtifactCodeV3,
-  ArtifactMarkdownV3,
-  ArtifactV3,
-  PROGRAMMING_LANGUAGES,
-  Reflections,
-} from "../../../types";
-import {
-  ensureStoreInConfig,
-  formatReflections,
-  getModelNameAndProviderFromConfig,
-} from "../../utils";
-import { NEW_ARTIFACT_PROMPT } from "../prompts";
-import { OpenCanvasGraphAnnotation, OpenCanvasGraphReturnType } from "../state";
-
-/**
- * Generate a new artifact based on the user's query.
- */
-export const generateArtifact = async (
-  state: typeof OpenCanvasGraphAnnotation.State,
-  config: LangGraphRunnableConfig
-): Promise<OpenCanvasGraphReturnType> => {
-  const { modelName, modelProvider, modelConfig } =
-    getModelNameAndProviderFromConfig(config);
-  const smallModel = await initChatModel(modelName, {
-    modelProvider,
-    // temperature: 0.5,
-    temperature: modelConfig.temperatureRange.current,
-    maxTokens: modelConfig.maxTokens.current,
-  });
-
-  const store = ensureStoreInConfig(config);
-  const assistantId = config.configurable?.assistant_id;
-  if (!assistantId) {
-    throw new Error("`assistant_id` not found in configurable");
-  }
-  const memoryNamespace = ["memories", assistantId];
-  const memoryKey = "reflection";
-  const memories = await store.get(memoryNamespace, memoryKey);
-  const memoriesAsString = memories?.value
-    ? formatReflections(memories.value as Reflections)
-    : "No reflections found.";
-
-  const modelWithArtifactTool = smallModel.bindTools(
-    [
-      {
-        name: "generate_artifact",
-        schema: z.object({
-          type: z
-            .enum(["code", "text"])
-            .describe("The content type of the artifact generated."),
-          language: z
-            .enum(
-              PROGRAMMING_LANGUAGES.map((lang) => lang.language) as [
-                string,
-                ...string[],
-              ]
-            )
-            .optional()
-            .describe(
-              "The language/programming language of the artifact generated.\n" +
-                "If generating code, it should be one of the options, or 'other'.\n" +
-                "If not generating code, the language should ALWAYS be 'other'."
-            ),
-          isValidReact: z
-            .boolean()
-            .optional()
-            .describe(
-              "Whether or not the generated code is valid React code. Only populate this field if generating code."
-            ),
-          artifact: z
-            .string()
-            .describe("The content of the artifact to generate."),
-          title: z
-            .string()
-            .describe(
-              "A short title to give to the artifact. Should be less than 5 words."
-            ),
-        }),
-      },
-    ],
-    { tool_choice: "generate_artifact" }
-  );
-
-  const formattedNewArtifactPrompt = NEW_ARTIFACT_PROMPT.replace(
-    "{reflections}",
-    memoriesAsString
-  ).replace(
-    "{disableChainOfThought}",
-    modelName.includes("claude")
-      ? "\n\nIMPORTANT: Do NOT preform chain of thought beforehand. Instead, go STRAIGHT to generating the tool response. This is VERY important."
-      : ""
-  );
-
-  const response = await modelWithArtifactTool.invoke(
-    [
-      { role: "system", content: formattedNewArtifactPrompt },
-      ...state.messages,
-    ],
-    { runName: "generate_artifact" }
-  );
-
-  const newArtifactType = response.tool_calls?.[0]?.args.type;
-  let newArtifactContent: ArtifactCodeV3 | ArtifactMarkdownV3;
-  if (newArtifactType === "code") {
-    newArtifactContent = {
-      index: 1,
-      type: "code",
-      title: response.tool_calls?.[0]?.args.title,
-      code: response.tool_calls?.[0]?.args.artifact,
-      language: response.tool_calls?.[0]?.args.language,
-    };
-  } else {
-    newArtifactContent = {
-      index: 1,
-      type: "text",
-      title: response.tool_calls?.[0]?.args.title,
-      fullMarkdown: response.tool_calls?.[0]?.args.artifact,
-    };
-  }
-
-  const newArtifact: ArtifactV3 = {
-    currentIndex: 1,
-    contents: [newArtifactContent],
-  };
-
-  return {
-    artifact: newArtifact,
-  };
-};
diff --git a/src/agent/open-canvas/nodes/generatePath.ts b/src/agent/open-canvas/nodes/generatePath.ts
index 03a0350b..69b3fecb 100644
--- a/src/agent/open-canvas/nodes/generatePath.ts
+++ b/src/agent/open-canvas/nodes/generatePath.ts
@@ -9,6 +9,7 @@ import { OpenCanvasGraphAnnotation } from "../state";
 import { z } from "zod";
 import {
   formatArtifactContentWithTemplate,
+  getModelFromConfig,
   getModelNameAndProviderFromConfig,
 } from "../../utils";
 import { getArtifactContent } from "../../../contexts/utils";
@@ -93,12 +94,7 @@ export const generatePath = async (
     ? "rewriteArtifact"
     : "generateArtifact";
 
-  const { modelName, modelProvider } =
-    getModelNameAndProviderFromConfig(config);
-  const model = await initChatModel(modelName, {
-    temperature: 0,
-    modelProvider,
-  });
+  const model = await getModelFromConfig(config);
   const modelWithTool = model.withStructuredOutput(
     z.object({
       route: z
diff --git a/src/agent/open-canvas/nodes/rewrite-artifact/index.ts b/src/agent/open-canvas/nodes/rewrite-artifact/index.ts
new file mode 100644
index 00000000..7615366d
--- /dev/null
+++ b/src/agent/open-canvas/nodes/rewrite-artifact/index.ts
@@ -0,0 +1,68 @@
+import {
+  OpenCanvasGraphAnnotation,
+  OpenCanvasGraphReturnType,
+} from "../../state";
+import { LangGraphRunnableConfig } from "@langchain/langgraph";
+import { optionallyUpdateArtifactMeta } from "./update-meta";
+import { buildPrompt, createNewArtifactContent, validateState } from "./utils";
+import {
+  getFormattedReflections,
+  getModelFromConfig,
+  optionallyGetSystemPromptFromConfig,
+} from "@/agent/utils";
+import { isArtifactMarkdownContent } from "@/lib/artifact_content_types";
+
+export const rewriteArtifact = async (
+  state: typeof OpenCanvasGraphAnnotation.State,
+  config: LangGraphRunnableConfig
+): Promise<OpenCanvasGraphReturnType> => {
+  const smallModelWithConfig = (await getModelFromConfig(config)).withConfig({
+    runName: "rewrite_artifact_model_call",
+  });
+  const memoriesAsString = await getFormattedReflections(config);
+  const { currentArtifactContent, recentHumanMessage } = validateState(state);
+
+  const artifactMetaToolCall = await optionallyUpdateArtifactMeta(
+    state,
+    config
+  );
+  const artifactType = artifactMetaToolCall?.args?.type;
+  const isNewType = artifactType !== currentArtifactContent.type;
+
+  const artifactContent = isArtifactMarkdownContent(currentArtifactContent)
+    ? currentArtifactContent.fullMarkdown
+    : currentArtifactContent.code;
+
+  const formattedPrompt = buildPrompt({
+    artifactContent,
+    memoriesAsString,
+    isNewType,
+    artifactMetaToolCall,
+  });
+
+  const userSystemPrompt = optionallyGetSystemPromptFromConfig(config);
+  const fullSystemPrompt = userSystemPrompt
+    ? `${userSystemPrompt}\n${formattedPrompt}`
+    : formattedPrompt;
+
+  const newArtifactResponse = await smallModelWithConfig.invoke([
+    { role: "system", content: fullSystemPrompt },
+    recentHumanMessage,
+  ]);
+
+  const newArtifactContent = createNewArtifactContent({
+    artifactType,
+    state,
+    currentArtifactContent,
+    artifactMetaToolCall,
+    newContent: newArtifactResponse.content as string,
+  });
+
+  return {
+    artifact: {
+      ...state.artifact,
+      currentIndex: state.artifact.contents.length + 1,
+      contents: [...state.artifact.contents, newArtifactContent],
+    },
+  };
+};
diff --git a/src/agent/open-canvas/nodes/rewrite-artifact/schemas.ts b/src/agent/open-canvas/nodes/rewrite-artifact/schemas.ts
new file mode 100644
index 00000000..080e704a
--- /dev/null
+++ b/src/agent/open-canvas/nodes/rewrite-artifact/schemas.ts
@@ -0,0 +1,22 @@
+import { PROGRAMMING_LANGUAGES } from "@/types";
+import { z } from "zod";
+
+export const OPTIONALLY_UPDATE_ARTIFACT_META_SCHEMA = z.object({
+  type: z.enum(["text", "code"]).describe("The type of the artifact content."),
+  title: z
+    .string()
+    .optional()
+    .describe(
+      "The new title to give the artifact. ONLY update this if the user is making a request which changes the subject/topic of the artifact."
+    ),
+  language: z
+    .enum(
+      PROGRAMMING_LANGUAGES.map((lang) => lang.language) as [
+        string,
+        ...string[],
+      ]
+    )
+    .describe(
+      "The language of the code artifact. This should be populated with the programming language if the user is requesting code to be written, or 'other', in all other cases."
+    ),
+});
diff --git a/src/agent/open-canvas/nodes/rewrite-artifact/update-meta.ts b/src/agent/open-canvas/nodes/rewrite-artifact/update-meta.ts
new file mode 100644
index 00000000..e0e2b11c
--- /dev/null
+++ b/src/agent/open-canvas/nodes/rewrite-artifact/update-meta.ts
@@ -0,0 +1,55 @@
+import { LangGraphRunnableConfig } from "@langchain/langgraph";
+import { OpenCanvasGraphAnnotation } from "../../state";
+import { formatArtifactContent, getModelFromConfig } from "@/agent/utils";
+import { getArtifactContent } from "@/contexts/utils";
+import { GET_TITLE_TYPE_REWRITE_ARTIFACT } from "../../prompts";
+import { OPTIONALLY_UPDATE_ARTIFACT_META_SCHEMA } from "./schemas";
+import { ToolCall } from "@langchain/core/messages/tool";
+import { getFormattedReflections } from "../../../utils";
+
+export async function optionallyUpdateArtifactMeta(
+  state: typeof OpenCanvasGraphAnnotation.State,
+  config: LangGraphRunnableConfig
+): Promise<ToolCall | undefined> {
+  const toolCallingModel = (await getModelFromConfig(config))
+    .bindTools(
+      [
+        {
+          name: "optionallyUpdateArtifactMeta",
+          schema: OPTIONALLY_UPDATE_ARTIFACT_META_SCHEMA,
+          description: "Update the artifact meta information, if necessary.",
+        },
+      ],
+      { tool_choice: "optionallyUpdateArtifactMeta" }
+    )
+    .withConfig({ runName: "optionally_update_artifact_meta" });
+
+  const memoriesAsString = await getFormattedReflections(config);
+
+  const currentArtifactContent = state.artifact
+    ? getArtifactContent(state.artifact)
+    : undefined;
+  if (!currentArtifactContent) {
+    throw new Error("No artifact found");
+  }
+
+  const optionallyUpdateArtifactMetaPrompt =
+    GET_TITLE_TYPE_REWRITE_ARTIFACT.replace(
+      "{artifact}",
+      formatArtifactContent(currentArtifactContent, true)
+    ).replace("{reflections}", memoriesAsString);
+
+  const recentHumanMessage = state.messages.findLast(
+    (message) => message.getType() === "human"
+  );
+  if (!recentHumanMessage) {
+    throw new Error("No recent human message found");
+  }
+
+  const optionallyUpdateArtifactResponse = await toolCallingModel.invoke([
+    { role: "system", content: optionallyUpdateArtifactMetaPrompt },
+    recentHumanMessage,
+  ]);
+
+  return optionallyUpdateArtifactResponse.tool_calls?.[0];
+}
diff --git a/src/agent/open-canvas/nodes/rewrite-artifact/utils.ts b/src/agent/open-canvas/nodes/rewrite-artifact/utils.ts
new file mode 100644
index 00000000..3dbac450
--- /dev/null
+++ b/src/agent/open-canvas/nodes/rewrite-artifact/utils.ts
@@ -0,0 +1,110 @@
+import { getArtifactContent } from "@/contexts/utils";
+import { isArtifactCodeContent } from "@/lib/artifact_content_types";
+import { ArtifactCodeV3, ArtifactMarkdownV3 } from "@/types";
+import {
+  OPTIONALLY_UPDATE_META_PROMPT,
+  UPDATE_ENTIRE_ARTIFACT_PROMPT,
+} from "../../prompts";
+import { OpenCanvasGraphAnnotation } from "../../state";
+import { ToolCall } from "@langchain/core/messages/tool";
+
+export const validateState = (
+  state: typeof OpenCanvasGraphAnnotation.State
+) => {
+  const currentArtifactContent = state.artifact
+    ? getArtifactContent(state.artifact)
+    : undefined;
+  if (!currentArtifactContent) {
+    throw new Error("No artifact found");
+  }
+
+  const recentHumanMessage = state.messages.findLast(
+    (message) => message.getType() === "human"
+  );
+  if (!recentHumanMessage) {
+    throw new Error("No recent human message found");
+  }
+
+  return { currentArtifactContent, recentHumanMessage };
+};
+
+const buildMetaPrompt = (artifactMetaToolCall: ToolCall | undefined) => {
+  const titleSection =
+    artifactMetaToolCall?.args?.title &&
+    artifactMetaToolCall?.args?.type !== "code"
+      ? `And its title is (do NOT include this in your response):\n${artifactMetaToolCall.args.title}`
+      : "";
+
+  return OPTIONALLY_UPDATE_META_PROMPT.replace(
+    "{artifactType}",
+    artifactMetaToolCall?.args?.type
+  ).replace("{artifactTitle}", titleSection);
+};
+
+interface BuildPromptArgs {
+  artifactContent: string;
+  memoriesAsString: string;
+  isNewType: boolean;
+  artifactMetaToolCall: ToolCall | undefined;
+}
+
+export const buildPrompt = ({
+  artifactContent,
+  memoriesAsString,
+  isNewType,
+  artifactMetaToolCall,
+}: BuildPromptArgs) => {
+  const metaPrompt = isNewType ? buildMetaPrompt(artifactMetaToolCall) : "";
+
+  return UPDATE_ENTIRE_ARTIFACT_PROMPT.replace(
+    "{artifactContent}",
+    artifactContent
+  )
+    .replace("{reflections}", memoriesAsString)
+    .replace("{updateMetaPrompt}", metaPrompt);
+};
+
+interface CreateNewArtifactContentArgs {
+  artifactType: string;
+  state: typeof OpenCanvasGraphAnnotation.State;
+  currentArtifactContent: ArtifactCodeV3 | ArtifactMarkdownV3;
+  artifactMetaToolCall: ToolCall | undefined;
+  newContent: string;
+}
+
+export const createNewArtifactContent = ({
+  artifactType,
+  state,
+  currentArtifactContent,
+  artifactMetaToolCall,
+  newContent,
+}: CreateNewArtifactContentArgs): ArtifactCodeV3 | ArtifactMarkdownV3 => {
+  const baseContent = {
+    index: state.artifact.contents.length + 1,
+    title: artifactMetaToolCall?.args?.title || currentArtifactContent.title,
+  };
+
+  if (artifactType === "code") {
+    return {
+      ...baseContent,
+      type: "code",
+      language: getLanguage(artifactMetaToolCall, currentArtifactContent),
+      code: newContent,
+    };
+  }
+
+  return {
+    ...baseContent,
+    type: "text",
+    fullMarkdown: newContent,
+  };
+};
+
+const getLanguage = (
+  artifactMetaToolCall: ToolCall | undefined,
+  currentArtifactContent: ArtifactCodeV3 | ArtifactMarkdownV3 // Replace 'any' with proper type
+) =>
+  artifactMetaToolCall?.args?.programmingLanguage ||
+  (isArtifactCodeContent(currentArtifactContent)
+    ? currentArtifactContent.language
+    : "other");
diff --git a/src/agent/open-canvas/nodes/rewriteArtifact.ts b/src/agent/open-canvas/nodes/rewriteArtifact.ts
deleted file mode 100644
index 628c73ba..00000000
--- a/src/agent/open-canvas/nodes/rewriteArtifact.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-import { LangGraphRunnableConfig } from "@langchain/langgraph";
-import { initChatModel } from "langchain/chat_models/universal";
-import { z } from "zod";
-import { getArtifactContent } from "../../../contexts/utils";
-import {
-  isArtifactCodeContent,
-  isArtifactMarkdownContent,
-} from "../../../lib/artifact_content_types";
-import {
-  ArtifactCodeV3,
-  ArtifactMarkdownV3,
-  ArtifactV3,
-  PROGRAMMING_LANGUAGES,
-  Reflections,
-} from "../../../types";
-import {
-  ensureStoreInConfig,
-  formatArtifactContent,
-  formatReflections,
-  getModelNameAndProviderFromConfig,
-} from "../../utils";
-import {
-  GET_TITLE_TYPE_REWRITE_ARTIFACT,
-  OPTIONALLY_UPDATE_META_PROMPT,
-  UPDATE_ENTIRE_ARTIFACT_PROMPT,
-} from "../prompts";
-import { OpenCanvasGraphAnnotation, OpenCanvasGraphReturnType } from "../state";
-
-export const rewriteArtifact = async (
-  state: typeof OpenCanvasGraphAnnotation.State,
-  config: LangGraphRunnableConfig
-): Promise<OpenCanvasGraphReturnType> => {
-  const optionallyUpdateArtifactMetaSchema = z.object({
-    type: z
-      .enum(["text", "code"])
-      .describe("The type of the artifact content."),
-    title: z
-      .string()
-      .optional()
-      .describe(
-        "The new title to give the artifact. ONLY update this if the user is making a request which changes the subject/topic of the artifact."
-      ),
-    language: z
-      .enum(
-        PROGRAMMING_LANGUAGES.map((lang) => lang.language) as [
-          string,
-          ...string[],
-        ]
-      )
-      .describe(
-        "The language of the code artifact. This should be populated with the programming language if the user is requesting code to be written, or 'other', in all other cases."
-      ),
-  });
-  const { modelName, modelProvider, modelConfig } =
-    getModelNameAndProviderFromConfig(config);
-  const toolCallingModel = (
-    await initChatModel(modelName, {
-      modelProvider,
-      temperature: 0,
-      // temperature: modelConfig.temperatureRange.current,
-      maxTokens: modelConfig.maxTokens.current,
-    })
-  )
-    .bindTools(
-      [
-        {
-          name: "optionallyUpdateArtifactMeta",
-          schema: optionallyUpdateArtifactMetaSchema,
-          description: "Update the artifact meta information, if necessary.",
-        },
-      ],
-      { tool_choice: "optionallyUpdateArtifactMeta" }
-    )
-    .withConfig({ runName: "optionally_update_artifact_meta" });
-
-  const smallModelWithConfig = (
-    await initChatModel(modelName, {
-      temperature: 0,
-      modelProvider,
-    })
-  ).withConfig({
-    runName: "rewrite_artifact_model_call",
-  });
-
-  const store = ensureStoreInConfig(config);
-  const assistantId = config.configurable?.assistant_id;
-  if (!assistantId) {
-    throw new Error("`assistant_id` not found in configurable");
-  }
-  const memoryNamespace = ["memories", assistantId];
-  const memoryKey = "reflection";
-  const memories = await store.get(memoryNamespace, memoryKey);
-  const memoriesAsString = memories?.value
-    ? formatReflections(memories.value as Reflections)
-    : "No reflections found.";
-
-  const currentArtifactContent = state.artifact
-    ? getArtifactContent(state.artifact)
-    : undefined;
-  if (!currentArtifactContent) {
-    throw new Error("No artifact found");
-  }
-
-  const optionallyUpdateArtifactMetaPrompt =
-    GET_TITLE_TYPE_REWRITE_ARTIFACT.replace(
-      "{artifact}",
-      formatArtifactContent(currentArtifactContent, true)
-    ).replace("{reflections}", memoriesAsString);
-
-  const recentHumanMessage = state.messages.findLast(
-    (message) => message.getType() === "human"
-  );
-  if (!recentHumanMessage) {
-    throw new Error("No recent human message found");
-  }
-
-  const optionallyUpdateArtifactResponse = await toolCallingModel.invoke([
-    { role: "system", content: optionallyUpdateArtifactMetaPrompt },
-    recentHumanMessage,
-  ]);
-  const artifactMetaToolCall = optionallyUpdateArtifactResponse.tool_calls?.[0];
-  const artifactType = artifactMetaToolCall?.args?.type;
-  const isNewType = artifactType !== currentArtifactContent.type;
-
-  const artifactContent = isArtifactMarkdownContent(currentArtifactContent)
-    ? currentArtifactContent.fullMarkdown
-    : currentArtifactContent.code;
-
-  const formattedPrompt = UPDATE_ENTIRE_ARTIFACT_PROMPT.replace(
-    "{artifactContent}",
-    artifactContent
-  )
-    .replace("{reflections}", memoriesAsString)
-    .replace(
-      "{updateMetaPrompt}",
-      isNewType
-        ? OPTIONALLY_UPDATE_META_PROMPT.replace(
-            "{artifactType}",
-            artifactMetaToolCall?.args?.type
-          ).replace(
-            "{artifactTitle}",
-            artifactMetaToolCall?.args?.title &&
-              artifactMetaToolCall?.args?.type !== "code"
-              ? `And its title is (do NOT include this in your response):\n${artifactMetaToolCall?.args?.title}`
-              : ""
-          )
-        : ""
-    );
-
-  const newArtifactResponse = await smallModelWithConfig.invoke([
-    { role: "system", content: formattedPrompt },
-    recentHumanMessage,
-  ]);
-
-  let newArtifactContent: ArtifactCodeV3 | ArtifactMarkdownV3;
-  if (artifactType === "code") {
-    newArtifactContent = {
-      index: state.artifact.contents.length + 1,
-      type: "code",
-      title: artifactMetaToolCall?.args?.title || currentArtifactContent.title,
-      language:
-        artifactMetaToolCall?.args?.programmingLanguage ||
-        (isArtifactCodeContent(currentArtifactContent)
-          ? currentArtifactContent.language
-          : "other"),
-      code: newArtifactResponse.content as string,
-    };
-  } else {
-    newArtifactContent = {
-      index: state.artifact.contents.length + 1,
-      type: "text",
-      title: artifactMetaToolCall?.args?.title || currentArtifactContent.title,
-      fullMarkdown: newArtifactResponse.content as string,
-    };
-  }
-
-  const newArtifact: ArtifactV3 = {
-    ...state.artifact,
-    currentIndex: state.artifact.contents.length + 1,
-    contents: [...state.artifact.contents, newArtifactContent],
-  };
-
-  return {
-    artifact: newArtifact,
-  };
-};
diff --git a/src/agent/utils.ts b/src/agent/utils.ts
index b0bd6e2f..5d248c16 100644
--- a/src/agent/utils.ts
+++ b/src/agent/utils.ts
@@ -2,6 +2,7 @@ import { isArtifactCodeContent } from "@/lib/artifact_content_types";
 import { CustomModelConfig } from "@/types";
 import { BaseStore, LangGraphRunnableConfig } from "@langchain/langgraph";
 import { ArtifactCodeV3, ArtifactMarkdownV3, Reflections } from "../types";
+import { initChatModel } from "langchain/chat_models/universal";
 
 export const formatReflections = (
   reflections: Reflections,
@@ -75,6 +76,24 @@ export const formatReflections = (
   return styleString + "\n\n" + contentString;
 };
 
+export async function getFormattedReflections(
+  config: LangGraphRunnableConfig
+): Promise<string> {
+  const store = ensureStoreInConfig(config);
+  const assistantId = config.configurable?.assistant_id;
+  if (!assistantId) {
+    throw new Error("`assistant_id` not found in configurable");
+  }
+  const memoryNamespace = ["memories", assistantId];
+  const memoryKey = "reflection";
+  const memories = await store.get(memoryNamespace, memoryKey);
+  const memoriesAsString = memories?.value
+    ? formatReflections(memories.value as Reflections)
+    : "No reflections found.";
+
+  return memoriesAsString;
+}
+
 export const ensureStoreInConfig = (
   config: LangGraphRunnableConfig
 ): BaseStore => {
@@ -161,3 +180,21 @@ export const getModelNameAndProviderFromConfig = (
 
   throw new Error("Unknown model provider");
 };
+
+export function optionallyGetSystemPromptFromConfig(
+  config: LangGraphRunnableConfig
+): string | undefined {
+  return config.configurable?.systemPrompt as string | undefined;
+}
+
+export async function getModelFromConfig(
+  config: LangGraphRunnableConfig,
+) {
+  const { modelName, modelProvider, modelConfig } =
+    getModelNameAndProviderFromConfig(config);
+  return await initChatModel(modelName, {
+    modelProvider,
+    temperature: modelConfig.temperatureRange.current,
+    maxTokens: modelConfig.maxTokens.current,
+  });
+}
diff --git a/src/components/artifacts/ArtifactRenderer.tsx b/src/components/artifacts/ArtifactRenderer.tsx
index 5d4e5e87..ee79da2e 100644
--- a/src/components/artifacts/ArtifactRenderer.tsx
+++ b/src/components/artifacts/ArtifactRenderer.tsx
@@ -117,7 +117,7 @@ function NavigateArtifactHistory(props: NavigateArtifactHistoryProps) {
 function ArtifactRendererComponent(props: ArtifactRendererProps) {
   const {
     graphData,
-    threadData: { assistantId },
+    assistantsData: { selectedAssistant },
     userData: { user },
   } = useGraphContext();
   const {
@@ -354,7 +354,7 @@ function ArtifactRendererComponent(props: ArtifactRendererProps) {
           />
         </div>
         <div className="ml-auto mt-[10px] mr-[6px]">
-          <ReflectionsDialog assistantId={assistantId} />
+          <ReflectionsDialog selectedAssistant={selectedAssistant} />
         </div>
       </div>
       <div
@@ -413,7 +413,7 @@ function ArtifactRendererComponent(props: ArtifactRendererProps) {
       </div>
       <CustomQuickActions
         streamMessage={streamMessage}
-        assistantId={assistantId}
+        assistantId={selectedAssistant?.assistant_id}
         user={user}
         isTextSelected={isSelectionActive || selectedBlocks !== undefined}
       />
diff --git a/src/components/artifacts/actions_toolbar/custom/NewCustomQuickActionDialog.tsx b/src/components/artifacts/actions_toolbar/custom/NewCustomQuickActionDialog.tsx
index c1ed520e..f6210264 100644
--- a/src/components/artifacts/actions_toolbar/custom/NewCustomQuickActionDialog.tsx
+++ b/src/components/artifacts/actions_toolbar/custom/NewCustomQuickActionDialog.tsx
@@ -20,7 +20,7 @@ import {
   useState,
 } from "react";
 import { FullPrompt } from "./FullPrompt";
-import { InlineContextTooltip } from "./PromptContextTooltip";
+import { InlineContextTooltip } from "@/components/ui/inline-context-tooltip";
 import { useStore } from "@/hooks/useStore";
 import { useToast } from "@/hooks/use-toast";
 import { v4 as uuidv4 } from "uuid";
@@ -28,6 +28,9 @@ import { CustomQuickAction } from "@/types";
 import { TighterText } from "@/components/ui/header";
 import { User } from "@supabase/supabase-js";
 
+const CUSTOM_INSTRUCTIONS_TOOLTIP_TEXT = `This field contains the custom instructions you set, which will then be used to instruct the LLM on how to re-generate the selected artifact.`;
+const FULL_PROMPT_TOOLTIP_TEXT = `This is the full prompt that will be set to the LLM when you invoke this quick action, including your custom instructions and other default context.`;
+
 interface NewCustomQuickActionDialogProps {
   user: User | undefined;
   isEditing: boolean;
@@ -224,7 +227,11 @@ export function NewCustomQuickActionDialog(
               <div className="w-full h-full flex flex-col gap-1">
                 <TighterText className="text-gray-500 text-sm flex items-center">
                   Custom instructions
-                  <InlineContextTooltip type="custom_instructions" />
+                  <InlineContextTooltip>
+                    <p className="text-sm text-gray-600">
+                      {CUSTOM_INSTRUCTIONS_TOOLTIP_TEXT}
+                    </p>
+                  </InlineContextTooltip>
                 </TighterText>
                 <Textarea
                   disabled={isSubmitLoading}
@@ -241,7 +248,11 @@ export function NewCustomQuickActionDialog(
                 <div className="w-full h-full flex flex-col gap-1">
                   <TighterText className="text-gray-500 text-sm flex items-center">
                     Full prompt
-                    <InlineContextTooltip type="full_prompt" />
+                    <InlineContextTooltip>
+                      <p className="text-sm text-gray-600">
+                        {FULL_PROMPT_TOOLTIP_TEXT}
+                      </p>
+                    </InlineContextTooltip>
                   </TighterText>
                   <FullPrompt
                     customQuickAction={{
diff --git a/src/components/artifacts/actions_toolbar/custom/PromptContextTooltip.tsx b/src/components/artifacts/actions_toolbar/custom/PromptContextTooltip.tsx
deleted file mode 100644
index 35c06ff8..00000000
--- a/src/components/artifacts/actions_toolbar/custom/PromptContextTooltip.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/components/ui/hover-card";
-import { CircleHelp } from "lucide-react";
-
-const CUSTOM_INSTRUCTIONS_TOOLTIP_TEXT = `This field contains the custom instructions you set, which will then be used to instruct the LLM on how to re-generate the selected artifact.`;
-const FULL_PROMPT_TOOLTIP_TEXT = `This is the full prompt that will be set to the LLM when you invoke this quick action, including your custom instructions and other default context.`;
-
-export const InlineContextTooltip = ({
-  type,
-}: {
-  type: "custom_instructions" | "full_prompt";
-}) => (
-  <HoverCard>
-    <HoverCardTrigger asChild>
-      <span className="inline-flex items-center ml-1">
-        <CircleHelp className="w-3 h-3 text-gray-600" />
-      </span>
-    </HoverCardTrigger>
-    <HoverCardContent className="max-w-[300px] text-wrap">
-      <p className="text-black font-medium">What&apos;s this?</p>
-      <p className="text-sm text-gray-600">
-        {type === "custom_instructions"
-          ? CUSTOM_INSTRUCTIONS_TOOLTIP_TEXT
-          : FULL_PROMPT_TOOLTIP_TEXT}
-      </p>
-    </HoverCardContent>
-  </HoverCard>
-);
diff --git a/src/components/assistant-select/alert-new-feature.tsx b/src/components/assistant-select/alert-new-feature.tsx
new file mode 100644
index 00000000..3304e254
--- /dev/null
+++ b/src/components/assistant-select/alert-new-feature.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { OC_HAS_SEEN_CUSTOM_ASSISTANTS_ALERT } from "@/constants";
+import { Dispatch, SetStateAction, useEffect } from "react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Users, X } from "lucide-react";
+import { TighterText } from "@/components/ui/header";
+import { TooltipIconButton } from "@/components/ui/assistant-ui/tooltip-icon-button";
+
+export const AlertNewAssistantsFeature = ({
+  shouldRender,
+  showAlert,
+  setShowAlert,
+}: {
+  shouldRender: boolean;
+  showAlert: boolean;
+  setShowAlert: Dispatch<SetStateAction<boolean>>;
+}) => {
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const hasSeenAlert = localStorage.getItem(
+      OC_HAS_SEEN_CUSTOM_ASSISTANTS_ALERT
+    );
+    if (!hasSeenAlert) {
+      setShowAlert(true);
+    }
+  }, []);
+
+  const handleCloseAlert = () => {
+    setShowAlert(false);
+    // Wait for animation to complete before setting localStorage
+    setTimeout(() => {
+      localStorage.setItem(OC_HAS_SEEN_CUSTOM_ASSISTANTS_ALERT, "true");
+    }, 300);
+  };
+
+  if (!showAlert || !shouldRender) {
+    return <AnimatePresence />; // Keep AnimatePresence mounted to enable fading out
+  }
+
+  return (
+    <AnimatePresence mode="wait">
+      {showAlert && (
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -20 }}
+          transition={{ duration: 0.2 }}
+        >
+          <div className="relative p-[0px] rounded-lg bg-gradient-to-r from-pink-500/50 via-purple-500/50 to-pink-500/50 animate-gradient-xy shadow-[0_0_25px_rgba(236,72,153,0.3)] before:absolute before:inset-0 before:rounded-lg before:p-[12px] before:bg-gradient-to-r before:from-pink-500/20 before:via-purple-500/20 before:to-pink-500/20 before:blur-xl before:-z-10 before:animate-gradient-xy-enhanced">
+            <Alert className="max-w-xl bg-white rounded-lg hover:bg-gray-50 transition-colors duration-300 ease-in-out">
+              <AlertTitle className="flex justify-between items-center">
+                <div className="flex items-center justify-start gap-1">
+                  <Users className="w-4 h-4" />
+                  <TighterText>Multiple Assistants!</TighterText>
+                </div>
+                <TooltipIconButton
+                  tooltip="Close alert"
+                  variant="ghost"
+                  delayDuration={400}
+                  onClick={handleCloseAlert}
+                  size="sm"
+                >
+                  <X className="w-4 h-4 text-gray-600" />
+                </TooltipIconButton>
+              </AlertTitle>
+              <AlertDescription className="inline-flex items-center justify-start gap-1 flex-wrap mt-2">
+                <p className="text-left">
+                  Create and customize multiple AI assistants! Each assistant
+                  maintains its own unique memory based on the conversations it
+                  manages, helping you better organize different types of
+                  content generation.
+                </p>
+                <p className="text-left">
+                  Plus, you can now customize how each assistant behaves with
+                  personalized system messages.
+                </p>
+              </AlertDescription>
+            </Alert>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
diff --git a/src/components/assistant-select/assistant-item.tsx b/src/components/assistant-select/assistant-item.tsx
new file mode 100644
index 00000000..b332b088
--- /dev/null
+++ b/src/components/assistant-select/assistant-item.tsx
@@ -0,0 +1,69 @@
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { Dispatch, MouseEventHandler, SetStateAction } from "react";
+import { Assistant } from "@langchain/langgraph-sdk";
+import { cn } from "@/lib/utils";
+import { getIcon } from "./utils";
+import { EditDeleteDropdown } from "./edit-delete-dropdown";
+
+interface AssistantItemProps {
+  assistant: Assistant;
+  allDisabled: boolean;
+  selectedAssistantId: string | undefined;
+  setAllDisabled: Dispatch<SetStateAction<boolean>>;
+  onClick: MouseEventHandler<HTMLDivElement>;
+  setEditModalOpen: Dispatch<SetStateAction<boolean>>;
+  deleteAssistant: (assistantId: string) => Promise<boolean>;
+  setAssistantDropdownOpen: Dispatch<SetStateAction<boolean>>;
+  setEditingAssistant: Dispatch<SetStateAction<Assistant | undefined>>;
+}
+
+export function AssistantItem({
+  allDisabled,
+  assistant,
+  selectedAssistantId,
+  setAllDisabled,
+  onClick,
+  setEditModalOpen,
+  deleteAssistant,
+  setAssistantDropdownOpen,
+  setEditingAssistant,
+}: AssistantItemProps) {
+  const isDefault = assistant.metadata?.is_default as boolean | undefined;
+  const isSelected = assistant.assistant_id === selectedAssistantId;
+  const metadata = assistant.metadata as Record<string, any>;
+
+  return (
+    <div className="flex items-center justify-center w-full gap-1">
+      <DropdownMenuItem
+        onClick={onClick}
+        disabled={allDisabled}
+        className={cn(
+          "flex items-center justify-start gap-2 w-full",
+          isSelected && "bg-gray-50"
+        )}
+      >
+        <span
+          style={{ color: metadata?.iconData?.iconColor || "#4b5563" }}
+          className="flex items-center justify-start w-4 h-4"
+        >
+          {getIcon(metadata?.iconData?.iconName as string | undefined)}
+        </span>
+        {assistant.name}
+        {isDefault && (
+          <span className="text-xs text-gray-500 ml-auto">{"(default)"}</span>
+        )}
+        {isSelected && <span className="ml-auto">•</span>}
+      </DropdownMenuItem>
+      <EditDeleteDropdown
+        allowDelete={!isDefault}
+        setDisabled={setAllDisabled}
+        disabled={allDisabled}
+        setEditingAssistant={setEditingAssistant}
+        setEditModalOpen={setEditModalOpen}
+        deleteAssistant={deleteAssistant}
+        setAssistantDropdownOpen={setAssistantDropdownOpen}
+        selectedAssistant={assistant}
+      />
+    </div>
+  );
+}
diff --git a/src/components/assistant-select/color-picker.tsx b/src/components/assistant-select/color-picker.tsx
new file mode 100644
index 00000000..2ab43742
--- /dev/null
+++ b/src/components/assistant-select/color-picker.tsx
@@ -0,0 +1,82 @@
+import { Dispatch, SetStateAction } from "react";
+import React from "react";
+import { HexColorPicker } from "react-colorful";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface ColorPickerProps {
+  iconColor: string;
+  setIconColor: Dispatch<SetStateAction<string>>;
+  showColorPicker: boolean;
+  setShowColorPicker: Dispatch<SetStateAction<boolean>>;
+  hoverTimer: NodeJS.Timeout | null;
+  setHoverTimer: Dispatch<SetStateAction<NodeJS.Timeout | null>>;
+  disabled: boolean;
+}
+
+export function ColorPicker(props: ColorPickerProps) {
+  const {
+    iconColor,
+    setIconColor,
+    showColorPicker,
+    setShowColorPicker,
+    hoverTimer,
+    setHoverTimer,
+  } = props;
+
+  const handleMouseEnter = () => {
+    if (props.disabled) return;
+    const timer = setTimeout(() => {
+      setShowColorPicker(true);
+    }, 200);
+    setHoverTimer(timer);
+  };
+
+  const handleMouseLeave = () => {
+    if (hoverTimer) {
+      clearTimeout(hoverTimer);
+    }
+    setShowColorPicker(false);
+  };
+
+  return (
+    <div className="relative">
+      <div
+        className="h-9 w-9 rounded-md cursor-pointer hover:ring-2 ring-offset-2 ring-gray-400 transition-all ease-in-out duration-200"
+        style={{ backgroundColor: iconColor }}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={() => {
+          if (hoverTimer) {
+            clearTimeout(hoverTimer);
+          }
+        }}
+      />
+      <AnimatePresence>
+        {showColorPicker && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9, y: 10 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.9, y: 10 }}
+            transition={{ duration: 0.2 }}
+            className="absolute bottom-full mb-2 z-50"
+            onMouseEnter={() => setShowColorPicker(true)}
+            onMouseLeave={handleMouseLeave}
+          >
+            <HexColorPicker
+              aria-disabled={props.disabled}
+              color={iconColor}
+              onChange={(e) => {
+                if (props.disabled) return;
+
+                if (!e.startsWith("#")) {
+                  setIconColor("#" + e);
+                } else {
+                  setIconColor(e);
+                }
+              }}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/src/components/assistant-select/create-edit-assistant-dialog.tsx b/src/components/assistant-select/create-edit-assistant-dialog.tsx
new file mode 100644
index 00000000..51103caf
--- /dev/null
+++ b/src/components/assistant-select/create-edit-assistant-dialog.tsx
@@ -0,0 +1,330 @@
+import { CreateAssistantFields } from "@/hooks/useAssistants";
+import { Assistant } from "@langchain/langgraph-sdk";
+import {
+  Dispatch,
+  FormEvent,
+  SetStateAction,
+  useEffect,
+  useState,
+} from "react";
+import * as Icons from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { Button } from "../ui/button";
+import { TighterText } from "../ui/header";
+import { Label } from "../ui/label";
+import { Input } from "../ui/input";
+import { IconSelect } from "./icon-select";
+import React from "react";
+import { useToast } from "@/hooks/use-toast";
+import { ColorPicker } from "./color-picker";
+import { Textarea } from "../ui/textarea";
+import { InlineContextTooltip } from "../ui/inline-context-tooltip";
+
+interface CreateEditAssistantDialogProps {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  userId: string | undefined;
+  isEditing: boolean;
+  assistant?: Assistant;
+  createCustomAssistant: (
+    newAssistant: CreateAssistantFields,
+    userId: string,
+    successCallback?: (id: string) => void
+  ) => Promise<boolean>;
+  editCustomAssistant: (
+    editedAssistant: CreateAssistantFields,
+    assistantId: string,
+    userId: string
+  ) => Promise<Assistant | undefined>;
+  isLoading: boolean;
+  allDisabled: boolean;
+  setAllDisabled: Dispatch<SetStateAction<boolean>>;
+}
+
+const GH_DISCUSSION_URL = `https://github.com/langchain-ai/open-canvas/discussions/182`;
+
+const SystemPromptWhatsThis = (): React.ReactNode => (
+  <span className="flex flex-col gap-1 text-sm text-gray-600">
+    <p>
+      Custom system prompts will be passed to the LLM when generating, or
+      re-writing artifacts. They are <i>not</i> used for responding to general
+      queries in the chat, highlight to edit, or quick actions.
+    </p>
+    <p>
+      We&apos;re looking for feedback on how to best handle customizing
+      assistant prompts. To vote, and give feedback please visit{" "}
+      <a href={GH_DISCUSSION_URL} target="_blank">
+        this GitHub discussion
+      </a>
+      .
+    </p>
+  </span>
+);
+
+export function CreateEditAssistantDialog(
+  props: CreateEditAssistantDialogProps
+) {
+  const { toast } = useToast();
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [systemPrompt, setSystemPrompt] = useState("");
+  const [iconName, setIconName] = useState<keyof typeof Icons>("User");
+  const [hasSelectedIcon, setHasSelectedIcon] = useState(false);
+  const [iconColor, setIconColor] = useState("#000000");
+  const [showColorPicker, setShowColorPicker] = useState(false);
+  const [hoverTimer, setHoverTimer] = useState<NodeJS.Timeout | null>(null);
+
+  const metadata = props.assistant?.metadata as Record<string, any> | undefined;
+
+  useEffect(() => {
+    if ((props.assistant, props.isEditing)) {
+      setName(props.assistant?.name || "");
+      setDescription(metadata?.description || "");
+      setSystemPrompt(
+        (props.assistant?.config?.configurable?.systemPrompt as
+          | string
+          | undefined) || ""
+      );
+      setHasSelectedIcon(true);
+      setIconName(metadata?.iconData?.iconName || "User");
+      setIconColor(metadata?.iconData?.iconColor || "#000000");
+    } else if (!props.isEditing) {
+      setName("");
+      setDescription("");
+      setSystemPrompt("");
+      setIconName("User");
+      setIconColor("#000000");
+    }
+  }, [props.assistant, props.isEditing]);
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!props.userId) {
+      toast({
+        title: "User not found",
+        variant: "destructive",
+        duration: 5000,
+      });
+      return;
+    }
+    if (props.isEditing && !props.assistant) {
+      toast({
+        title: "Assistant not found",
+        variant: "destructive",
+        duration: 5000,
+      });
+      return;
+    }
+
+    props.setAllDisabled(true);
+
+    let res: boolean;
+    if (props.isEditing && props.assistant) {
+      res = !!(await props.editCustomAssistant(
+        {
+          name,
+          description,
+          systemPrompt,
+          iconData: {
+            iconName,
+            iconColor,
+          },
+        },
+        props.assistant.assistant_id,
+        props.userId
+      ));
+    } else {
+      res = await props.createCustomAssistant(
+        {
+          name,
+          description,
+          systemPrompt,
+          iconData: {
+            iconName,
+            iconColor,
+          },
+        },
+        props.userId
+      );
+    }
+
+    if (res) {
+      toast({
+        title: `Assistant ${props.isEditing ? "edited" : "created"} successfully`,
+        duration: 5000,
+      });
+    } else {
+      toast({
+        title: `Failed to ${props.isEditing ? "edit" : "create"} assistant`,
+        variant: "destructive",
+        duration: 5000,
+      });
+    }
+    props.setAllDisabled(false);
+    props.setOpen(false);
+  };
+
+  const handleResetState = () => {
+    setName("");
+    setDescription("");
+    setSystemPrompt("");
+    setIconName("User");
+    setIconColor("#000000");
+  };
+
+  if (props.isEditing && !props.assistant) {
+    return null;
+  }
+
+  return (
+    <Dialog
+      open={props.open}
+      onOpenChange={(change) => {
+        if (!change) {
+          handleResetState();
+        }
+        props.setOpen(change);
+      }}
+    >
+      <DialogContent className="max-w-xl max-h-[90vh] p-8 bg-white rounded-lg shadow-xl min-w-[70vw] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
+        <DialogHeader>
+          <DialogTitle className="text-3xl font-light text-gray-800">
+            <TighterText>
+              {props.isEditing ? "Edit" : "Create"} Assistant
+            </TighterText>
+          </DialogTitle>
+          <DialogDescription className="mt-2 text-md font-light text-gray-600">
+            <TighterText>
+              Creating a new assistant allows you to tailor your reflections to
+              a specific context, as reflections are unique to assistants.
+            </TighterText>
+          </DialogDescription>
+        </DialogHeader>
+        <form
+          onSubmit={(e) => handleSubmit(e)}
+          className="flex flex-col items-start justify-start gap-4 w-full"
+        >
+          <Label htmlFor="name">
+            <TighterText>
+              Name <span className="text-red-500">*</span>
+            </TighterText>
+          </Label>
+          <Input
+            disabled={props.allDisabled}
+            required
+            id="name"
+            placeholder="Work Emails"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+
+          <Label htmlFor="description">
+            <TighterText>Description</TighterText>
+          </Label>
+          <Input
+            disabled={props.allDisabled}
+            required={false}
+            id="description"
+            placeholder="Assistant for my work emails"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+          />
+
+          <Label htmlFor="system-prompt">
+            <TighterText className="flex items-center">
+              System Prompt
+              <InlineContextTooltip cardContentClassName="w-[500px] ml-10">
+                <SystemPromptWhatsThis />
+              </InlineContextTooltip>
+            </TighterText>
+          </Label>
+          <Textarea
+            disabled={props.allDisabled}
+            required={false}
+            id="system-prompt"
+            placeholder="You are an expert email assistant..."
+            value={systemPrompt}
+            onChange={(e) => setSystemPrompt(e.target.value)}
+            rows={5}
+          />
+
+          <div className="flex w-full items-center justify-between gap-4">
+            <div className="flex flex-col gap-4 items-start justify-start w-full">
+              <Label htmlFor="icon">
+                <TighterText>Icon</TighterText>
+              </Label>
+              <IconSelect
+                allDisabled={props.allDisabled}
+                iconColor={iconColor}
+                selectedIcon={iconName}
+                setSelectedIcon={(i) => {
+                  setHasSelectedIcon(true);
+                  setIconName(i);
+                }}
+                hasSelectedIcon={hasSelectedIcon}
+              />
+            </div>
+            <div className="flex flex-col gap-4 items-start justify-start w-full">
+              <Label htmlFor="description">
+                <TighterText>Color</TighterText>
+              </Label>
+              <div className="flex gap-1 items-center justify-start w-full">
+                <ColorPicker
+                  disabled={props.allDisabled}
+                  iconColor={iconColor}
+                  setIconColor={setIconColor}
+                  showColorPicker={showColorPicker}
+                  setShowColorPicker={setShowColorPicker}
+                  hoverTimer={hoverTimer}
+                  setHoverTimer={setHoverTimer}
+                />
+                <Input
+                  disabled={props.allDisabled}
+                  required={false}
+                  id="description"
+                  placeholder="Assistant for my work emails"
+                  value={iconColor}
+                  onChange={(e) => {
+                    if (!e.target.value.startsWith("#")) {
+                      setIconColor("#" + e.target.value);
+                    } else {
+                      setIconColor(e.target.value);
+                    }
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-center w-full mt-4 gap-3">
+            <Button
+              disabled={props.allDisabled}
+              className="w-full"
+              type="submit"
+            >
+              <TighterText>Save</TighterText>
+            </Button>
+            <Button
+              disabled={props.allDisabled}
+              onClick={() => {
+                handleResetState();
+                props.setOpen(false);
+              }}
+              variant="destructive"
+              className="w-[20%]"
+              type="button"
+            >
+              <TighterText>Cancel</TighterText>
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/assistant-select/edit-delete-dropdown.module.css b/src/components/assistant-select/edit-delete-dropdown.module.css
new file mode 100644
index 00000000..79b248bc
--- /dev/null
+++ b/src/components/assistant-select/edit-delete-dropdown.module.css
@@ -0,0 +1,12 @@
+.dropdownContent {
+  width: 48px !important;
+  min-width: 48px !important;
+  padding: 4px !important;
+}
+
+.dropdownContent > [role="menuitem"] {
+  width: 100% !important;
+  padding: 4px !important;
+  display: flex;
+  justify-content: center;
+}
diff --git a/src/components/assistant-select/edit-delete-dropdown.tsx b/src/components/assistant-select/edit-delete-dropdown.tsx
new file mode 100644
index 00000000..ad1ca45a
--- /dev/null
+++ b/src/components/assistant-select/edit-delete-dropdown.tsx
@@ -0,0 +1,95 @@
+import { Dispatch, SetStateAction, useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { EllipsisVertical, Pencil, Trash2 } from "lucide-react";
+import { Assistant } from "@langchain/langgraph-sdk";
+import { useToast } from "@/hooks/use-toast";
+import { TooltipIconButton } from "../ui/assistant-ui/tooltip-icon-button";
+import styles from "./edit-delete-dropdown.module.css";
+
+interface EditDeleteDropdownProps {
+  setEditModalOpen: Dispatch<SetStateAction<boolean>>;
+  deleteAssistant: (assistantId: string) => Promise<boolean>;
+  setAssistantDropdownOpen: Dispatch<SetStateAction<boolean>>;
+  setEditingAssistant: Dispatch<SetStateAction<Assistant | undefined>>;
+  selectedAssistant: Assistant;
+  disabled: boolean;
+  allowDelete: boolean;
+  setDisabled: Dispatch<SetStateAction<boolean>>;
+}
+
+export function EditDeleteDropdown({
+  setEditModalOpen,
+  setEditingAssistant,
+  deleteAssistant,
+  setAssistantDropdownOpen,
+  setDisabled,
+  allowDelete,
+  selectedAssistant,
+  disabled,
+}: EditDeleteDropdownProps) {
+  const { toast } = useToast();
+  const [open, setOpen] = useState(false);
+
+  const tooltipText = allowDelete ? "Edit/Delete" : "Edit";
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <TooltipIconButton
+          disabled={disabled}
+          tooltip={tooltipText}
+          variant="ghost"
+          delayDuration={200}
+          className="w-8 h-8"
+        >
+          <EllipsisVertical className="w-4 h-4" />
+        </TooltipIconButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className={styles.dropdownContent}>
+        <DropdownMenuItem
+          onClick={() => {
+            setEditingAssistant(selectedAssistant);
+            setEditModalOpen(true);
+          }}
+          className="w-8"
+          disabled={disabled}
+        >
+          <Pencil className="text-gray-600 hover:text-black transition-colors ease-in-out duration-200" />
+        </DropdownMenuItem>
+        {allowDelete && (
+          <DropdownMenuItem
+            onClick={async () => {
+              setDisabled(true);
+              const res = await deleteAssistant(selectedAssistant.assistant_id);
+              if (res) {
+                toast({
+                  title: "Assistant deleted",
+                  duration: 5000,
+                });
+              } else {
+                toast({
+                  title: "Error",
+                  description: "Failed to delete the assistant.",
+                  variant: "destructive",
+                  duration: 5000,
+                });
+              }
+              setDisabled(false);
+              setOpen(false);
+              setAssistantDropdownOpen(false);
+            }}
+            disabled={disabled}
+            className="w-8"
+          >
+            <Trash2 className="text-gray-600 hover:text-red-500 transition-colors ease-in-out duration-200" />
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/assistant-select/icon-select.tsx b/src/components/assistant-select/icon-select.tsx
new file mode 100644
index 00000000..14733008
--- /dev/null
+++ b/src/components/assistant-select/icon-select.tsx
@@ -0,0 +1,185 @@
+import * as Icons from "lucide-react";
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import React from "react";
+import debounce from "lodash/debounce";
+import startCase from "lodash/startCase";
+import uniq from "lodash/uniq";
+import uniqBy from "lodash/uniqBy";
+import { Button } from "../ui/button";
+
+type KeyofIcons = keyof typeof Icons;
+
+const prettifyIconLabel = (iconName: string) => {
+  iconName = iconName
+    .replace("Icon", "")
+    .replace("icon", "")
+    .replace("Lucide", "");
+  return startCase(iconName);
+};
+
+export function IconSelect({
+  selectedIcon,
+  setSelectedIcon,
+  hasSelectedIcon,
+  iconColor,
+  allDisabled,
+}: {
+  allDisabled: boolean;
+  selectedIcon: KeyofIcons;
+  setSelectedIcon: Dispatch<SetStateAction<KeyofIcons>>;
+  hasSelectedIcon: boolean;
+  iconColor: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [startIndex, setStartIndex] = useState(0);
+  const WINDOW_SIZE = 300;
+  const BUFFER_SIZE = 100;
+
+  // Get all icon names and memoize the filtered results
+  const filteredIcons: Array<{ value: string; label: string }> = useMemo(() => {
+    const iconItems = uniq(
+      Object.keys(Icons).filter((name) =>
+        name.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    );
+    return uniqBy(
+      iconItems?.map((iconName) => ({
+        value: iconName,
+        label: prettifyIconLabel(iconName),
+      })),
+      "label"
+    );
+  }, [searchTerm]);
+
+  // handleScroll handles both up and down scrolling
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const container = e.currentTarget;
+    const scrollPosition = container.scrollTop;
+    const scrollHeight = container.scrollHeight;
+    const clientHeight = container.clientHeight;
+
+    // Calculate scroll percentage
+    const scrollPercentage = scrollPosition / (scrollHeight - clientHeight);
+
+    // Adjust startIndex based on scroll direction
+    if (
+      scrollPercentage > 0.7 &&
+      startIndex + WINDOW_SIZE < filteredIcons.length
+    ) {
+      setStartIndex(
+        Math.min(startIndex + BUFFER_SIZE, filteredIcons.length - WINDOW_SIZE)
+      );
+    } else if (scrollPercentage < 0.3 && startIndex > 0) {
+      setStartIndex(Math.max(0, startIndex - BUFFER_SIZE));
+    }
+  };
+
+  // Debounced search handler
+  const debouncedSearch = useMemo(
+    () =>
+      debounce((value: string) => {
+        setSearchTerm(value);
+      }, 300),
+    [] // Empty dependency array since we don't want to recreate the debounced function
+  );
+
+  useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
+
+  return (
+    <DropdownMenu
+      open={open}
+      onOpenChange={(c) => {
+        if (!c) {
+          setStartIndex(0);
+          setSearchTerm("");
+          debouncedSearch.cancel(); // Cancel any pending debounced calls
+        }
+        setOpen(c);
+      }}
+    >
+      <DropdownMenuTrigger className="w-full" asChild disabled={allDisabled}>
+        {hasSelectedIcon ? (
+          <Button
+            variant="outline"
+            className="flex flex-row items-center justify-between"
+            disabled={allDisabled}
+          >
+            <div className="flex flex-row items-center gap-2 justify-start">
+              <span style={{ color: iconColor }}>
+                {React.createElement(Icons[selectedIcon] as React.ElementType)}
+              </span>
+              {prettifyIconLabel(selectedIcon)}
+            </div>
+            {open ? <Icons.ChevronUp /> : <Icons.ChevronDown />}
+          </Button>
+        ) : (
+          <Button
+            disabled={allDisabled}
+            variant="outline"
+            className="flex justify-between"
+          >
+            Select an icon {open ? <Icons.ChevronUp /> : <Icons.ChevronDown />}
+          </Button>
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="h-[400px] w-[400px] ml-auto">
+        <div className="sticky top-0 z-10 bg-white dark:bg-gray-950 p-2">
+          <DropdownMenuLabel className="px-2 pb-2">Icons</DropdownMenuLabel>
+          <Input
+            disabled={allDisabled}
+            placeholder="Search icons..."
+            onChange={(e) => debouncedSearch(e.target.value)}
+            onClick={(e) => e.stopPropagation()}
+            className="mb-2"
+          />
+          <DropdownMenuSeparator />
+        </div>
+        <div className="overflow-y-auto max-h-[420px]" onScroll={handleScroll}>
+          {startIndex > 0 && (
+            <div className="py-2 text-center text-sm text-gray-500">
+              Scroll up for previous icons
+            </div>
+          )}
+          {uniq(filteredIcons)
+            .slice(startIndex, startIndex + WINDOW_SIZE)
+            ?.map((iconItem) => (
+              <DropdownMenuItem
+                key={iconItem.value}
+                onClick={() => {
+                  setSelectedIcon(iconItem.value as KeyofIcons);
+                }}
+                className="flex flex-row items-center gap-2 justify-start w-full"
+                disabled={allDisabled}
+              >
+                <span style={{ color: iconColor }}>
+                  {React.createElement(
+                    Icons[iconItem.value as KeyofIcons] as React.ElementType
+                  )}
+                </span>
+                {iconItem.label}
+              </DropdownMenuItem>
+            ))}
+          {startIndex + WINDOW_SIZE < filteredIcons.length && (
+            <div className="py-2 text-center text-sm text-gray-500">
+              Scroll down for more icons
+            </div>
+          )}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/assistant-select/index.tsx b/src/components/assistant-select/index.tsx
new file mode 100644
index 00000000..469c05c2
--- /dev/null
+++ b/src/components/assistant-select/index.tsx
@@ -0,0 +1,202 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useState } from "react";
+import * as Icons from "lucide-react";
+import React from "react";
+import { TighterText } from "../ui/header";
+import { TooltipIconButton } from "../ui/assistant-ui/tooltip-icon-button";
+import { useGraphContext } from "@/contexts/GraphContext";
+import { CreateEditAssistantDialog } from "./create-edit-assistant-dialog";
+import { getIcon } from "./utils";
+import { AssistantItem } from "./assistant-item";
+import { Assistant } from "@langchain/langgraph-sdk";
+import { useToast } from "@/hooks/use-toast";
+import { AlertNewAssistantsFeature } from "./alert-new-feature";
+import { OC_HAS_SEEN_CUSTOM_ASSISTANTS_ALERT } from "@/constants";
+
+interface AssistantSelectProps {
+  userId: string | undefined;
+  chatStarted: boolean;
+}
+
+function AssistantSelectComponent(props: AssistantSelectProps) {
+  const { toast } = useToast();
+  const [open, setOpen] = useState(false);
+  const [createEditDialogOpen, setCreateEditDialogOpen] = useState(false);
+  const [editingAssistant, setEditingAssistant] = useState<
+    Assistant | undefined
+  >();
+  const [allDisabled, setAllDisabled] = useState(false);
+  const [showAlert, setShowAlert] = useState(false);
+
+  const {
+    assistantsData: {
+      assistants,
+      selectedAssistant,
+      isLoadingAllAssistants,
+      setSelectedAssistant,
+      createCustomAssistant,
+      editCustomAssistant,
+      deleteAssistant,
+    },
+  } = useGraphContext();
+
+  const handleNewAssistantClick = (event: Event) => {
+    event.preventDefault();
+    setCreateEditDialogOpen(true);
+  };
+
+  const handleDeleteAssistant = async (assistantId: string) => {
+    setAllDisabled(true);
+    const res = await deleteAssistant(assistantId);
+    if (res) {
+      toast({
+        title: "Assistant deleted",
+        duration: 5000,
+      });
+    }
+    setAllDisabled(false);
+    return res;
+  };
+
+  const handleHideNewFeatureAlert = () => {
+    if (showAlert) {
+      setShowAlert(false);
+      localStorage.setItem(OC_HAS_SEEN_CUSTOM_ASSISTANTS_ALERT, "true");
+    }
+  };
+
+  const metadata = selectedAssistant?.metadata as Record<string, any>;
+
+  return (
+    <>
+      <div className="relative">
+        <DropdownMenu
+          open={open}
+          onOpenChange={(c) => {
+            if (!c) {
+              setEditingAssistant(undefined);
+              setCreateEditDialogOpen(false);
+            }
+            setOpen(c);
+          }}
+        >
+          <DropdownMenuTrigger className="text-gray-600" asChild>
+            <TooltipIconButton
+              tooltip="Change assistant"
+              variant="ghost"
+              delayDuration={200}
+              className="w-8 h-8 transition-colors ease-in-out duration-200"
+              style={{ color: metadata?.iconData?.iconColor || "#4b5563" }}
+            >
+              {getIcon(metadata?.iconData?.iconName as string | undefined)}
+            </TooltipIconButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="max-h-[600px] max-w-[300px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 ml-4">
+            <DropdownMenuLabel>
+              <TighterText>My Assistants</TighterText>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {isLoadingAllAssistants && !assistants?.length ? (
+              <span className="text-sm text-gray-600 flex items-center justify-start gap-1 p-2">
+                Loading
+                <Icons.LoaderCircle className="w-4 h-4 animate-spin" />
+              </span>
+            ) : (
+              <>
+                <DropdownMenuItem
+                  onSelect={(e) => {
+                    handleNewAssistantClick(e);
+                    handleHideNewFeatureAlert();
+                  }}
+                  className="flex items-center justify-start gap-2"
+                  disabled={allDisabled}
+                >
+                  <Icons.CirclePlus className="w-4 h-4" />
+                  <TighterText className="font-medium">New</TighterText>
+                </DropdownMenuItem>
+                {assistants.map((assistant) => (
+                  <AssistantItem
+                    setAllDisabled={setAllDisabled}
+                    allDisabled={allDisabled}
+                    key={assistant.assistant_id}
+                    assistant={assistant}
+                    setEditModalOpen={setCreateEditDialogOpen}
+                    setAssistantDropdownOpen={setOpen}
+                    setEditingAssistant={setEditingAssistant}
+                    deleteAssistant={handleDeleteAssistant}
+                    selectedAssistantId={selectedAssistant?.assistant_id}
+                    onClick={() => {
+                      if (
+                        selectedAssistant?.assistant_id ===
+                        assistant.assistant_id
+                      ) {
+                        setOpen(false);
+                        return;
+                      }
+                      setSelectedAssistant(assistant);
+                      handleHideNewFeatureAlert();
+                    }}
+                  />
+                ))}
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <div className="absolute left-1/2 -translate-x-1/2 mt-6 w-[500px]">
+          <AlertNewAssistantsFeature
+            showAlert={showAlert}
+            setShowAlert={setShowAlert}
+            shouldRender={!props.chatStarted}
+          />
+        </div>
+      </div>
+
+      <CreateEditAssistantDialog
+        allDisabled={allDisabled}
+        setAllDisabled={setAllDisabled}
+        open={createEditDialogOpen}
+        setOpen={(c) => {
+          if (!c) {
+            setEditingAssistant(undefined);
+          }
+          setCreateEditDialogOpen(c);
+        }}
+        userId={props.userId}
+        isEditing={!!editingAssistant}
+        assistant={editingAssistant}
+        createCustomAssistant={async (
+          newAssistant,
+          userId,
+          successCallback
+        ) => {
+          const res = await createCustomAssistant(
+            newAssistant,
+            userId,
+            successCallback
+          );
+          setOpen(false);
+          return res;
+        }}
+        editCustomAssistant={async (editedAssistant, assistantId, userId) => {
+          const res = await editCustomAssistant(
+            editedAssistant,
+            assistantId,
+            userId
+          );
+          setOpen(false);
+          return res;
+        }}
+        isLoading={isLoadingAllAssistants}
+      />
+    </>
+  );
+}
+
+export const AssistantSelect = React.memo(AssistantSelectComponent);
diff --git a/src/components/assistant-select/utils.tsx b/src/components/assistant-select/utils.tsx
new file mode 100644
index 00000000..3320c7ae
--- /dev/null
+++ b/src/components/assistant-select/utils.tsx
@@ -0,0 +1,11 @@
+import * as Icons from "lucide-react";
+import React from "react";
+
+export const getIcon = (iconName?: string) => {
+  if (iconName && Icons[iconName as keyof typeof Icons]) {
+    return React.createElement(
+      Icons[iconName as keyof typeof Icons] as React.ElementType
+    );
+  }
+  return React.createElement(Icons.User);
+};
diff --git a/src/components/canvas/content-composer.tsx b/src/components/canvas/content-composer.tsx
index 785f8b9e..a79c8aa1 100644
--- a/src/components/canvas/content-composer.tsx
+++ b/src/components/canvas/content-composer.tsx
@@ -94,6 +94,7 @@ export function ContentComposerChatInterfaceComponent(
     <div className="h-full">
       <AssistantRuntimeProvider runtime={runtime}>
         <Thread
+          userId={userData?.user?.id}
           setChatStarted={props.setChatStarted}
           handleQuickStart={props.handleQuickStart}
           hasChatStarted={props.hasChatStarted}
diff --git a/src/components/chat-interface/composer.tsx b/src/components/chat-interface/composer.tsx
index e605918b..c8c74570 100644
--- a/src/components/chat-interface/composer.tsx
+++ b/src/components/chat-interface/composer.tsx
@@ -5,6 +5,7 @@ import { type FC } from "react";
 
 import { TooltipIconButton } from "@/components/ui/assistant-ui/tooltip-icon-button";
 import { SendHorizontalIcon } from "lucide-react";
+import { AssistantSelect } from "../assistant-select";
 
 const CircleStopIcon = () => {
   return (
@@ -20,9 +21,15 @@ const CircleStopIcon = () => {
   );
 };
 
-export const Composer: FC = () => {
+interface ComposerProps {
+  chatStarted: boolean;
+  userId: string | undefined;
+}
+
+export const Composer: FC<ComposerProps> = (props: ComposerProps) => {
   return (
     <ComposerPrimitive.Root className="focus-within:border-aui-ring/20 flex w-full min-h-[64px] flex-wrap items-center rounded-lg border px-2.5 shadow-sm transition-colors ease-in bg-white">
+      <AssistantSelect userId={props.userId} chatStarted={props.chatStarted} />
       <ComposerPrimitive.Input
         autoFocus
         placeholder="Write a message..."
diff --git a/src/components/chat-interface/model-selector.tsx b/src/components/chat-interface/model-selector.tsx
deleted file mode 100644
index 4912977c..00000000
--- a/src/components/chat-interface/model-selector.tsx
+++ /dev/null
@@ -1,430 +0,0 @@
-"use client";
-
-import LLMIcon from "@/components/icons/svg/LLMIcon.svg";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import {
-  Command,
-  CommandGroup,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  ALL_MODEL_NAMES,
-  ANTHROPIC_MODELS,
-  FIREWORKS_MODELS,
-  GEMINI_MODELS,
-  LS_HAS_SEEN_MODEL_DROPDOWN_ALERT,
-  OPENAI_MODELS,
-} from "@/constants";
-import { CustomModelConfig, ModelConfigurationParams } from "@/types";
-
-import { cn } from "@/lib/utils";
-import { CaretSortIcon, GearIcon } from "@radix-ui/react-icons";
-import { AnimatePresence, motion } from "framer-motion";
-import { Check, ExternalLink, X } from "lucide-react";
-import NextImage from "next/image";
-import {
-  Dispatch,
-  SetStateAction,
-  useCallback,
-  useEffect,
-  useState,
-} from "react";
-import { TooltipIconButton } from "../ui/assistant-ui/tooltip-icon-button";
-import { TighterText } from "../ui/header";
-import { Slider } from "../ui/slider";
-
-const allModels = [
-  ...ANTHROPIC_MODELS,
-  ...OPENAI_MODELS,
-  ...FIREWORKS_MODELS,
-  ...GEMINI_MODELS,
-];
-
-const modelLabelMap = new Map(
-  allModels.map((model) => [model.name, model.label])
-);
-
-const modelNameToLabel = (modelName: ALL_MODEL_NAMES) => {
-  return modelLabelMap.get(modelName) ?? modelName;
-};
-
-const AlertNewModelSelectorFeature = ({
-  chatStarted,
-  showAlert,
-  setShowAlert,
-}: {
-  chatStarted: boolean;
-  showAlert: boolean;
-  setShowAlert: Dispatch<SetStateAction<boolean>>;
-}) => {
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-
-    const hasSeenAlert = localStorage.getItem(LS_HAS_SEEN_MODEL_DROPDOWN_ALERT);
-    if (!hasSeenAlert) {
-      setShowAlert(true);
-    }
-  }, []);
-
-  const handleCloseAlert = () => {
-    setShowAlert(false);
-    // Wait for animation to complete before setting localStorage
-    setTimeout(() => {
-      localStorage.setItem(LS_HAS_SEEN_MODEL_DROPDOWN_ALERT, "true");
-    }, 300);
-  };
-
-  if (!showAlert && !chatStarted) {
-    return <AnimatePresence />; // Keep AnimatePresence mounted to enable fading out
-  }
-
-  return (
-    <AnimatePresence mode="wait">
-      {showAlert && (
-        <motion.div
-          initial={{ opacity: 0, y: -20 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -20 }}
-          transition={{ duration: 0.2 }}
-        >
-          <div className="relative p-[0px] rounded-lg bg-gradient-to-r from-pink-500/50 via-purple-500/50 to-pink-500/50 animate-gradient-xy shadow-[0_0_25px_rgba(236,72,153,0.3)] before:absolute before:inset-0 before:rounded-lg before:p-[12px] before:bg-gradient-to-r before:from-pink-500/20 before:via-purple-500/20 before:to-pink-500/20 before:blur-xl before:-z-10 before:animate-gradient-xy-enhanced">
-            <Alert className="max-w-xl bg-white rounded-lg hover:bg-gray-50 transition-colors duration-300 ease-in-out">
-              <AlertTitle className="flex justify-between items-center">
-                <div className="flex items-center justify-start gap-1">
-                  <NextImage
-                    alt="Model icon"
-                    src={LLMIcon}
-                    width={16}
-                    height={16}
-                  />
-                  <TighterText>Customize your LLM model!</TighterText>
-                </div>
-                <TooltipIconButton
-                  tooltip="Close alert"
-                  variant="ghost"
-                  delayDuration={400}
-                  onClick={handleCloseAlert}
-                  size="sm"
-                >
-                  <X className="w-4 h-4 text-gray-600" />
-                </TooltipIconButton>
-              </AlertTitle>
-              <AlertDescription className="inline-flex items-center gap-1 flex-wrap mt-2">
-                <p>
-                  Open Canvas now supports customizing your LLM model! Click the
-                  dropdown above to pick a model from{" "}
-                  <a
-                    href="https://fireworks.ai/"
-                    target="_blank"
-                    className="inline-flex items-baseline gap-[2px]"
-                  >
-                    <ExternalLink size={12} />
-                    Fireworks AI
-                  </a>
-                  ,{" "}
-                  <a
-                    href="https://anthropic.com/"
-                    target="_blank"
-                    className="inline-flex items-baseline gap-[2px]"
-                  >
-                    <ExternalLink size={12} />
-                    Anthropic
-                  </a>
-                  , or{" "}
-                  <a
-                    href="https://openai.com/"
-                    target="_blank"
-                    className="inline-flex items-baseline gap-[2px]"
-                  >
-                    <ExternalLink size={12} />
-                    OpenAI
-                  </a>
-                  .
-                </p>
-              </AlertDescription>
-            </Alert>
-          </div>
-        </motion.div>
-      )}
-    </AnimatePresence>
-  );
-};
-
-interface ModelSettingsProps {
-  model: ModelConfigurationParams;
-  className?: string;
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-  onClick: (e: any) => any;
-  modelConfig: CustomModelConfig;
-  setModelConfig: (
-    config: CustomModelConfig | ((prev: CustomModelConfig) => CustomModelConfig)
-  ) => void;
-}
-
-const ModelSettings = ({
-  model,
-  className,
-  isOpen,
-  onOpenChange,
-  onClick,
-  modelConfig,
-  setModelConfig,
-}: ModelSettingsProps) => {
-  const handleTemperatureChange = useCallback(
-    (value: number[]) => {
-      setModelConfig((prev) => ({
-        ...prev,
-        temperatureRange: {
-          ...prev.temperatureRange,
-          current: value[0],
-        },
-      }));
-    },
-    [setModelConfig]
-  );
-
-  const handleMaxTokensChange = useCallback(
-    (value: number[]) => {
-      setModelConfig((prev) => ({
-        ...prev,
-        maxTokens: {
-          ...prev.maxTokens,
-          current: value[0],
-        },
-      }));
-    },
-    [setModelConfig]
-  );
-
-  return (
-    <Popover open={isOpen} onOpenChange={onOpenChange}>
-      <PopoverTrigger onClick={onClick} asChild>
-        <button className="flex-shrink-0 size-6">
-          <GearIcon className="size-4" />
-        </button>
-      </PopoverTrigger>
-      <PopoverContent
-        side="right"
-        align="start"
-        className={cn("w-80 p-6 rounded-xl shadow-lg", className)}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="grid gap-4">
-          <SettingSection
-            title="Temperature"
-            description="Controls creativity - lower for focused outputs, higher for more variety and imagination."
-            value={modelConfig.temperatureRange.current}
-            min={model.config.temperatureRange.min}
-            max={model.config.temperatureRange.max}
-            step={0.1}
-            onChange={handleTemperatureChange}
-          />
-          <SettingSection
-            title="Max Tokens"
-            description="Set how long the AI's response can be - more tokens mean longer, more detailed responses."
-            value={modelConfig.maxTokens.current}
-            min={model.config.maxTokens.min}
-            max={model.config.maxTokens.max}
-            step={1}
-            onChange={handleMaxTokensChange}
-          />
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-};
-interface SettingSectionProps {
-  title: string;
-  description: string;
-  value: number;
-  min: number;
-  max: number;
-  step: number;
-  onChange: (value: number[]) => void;
-}
-
-const SettingSection = ({
-  title,
-  description,
-  value,
-  min,
-  max,
-  step,
-  onChange,
-}: SettingSectionProps) => (
-  <div className="space-y-2">
-    <h4 className="font-medium leading-none">{title}</h4>
-    <p className="text-sm text-muted-foreground">{description}</p>
-    <Slider
-      min={min}
-      max={max}
-      step={step}
-      value={[value]}
-      onValueChange={onChange}
-    />
-    <div className="text-right text-sm">{value}</div>
-  </div>
-);
-
-interface SelectSelectorProps {
-  modelName: ALL_MODEL_NAMES;
-  setModelName: (name: ALL_MODEL_NAMES) => void;
-  chatStarted: boolean;
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  modelConfig: CustomModelConfig;
-  setModelConfig: (
-    config: CustomModelConfig | ((prev: CustomModelConfig) => CustomModelConfig)
-  ) => void;
-}
-
-export function SelectSelector(props: SelectSelectorProps) {
-  const { modelName, setModelName, modelConfig, setModelConfig, setOpen } =
-    props;
-  const [activeSettings, setActiveSettings] = useState<string | null>(null);
-
-  const handleModelChange = useCallback(
-    async (newModel: ALL_MODEL_NAMES) => {
-      setModelName(newModel);
-
-      const selectedModel = allModels.find((model) => model.name === newModel);
-      if (selectedModel) {
-        setModelConfig(selectedModel.config);
-      }
-      setOpen(false);
-    },
-    [setModelName, setOpen, setModelConfig]
-  );
-
-  const allAllowedModels = allModels.filter((model) => {
-    if (
-      model.name.includes("fireworks/") &&
-      process.env.NEXT_PUBLIC_FIREWORKS_ENABLED === "false"
-    ) {
-      return false;
-    }
-    if (
-      model.name.includes("claude-") &&
-      process.env.NEXT_PUBLIC_ANTHROPIC_ENABLED === "false"
-    ) {
-      return false;
-    }
-    if (
-      model.name.includes("gpt-") &&
-      process.env.NEXT_PUBLIC_OPENAI_ENABLED === "false"
-    ) {
-      return false;
-    }
-    if (
-      model.name.includes("gemini-") &&
-      process.env.NEXT_PUBLIC_GEMINI_ENABLED === "false"
-    ) {
-      return false;
-    }
-
-    // By default, return true if the environment variable is not set or is set to true
-    return true;
-  });
-
-  return (
-    <Command>
-      <CommandList>
-        {allAllowedModels.map((model) => (
-          <CommandGroup key={model.name} className="w-full">
-            <CommandItem
-              value={model.name}
-              onSelect={handleModelChange}
-              className="flex items-center"
-            >
-              <Check
-                className={cn(
-                  "mr-1 size-4",
-                  modelName === model.name ? "opacity-100" : "opacity-0"
-                )}
-              />
-              <span className="flex-1">{model.label}</span>
-              <ModelSettings
-                className="ml-auto"
-                model={model}
-                isOpen={activeSettings === model.name}
-                onOpenChange={(open) => {
-                  setActiveSettings(open ? model.name : null);
-                }}
-                onClick={(e) => e.stopPropagation()} // Prevent onSelect from being triggered
-                modelConfig={modelConfig}
-                setModelConfig={setModelConfig}
-              />
-            </CommandItem>
-          </CommandGroup>
-        ))}
-      </CommandList>
-    </Command>
-  );
-}
-
-interface ModelSelectorProps {
-  modelName: ALL_MODEL_NAMES;
-  setModelName: (name: ALL_MODEL_NAMES) => void;
-  chatStarted: boolean;
-  modelConfig: CustomModelConfig;
-  setModelConfig: (
-    config: CustomModelConfig | ((prev: CustomModelConfig) => CustomModelConfig)
-  ) => void;
-}
-
-export default function ModelSelector(props: ModelSelectorProps) {
-  const [showAlert, setShowAlert] = useState(false);
-  const [open, setOpen] = useState(false);
-
-  console.log("ModelSelector modelConfig: ", props.modelConfig);
-
-  return (
-    <div className="relative">
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger
-          className="min-w-[180px] w-[210px] bg-transparent shadow-none focus:outline-none cursor-pointer hover:bg-gray-100 rounded transition-colors border-none text-gray-600 h-9 px-3 py-2 text-sm focus:ring-1 focus:ring-ring"
-          asChild
-        >
-          <div className="flex items-center pr-2 truncate">
-            <NextImage
-              alt="Model icon"
-              src={LLMIcon}
-              width={14}
-              height={14}
-              className="mr-2"
-            />
-            <span className="truncate">
-              {modelNameToLabel(props.modelName)}
-            </span>
-            <CaretSortIcon className="size-4 opacity-50 ml-auto" />
-          </div>
-        </PopoverTrigger>
-        <PopoverContent className="min-w-[180px] w-[240px] p-0">
-          <SelectSelector
-            chatStarted={props.chatStarted}
-            modelName={props.modelName}
-            setModelName={props.setModelName}
-            open={open}
-            setOpen={setOpen}
-            modelConfig={props.modelConfig}
-            setModelConfig={props.setModelConfig}
-          />
-        </PopoverContent>
-      </Popover>
-      <div className="absolute top-full -left-10 pt-2 w-max min-w-full">
-        <AlertNewModelSelectorFeature
-          showAlert={showAlert}
-          setShowAlert={setShowAlert}
-          chatStarted={props.chatStarted}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/chat-interface/model-selector/alert-new-model-selector.tsx b/src/components/chat-interface/model-selector/alert-new-model-selector.tsx
new file mode 100644
index 00000000..ebc8471e
--- /dev/null
+++ b/src/components/chat-interface/model-selector/alert-new-model-selector.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import LLMIcon from "@/components/icons/svg/LLMIcon.svg";
+import NextImage from "next/image";
+import { LS_HAS_SEEN_MODEL_DROPDOWN_ALERT } from "@/constants";
+import { Dispatch, SetStateAction, useEffect } from "react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { ExternalLink, X } from "lucide-react";
+import { TighterText } from "@/components/ui/header";
+import { TooltipIconButton } from "@/components/ui/assistant-ui/tooltip-icon-button";
+
+export const AlertNewModelSelectorFeature = ({
+  chatStarted,
+  showAlert,
+  setShowAlert,
+}: {
+  chatStarted: boolean;
+  showAlert: boolean;
+  setShowAlert: Dispatch<SetStateAction<boolean>>;
+}) => {
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const hasSeenAlert = localStorage.getItem(LS_HAS_SEEN_MODEL_DROPDOWN_ALERT);
+    if (!hasSeenAlert) {
+      setShowAlert(true);
+    }
+  }, []);
+
+  const handleCloseAlert = () => {
+    setShowAlert(false);
+    // Wait for animation to complete before setting localStorage
+    setTimeout(() => {
+      localStorage.setItem(LS_HAS_SEEN_MODEL_DROPDOWN_ALERT, "true");
+    }, 300);
+  };
+
+  if (!showAlert || chatStarted) {
+    return <AnimatePresence />; // Keep AnimatePresence mounted to enable fading out
+  }
+
+  return (
+    <AnimatePresence mode="wait">
+      {showAlert && (
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -20 }}
+          transition={{ duration: 0.2 }}
+        >
+          <div className="relative p-[0px] rounded-lg bg-gradient-to-r from-pink-500/50 via-purple-500/50 to-pink-500/50 animate-gradient-xy shadow-[0_0_25px_rgba(236,72,153,0.3)] before:absolute before:inset-0 before:rounded-lg before:p-[12px] before:bg-gradient-to-r before:from-pink-500/20 before:via-purple-500/20 before:to-pink-500/20 before:blur-xl before:-z-10 before:animate-gradient-xy-enhanced">
+            <Alert className="max-w-xl bg-white rounded-lg hover:bg-gray-50 transition-colors duration-300 ease-in-out">
+              <AlertTitle className="flex justify-between items-center">
+                <div className="flex items-center justify-start gap-1">
+                  <NextImage
+                    alt="Model icon"
+                    src={LLMIcon}
+                    width={16}
+                    height={16}
+                  />
+                  <TighterText>Customize your LLM model!</TighterText>
+                </div>
+                <TooltipIconButton
+                  tooltip="Close alert"
+                  variant="ghost"
+                  delayDuration={400}
+                  onClick={handleCloseAlert}
+                  size="sm"
+                >
+                  <X className="w-4 h-4 text-gray-600" />
+                </TooltipIconButton>
+              </AlertTitle>
+              <AlertDescription className="inline-flex items-center gap-1 flex-wrap mt-2">
+                <p>
+                  Open Canvas now supports customizing your LLM model! Click the
+                  dropdown above to pick a model from{" "}
+                  <a
+                    href="https://fireworks.ai/"
+                    target="_blank"
+                    className="inline-flex items-baseline gap-[2px]"
+                  >
+                    <ExternalLink size={12} />
+                    Fireworks AI
+                  </a>
+                  ,{" "}
+                  <a
+                    href="https://anthropic.com/"
+                    target="_blank"
+                    className="inline-flex items-baseline gap-[2px]"
+                  >
+                    <ExternalLink size={12} />
+                    Anthropic
+                  </a>
+                  , or{" "}
+                  <a
+                    href="https://openai.com/"
+                    target="_blank"
+                    className="inline-flex items-baseline gap-[2px]"
+                  >
+                    <ExternalLink size={12} />
+                    OpenAI
+                  </a>
+                  .
+                </p>
+              </AlertDescription>
+            </Alert>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
\ No newline at end of file
diff --git a/src/components/chat-interface/model-selector/constants.ts b/src/components/chat-interface/model-selector/constants.ts
new file mode 100644
index 00000000..ed37f626
--- /dev/null
+++ b/src/components/chat-interface/model-selector/constants.ts
@@ -0,0 +1,8 @@
+import { ANTHROPIC_MODELS, OPENAI_MODELS, FIREWORKS_MODELS, GEMINI_MODELS } from "@/constants";
+
+export const ALL_MODELS = [
+  ...ANTHROPIC_MODELS,
+  ...OPENAI_MODELS,
+  ...FIREWORKS_MODELS,
+  ...GEMINI_MODELS,
+];
\ No newline at end of file
diff --git a/src/components/chat-interface/model-selector/index.tsx b/src/components/chat-interface/model-selector/index.tsx
new file mode 100644
index 00000000..1fd98fa6
--- /dev/null
+++ b/src/components/chat-interface/model-selector/index.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import LLMIcon from "@/components/icons/svg/LLMIcon.svg";
+import NextImage from "next/image";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  ALL_MODEL_NAMES,
+  ANTHROPIC_MODELS,
+  OPENAI_MODELS,
+  FIREWORKS_MODELS,
+  GEMINI_MODELS,
+  LS_HAS_SEEN_MODEL_DROPDOWN_ALERT,
+} from "@/constants";
+import { Dispatch, SetStateAction, useState } from "react";
+import { AlertNewModelSelectorFeature } from "./alert-new-model-selector";
+import { IsNewBadge } from "./new-badge";
+import { CustomModelConfig } from "@/types";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { CaretSortIcon } from "@radix-ui/react-icons";
+import { SelectSelector } from "./select-selector";
+
+const allModels = [
+  ...ANTHROPIC_MODELS,
+  ...OPENAI_MODELS,
+  ...FIREWORKS_MODELS,
+  ...GEMINI_MODELS,
+];
+
+const modelNameToLabel = (modelName: ALL_MODEL_NAMES) => {
+  const model = allModels.find((m) => m.name === modelName);
+  return model?.label ?? modelName;
+};
+
+interface ModelSelectorProps {
+  modelName: ALL_MODEL_NAMES;
+  setModelName: (name: ALL_MODEL_NAMES) => void;
+  chatStarted: boolean;
+  modelConfig: CustomModelConfig;
+  setModelConfig: (
+    config: CustomModelConfig | ((prev: CustomModelConfig) => CustomModelConfig)
+  ) => void;
+}
+
+export default function ModelSelector(props: ModelSelectorProps) {
+  const [showAlert, setShowAlert] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  const isSelectedModelNew = !!allModels.find(
+    (model) => model.name === props.modelName && model.isNew
+  );
+
+  return (
+    <div className="relative">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger
+          className="min-w-[180px] w-[210px] bg-transparent shadow-none focus:outline-none cursor-pointer hover:bg-gray-100 rounded transition-colors border-none text-gray-600 h-9 px-3 py-2 text-sm focus:ring-1 focus:ring-ring"
+          asChild
+        >
+          <div className="flex items-center pr-2 truncate">
+            <NextImage
+              alt="Model icon"
+              src={LLMIcon}
+              width={14}
+              height={14}
+              className="mr-2"
+            />
+            <span className="flex flex-row items-center justify-start gap-2">
+                {modelNameToLabel(props.modelName)}
+                {isSelectedModelNew && <IsNewBadge />}
+              </span>
+            <CaretSortIcon className="size-4 opacity-50 ml-auto" />
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className="min-w-[180px] w-[240px] p-0">
+          <SelectSelector
+            chatStarted={props.chatStarted}
+            modelName={props.modelName}
+            setModelName={props.setModelName}
+            open={open}
+            setOpen={setOpen}
+            modelConfig={props.modelConfig}
+            setModelConfig={props.setModelConfig}
+          />
+        </PopoverContent>
+      </Popover>
+      <div className="absolute top-full -left-10 pt-2 w-max min-w-full">
+        <AlertNewModelSelectorFeature
+          showAlert={showAlert}
+          setShowAlert={setShowAlert}
+          chatStarted={props.chatStarted}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/chat-interface/model-selector/model-settings.tsx b/src/components/chat-interface/model-selector/model-settings.tsx
new file mode 100644
index 00000000..e011df5f
--- /dev/null
+++ b/src/components/chat-interface/model-selector/model-settings.tsx
@@ -0,0 +1,131 @@
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { CustomModelConfig, ModelConfigurationParams } from "@/types";
+
+import { cn } from "@/lib/utils";
+import { GearIcon } from "@radix-ui/react-icons";
+import {
+  useCallback,
+} from "react";
+import { Slider } from "@/components/ui/slider";
+
+interface SettingSectionProps {
+  title: string;
+  description: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  onChange: (value: number[]) => void;
+}
+
+const SettingSection = ({
+  title,
+  description,
+  value,
+  min,
+  max,
+  step,
+  onChange,
+}: SettingSectionProps) => (
+  <div className="space-y-2">
+    <h4 className="font-medium leading-none">{title}</h4>
+    <p className="text-sm text-muted-foreground">{description}</p>
+    <Slider
+      min={min}
+      max={max}
+      step={step}
+      value={[value]}
+      onValueChange={onChange}
+    />
+    <div className="text-right text-sm">{value}</div>
+  </div>
+);
+
+interface ModelSettingsProps {
+  model: ModelConfigurationParams;
+  className?: string;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onClick: (e: any) => any;
+  modelConfig: CustomModelConfig;
+  setModelConfig: (
+    config: CustomModelConfig | ((prev: CustomModelConfig) => CustomModelConfig)
+  ) => void;
+}
+
+export function ModelSettings({
+  model,
+  className,
+  isOpen,
+  onOpenChange,
+  onClick,
+  modelConfig,
+  setModelConfig,
+}: ModelSettingsProps) {
+  const handleTemperatureChange = useCallback(
+    (value: number[]) => {
+      setModelConfig((prev) => ({
+        ...prev,
+        temperatureRange: {
+          ...prev.temperatureRange,
+          current: value[0],
+        },
+      }));
+    },
+    [setModelConfig]
+  );
+
+  const handleMaxTokensChange = useCallback(
+    (value: number[]) => {
+      setModelConfig((prev) => ({
+        ...prev,
+        maxTokens: {
+          ...prev.maxTokens,
+          current: value[0],
+        },
+      }));
+    },
+    [setModelConfig]
+  );
+
+  return (
+    <Popover open={isOpen} onOpenChange={onOpenChange}>
+      <PopoverTrigger onClick={onClick} asChild>
+        <button className="flex-shrink-0 size-6">
+          <GearIcon className="size-4" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        side="right"
+        align="start"
+        className={cn("w-80 p-6 rounded-xl shadow-lg", className)}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="grid gap-4">
+          <SettingSection
+            title="Temperature"
+            description="Controls creativity - lower for focused outputs, higher for more variety and imagination."
+            value={modelConfig.temperatureRange.current}
+            min={model.config.temperatureRange.min}
+            max={model.config.temperatureRange.max}
+            step={0.1}
+            onChange={handleTemperatureChange}
+          />
+          <SettingSection
+            title="Max Tokens"
+            description="Set how long the AI's response can be - more tokens mean longer, more detailed responses."
+            value={modelConfig.maxTokens.current}
+            min={model.config.maxTokens.min}
+            max={model.config.maxTokens.max}
+            step={1}
+            onChange={handleMaxTokensChange}
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
\ No newline at end of file
diff --git a/src/components/chat-interface/model-selector/new-badge.tsx b/src/components/chat-interface/model-selector/new-badge.tsx
new file mode 100644
index 00000000..85339711
--- /dev/null
+++ b/src/components/chat-interface/model-selector/new-badge.tsx
@@ -0,0 +1,30 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+export function IsNewBadge() {
+  return (
+    <div
+      className={cn(
+        "before:absolute relative p-[1px] before:p-[4px] rounded-md before:rounded-md before:shadow-[0_0_4px_rgba(236,72,153,0.2)] w-[58px]",
+        "animate-gradient-xy before:animate-gradient-xy-enhanced",
+        "before:inset-0 before:blur-sm before:-z-10 ",
+        "from-pink-500/50 before:from-pink-500/20",
+        "bg-gradient-to-r before:bg-gradient-to-r  ",
+        "via-purple-500/50 before:via-purple-500/20",
+        "to-pink-500/50 before:to-pink-500/20"
+      )}
+    >
+      <Badge
+        className={cn(
+          "bg-gradient-to-r from-pink-50 via-purple-50 to-pink-50",
+          "animate-gradient-x",
+          "rounded-md transition-colors duration-300 ease-in-out",
+          "text-gray-700 text-xs w-14",
+          "hover:from-pink-100 hover:via-purple-100 hover:to-pink-100"
+        )}
+      >
+        New!
+      </Badge>
+    </div>
+  );
+}
diff --git a/src/components/chat-interface/model-selector/select-selector.tsx b/src/components/chat-interface/model-selector/select-selector.tsx
new file mode 100644
index 00000000..a6776f03
--- /dev/null
+++ b/src/components/chat-interface/model-selector/select-selector.tsx
@@ -0,0 +1,108 @@
+import { Command, CommandGroup, CommandItem, CommandList } from "@/components/ui/command";
+import { ModelSettings } from "./model-settings";
+import { Check } from "lucide-react";
+import { ALL_MODELS } from "./constants";
+import { useCallback, useState } from "react";
+import { ALL_MODEL_NAMES } from "@/constants";
+import { CustomModelConfig } from "@/types";
+import { cn } from "@/lib/utils";
+import { IsNewBadge } from "./new-badge";
+
+interface SelectSelectorProps {
+  modelName: ALL_MODEL_NAMES;
+  setModelName: (name: ALL_MODEL_NAMES) => void;
+  chatStarted: boolean;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  modelConfig: CustomModelConfig;
+  setModelConfig: (
+    config: CustomModelConfig | ((prev: CustomModelConfig) => CustomModelConfig)
+  ) => void;
+}
+
+export function SelectSelector(props: SelectSelectorProps) {
+  const { modelName, setModelName, modelConfig, setModelConfig, setOpen } =
+    props;
+  const [activeSettings, setActiveSettings] = useState<string | null>(null);
+
+  const handleModelChange = useCallback(
+    async (newModel: ALL_MODEL_NAMES) => {
+      setModelName(newModel);
+
+      const selectedModel = ALL_MODELS.find((model) => model.name === newModel);
+      if (selectedModel) {
+        setModelConfig(selectedModel.config);
+      }
+      setOpen(false);
+    },
+    [setModelName, setOpen, setModelConfig]
+  );
+
+  const allAllowedModels = ALL_MODELS.filter((model) => {
+    if (
+      model.name.includes("fireworks/") &&
+      process.env.NEXT_PUBLIC_FIREWORKS_ENABLED === "false"
+    ) {
+      return false;
+    }
+    if (
+      model.name.includes("claude-") &&
+      process.env.NEXT_PUBLIC_ANTHROPIC_ENABLED === "false"
+    ) {
+      return false;
+    }
+    if (
+      model.name.includes("gpt-") &&
+      process.env.NEXT_PUBLIC_OPENAI_ENABLED === "false"
+    ) {
+      return false;
+    }
+    if (
+      model.name.includes("gemini-") &&
+      process.env.NEXT_PUBLIC_GEMINI_ENABLED === "false"
+    ) {
+      return false;
+    }
+
+    // By default, return true if the environment variable is not set or is set to true
+    return true;
+  });
+
+  return (
+    <Command>
+      <CommandList>
+        {allAllowedModels.map((model) => (
+          <CommandGroup key={model.name} className="w-full">
+            <CommandItem
+              value={model.name}
+              onSelect={handleModelChange}
+              className="flex items-center"
+            >
+              <Check
+                className={cn(
+                  "mr-1 size-4",
+                  modelName === model.name ? "opacity-100" : "opacity-0"
+                )}
+              />
+              <span className="flex flex-row w-full items-center justify-start gap-2">
+                {model.label}
+                {model.isNew && <IsNewBadge />}
+              </span>
+              <ModelSettings
+                className="ml-auto"
+                model={model}
+                isOpen={activeSettings === model.name}
+                onOpenChange={(open) => {
+                  setActiveSettings(open ? model.name : null);
+                }}
+                onClick={(e) => e.stopPropagation()} // Prevent onSelect from being triggered
+                modelConfig={modelConfig}
+                setModelConfig={setModelConfig}
+              />
+            </CommandItem>
+          </CommandGroup>
+        ))}
+      </CommandList>
+    </Command>
+  );
+}
\ No newline at end of file
diff --git a/src/components/chat-interface/thread.tsx b/src/components/chat-interface/thread.tsx
index e7d9ef1b..50b2736c 100644
--- a/src/components/chat-interface/thread.tsx
+++ b/src/components/chat-interface/thread.tsx
@@ -30,6 +30,7 @@ const ThreadScrollToBottom: FC = () => {
 };
 
 export interface ThreadProps {
+  userId: string | undefined;
   hasChatStarted: boolean;
   handleQuickStart: (
     type: "text" | "code",
@@ -53,10 +54,10 @@ export const Thread: FC<ThreadProps> = (props: ThreadProps) => {
       createThread,
       modelName,
       setModelName,
-      assistantId,
       modelConfig,
       setModelConfig,
     },
+    assistantsData: { selectedAssistant },
     graphData: { clearState, runId, feedbackSubmitted, setFeedbackSubmitted },
   } = useGraphContext();
 
@@ -116,7 +117,7 @@ export const Thread: FC<ThreadProps> = (props: ThreadProps) => {
           </TooltipIconButton>
         ) : (
           <div className="flex flex-row gap-2 items-center">
-            <ReflectionsDialog assistantId={assistantId} />
+            <ReflectionsDialog selectedAssistant={selectedAssistant} />
           </div>
         )}
       </div>
@@ -124,7 +125,7 @@ export const Thread: FC<ThreadProps> = (props: ThreadProps) => {
         {!hasChatStarted && (
           <ThreadWelcome
             handleQuickStart={handleQuickStart}
-            composer={<Composer />}
+            composer={<Composer chatStarted={false} userId={props.userId} />}
           />
         )}
         <ThreadPrimitive.Messages
@@ -153,7 +154,7 @@ export const Thread: FC<ThreadProps> = (props: ThreadProps) => {
                 modelConfig={modelConfig}
                 setModelConfig={setModelConfig}
               />
-              <Composer />
+              <Composer chatStarted={true} userId={props.userId} />
             </div>
           )}
         </div>
diff --git a/src/components/reflections-dialog/ReflectionsDialog.tsx b/src/components/reflections-dialog/ReflectionsDialog.tsx
index 34c1a484..afadea76 100644
--- a/src/components/reflections-dialog/ReflectionsDialog.tsx
+++ b/src/components/reflections-dialog/ReflectionsDialog.tsx
@@ -14,18 +14,21 @@ import { TooltipIconButton } from "../ui/assistant-ui/tooltip-icon-button";
 import { TighterText } from "../ui/header";
 import { useStore } from "@/hooks/useStore";
 import { useToast } from "@/hooks/use-toast";
+import { Assistant } from "@langchain/langgraph-sdk";
+import { Badge } from "../ui/badge";
+import { getIcon } from "../assistant-select/utils";
 
 export interface NoReflectionsProps {
-  assistantId: string | undefined;
+  selectedAssistant: Assistant | undefined;
   getReflections: (assistantId: string) => Promise<void>;
 }
 
 function NoReflections(props: NoReflectionsProps) {
-  const { assistantId } = props;
+  const { selectedAssistant } = props;
   const { toast } = useToast();
 
   const getReflections = async () => {
-    if (!assistantId) {
+    if (!selectedAssistant) {
       toast({
         title: "Error",
         description: "Assistant ID not found.",
@@ -34,7 +37,7 @@ function NoReflections(props: NoReflectionsProps) {
       });
       return;
     }
-    await props.getReflections(assistantId);
+    await props.getReflections(selectedAssistant.assistant_id);
   };
 
   return (
@@ -52,13 +55,13 @@ function NoReflections(props: NoReflectionsProps) {
 }
 
 interface ReflectionsDialogProps {
-  assistantId: string | undefined;
+  selectedAssistant: Assistant | undefined;
 }
 
 export function ReflectionsDialog(props: ReflectionsDialogProps) {
   const { toast } = useToast();
   const [open, setOpen] = useState(false);
-  const { assistantId } = props;
+  const { selectedAssistant } = props;
   const {
     isLoadingReflections,
     reflections,
@@ -67,19 +70,19 @@ export function ReflectionsDialog(props: ReflectionsDialogProps) {
   } = useStore();
 
   useEffect(() => {
-    if (!assistantId || typeof window === "undefined") return;
+    if (!selectedAssistant || typeof window === "undefined") return;
     // Don't re-fetch reflections if they already exist & are for the same assistant
     if (
       (reflections?.content || reflections?.styleRules) &&
-      reflections.assistantId === assistantId
+      reflections.assistantId === selectedAssistant.assistant_id
     )
       return;
 
-    getReflections(assistantId);
-  }, [assistantId]);
+    getReflections(selectedAssistant.assistant_id);
+  }, [selectedAssistant]);
 
   const handleDelete = async () => {
-    if (!assistantId) {
+    if (!selectedAssistant) {
       toast({
         title: "Error",
         description: "Assistant ID not found.",
@@ -89,9 +92,12 @@ export function ReflectionsDialog(props: ReflectionsDialogProps) {
       return false;
     }
     setOpen(false);
-    return await deleteReflections(assistantId);
+    return await deleteReflections(selectedAssistant.assistant_id);
   };
 
+  const iconData = (selectedAssistant?.metadata as Record<string, any>)
+    ?.iconData;
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -106,8 +112,34 @@ export function ReflectionsDialog(props: ReflectionsDialogProps) {
       </DialogTrigger>
       <DialogContent className="max-w-xl p-8 bg-white rounded-lg shadow-xl">
         <DialogHeader>
-          <DialogTitle className="text-3xl font-light text-gray-800">
-            <TighterText>Reflections</TighterText>
+          <DialogTitle className="flex items-center justify-between">
+            <TighterText className="text-3xl font-light text-gray-800">
+              Reflections
+            </TighterText>
+            {selectedAssistant && (
+              <Badge
+                style={{
+                  ...(iconData
+                    ? {
+                        color: iconData.iconColor,
+                        backgroundColor: `${iconData.iconColor}20`, // 33 in hex is ~20% opacity
+                      }
+                    : {
+                        color: "#000000",
+                        backgroundColor: "#00000020",
+                      }),
+                }}
+                className="flex items-center justify-center gap-2 px-2 py-1"
+              >
+                <span className="flex items-center justify-start w-4 h-4">
+                  {getIcon(
+                    (selectedAssistant?.metadata as Record<string, any>)
+                      ?.iconData?.iconName
+                  )}
+                </span>
+                {selectedAssistant?.name}
+              </Badge>
+            )}
           </DialogTitle>
           <DialogDescription className="mt-2 text-md font-light text-gray-600">
             <TighterText>
@@ -117,7 +149,7 @@ export function ReflectionsDialog(props: ReflectionsDialogProps) {
                 "Current reflections generated by the assistant for content generation."
               ) : (
                 <NoReflections
-                  assistantId={assistantId}
+                  selectedAssistant={selectedAssistant}
                   getReflections={getReflections}
                 />
               )}
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 00000000..fd92f29c
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/src/components/ui/inline-context-tooltip.tsx b/src/components/ui/inline-context-tooltip.tsx
new file mode 100644
index 00000000..2e3fcc90
--- /dev/null
+++ b/src/components/ui/inline-context-tooltip.tsx
@@ -0,0 +1,31 @@
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { cn } from "@/lib/utils";
+import { CircleHelp } from "lucide-react";
+
+export function InlineContextTooltip({
+  cardContentClassName,
+  children,
+}: {
+  cardContentClassName?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <span className="inline-flex items-center ml-1">
+          <CircleHelp className="w-3 h-3 text-gray-600" />
+        </span>
+      </HoverCardTrigger>
+      <HoverCardContent
+        className={cn(cardContentClassName, "w-[300px] text-wrap")}
+      >
+        <p className="text-black font-medium">What&apos;s this?</p>
+        {children}
+      </HoverCardContent>
+    </HoverCard>
+  );
+}
diff --git a/src/constants.ts b/src/constants.ts
index b4ae1d4c..08f876d5 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,7 +1,7 @@
 import { CustomModelConfig, ModelConfigurationParams } from "./types";
 
 export const LANGGRAPH_API_URL =
-  process.env.LANGGRAPH_API_URL ?? "http://localhost:57318";
+  process.env.LANGGRAPH_API_URL ?? "http://localhost:53404";
 // v2 is tied to the 'open-canvas-prod' deployment.
 export const ASSISTANT_ID_COOKIE = "oc_assistant_id_v2";
 // export const ASSISTANT_ID_COOKIE = "oc_assistant_id";
@@ -10,6 +10,8 @@ export const THREAD_ID_COOKIE_NAME = "oc_thread_id_v2";
 export const HAS_EMPTY_THREADS_CLEARED_COOKIE = "has_empty_threads_cleared";
 export const LS_HAS_SEEN_MODEL_DROPDOWN_ALERT =
   "oc_has_seen_model_dropdown_alert";
+export const OC_HAS_SEEN_CUSTOM_ASSISTANTS_ALERT =
+  "oc_has_seen_custom_assistants_alert";
 export const DEFAULT_INPUTS = {
   highlightedCode: undefined,
   highlightedText: undefined,
@@ -44,13 +46,13 @@ export const OPENAI_MODELS: ModelConfigurationParams[] = [
         current: 16384,
       },
     },
+    isNew: false,
   },
 ];
-
 export const ANTHROPIC_MODELS: ModelConfigurationParams[] = [
   {
-    name: "claude-3-haiku-20240307",
-    label: "Claude 3 Haiku",
+    name: "claude-3-5-haiku-20241022",
+    label: "Claude 3.5 Haiku",
     config: {
       provider: "anthropic",
       temperatureRange: {
@@ -66,9 +68,29 @@ export const ANTHROPIC_MODELS: ModelConfigurationParams[] = [
         current: 4096,
       },
     },
+    isNew: true,
+  },
+  {
+    name: "claude-3-haiku-20240307",
+    label: "Claude 3 Haiku (old)",
+    config: {
+      provider: "anthropic",
+      temperatureRange: {
+        min: 0,
+        max: 1,
+        default: 0.5,
+        current: 0.5,
+      },
+      maxTokens: {
+        min: 1,
+        max: 8192,
+        default: 4096,
+        current: 4096,
+      },
+    },
+    isNew: false,
   },
 ];
-
 export const FIREWORKS_MODELS: ModelConfigurationParams[] = [
   {
     name: "accounts/fireworks/models/llama-v3p1-70b-instruct",
@@ -88,6 +110,7 @@ export const FIREWORKS_MODELS: ModelConfigurationParams[] = [
         current: 16384,
       },
     },
+    isNew: false,
   },
 ];
 
@@ -110,6 +133,7 @@ export const GEMINI_MODELS: ModelConfigurationParams[] = [
         current: 8192,
       },
     },
+    isNew: false,
   },
 ];
 
diff --git a/src/contexts/GraphContext.tsx b/src/contexts/GraphContext.tsx
index 302f4add..5033de7b 100644
--- a/src/contexts/GraphContext.tsx
+++ b/src/contexts/GraphContext.tsx
@@ -19,7 +19,6 @@ import {
 } from "@/lib/artifact_content_types";
 import { setCookie } from "@/lib/cookies";
 import { reverseCleanContent } from "@/lib/normalize_string";
-import { addAssistantIdToUser } from "@/lib/supabase/add_assistant_id_to_user";
 import {
   ArtifactLengthOptions,
   ArtifactToolResponse,
@@ -55,6 +54,7 @@ import {
   updateHighlightedMarkdown,
   updateRewrittenArtifact,
 } from "./utils";
+import { useAssistants } from "@/hooks/useAssistants";
 
 interface GraphData {
   runId: string | undefined;
@@ -82,10 +82,13 @@ type UserDataContextType = ReturnType<typeof useUser>;
 
 type ThreadDataContextType = ReturnType<typeof useThread>;
 
+type AssistantsDataContextType = ReturnType<typeof useAssistants>;
+
 type GraphContentType = {
   graphData: GraphData;
   userData: UserDataContextType;
   threadData: ThreadDataContextType;
+  assistantsData: AssistantsDataContextType;
 };
 
 const GraphContext = createContext<GraphContentType | undefined>(undefined);
@@ -112,6 +115,7 @@ export interface GraphInput {
 
 export function GraphProvider({ children }: { children: ReactNode }) {
   const userData = useUser();
+  const assistantsData = useAssistants();
   const threadData = useThread();
   const { toast } = useToast();
   const { shareRun } = useRuns();
@@ -148,21 +152,16 @@ export function GraphProvider({ children }: { children: ReactNode }) {
       threadData.searchOrCreateThread(userData.user.id);
     }
 
-    if (!threadData.assistantId) {
-      threadData.getOrCreateAssistant();
+    // Get or create a new assistant if there isn't one set in state, and we're not
+    // loading all assistants already.
+    if (
+      !assistantsData.selectedAssistant &&
+      !assistantsData.isLoadingAllAssistants
+    ) {
+      assistantsData.getOrCreateAssistant(userData.user.id);
     }
   }, [userData.user]);
 
-  useEffect(() => {
-    if (typeof window === "undefined" || !userData.user) return;
-    addAssistantIdToUser();
-  }, [userData.user]);
-
-  useEffect(() => {
-    if (typeof window === "undefined" || !userData.user) return;
-    addAssistantIdToUser();
-  }, [userData.user]);
-
   // Very hacky way of ensuring updateState is not called when a thread is switched
   useEffect(() => {
     if (threadSwitched) {
@@ -248,7 +247,7 @@ export function GraphProvider({ children }: { children: ReactNode }) {
       });
       return;
     }
-    if (!threadData.assistantId) {
+    if (!assistantsData.selectedAssistant) {
       toast({
         title: "Error",
         description: "No assistant ID found",
@@ -307,7 +306,7 @@ export function GraphProvider({ children }: { children: ReactNode }) {
     try {
       const stream = client.runs.stream(
         threadData.threadId,
-        threadData.assistantId,
+        assistantsData.selectedAssistant.assistant_id,
         {
           input,
           streamMode: "events",
@@ -937,6 +936,7 @@ export function GraphProvider({ children }: { children: ReactNode }) {
   const contextValue: GraphContentType = {
     userData,
     threadData,
+    assistantsData,
     graphData: {
       runId,
       isStreaming,
diff --git a/src/hooks/useAssistants.tsx b/src/hooks/useAssistants.tsx
new file mode 100644
index 00000000..7ee88b02
--- /dev/null
+++ b/src/hooks/useAssistants.tsx
@@ -0,0 +1,367 @@
+import { Assistant } from "@langchain/langgraph-sdk";
+import { useState } from "react";
+import { useToast } from "./use-toast";
+import { createClient } from "./utils";
+import { ASSISTANT_ID_COOKIE } from "@/constants";
+import { getCookie, removeCookie } from "@/lib/cookies";
+
+export type AssistantTool = {
+  /**
+   * The name of the tool
+   */
+  name: string;
+  /**
+   * The tool's description.
+   */
+  description: string;
+  /**
+   * JSON Schema for the parameters of the tool.
+   */
+  parameters: Record<string, any>;
+};
+
+export interface CreateAssistantFields {
+  iconData?: {
+    /**
+     * The name of the Lucide icon to use for the assistant.
+     * @default "User"
+     */
+    iconName: string;
+    /**
+     * The hex color code to use for the icon.
+     */
+    iconColor: string;
+  };
+  /**
+   * The name of the assistant.
+   */
+  name: string;
+  /**
+   * An optional description of the assistant, provided by the user/
+   */
+  description?: string;
+  /**
+   * The tools the assistant has access to.
+   */
+  tools?: Array<AssistantTool>;
+  /**
+   * An optional system prompt to prefix all generations with.
+   */
+  systemPrompt?: string;
+  is_default?: boolean;
+}
+
+export function useAssistants() {
+  const { toast } = useToast();
+  const [isLoadingAllAssistants, setIsLoadingAllAssistants] = useState(false);
+  const [isDeletingAssistant, setIsDeletingAssistant] = useState(false);
+  const [isCreatingAssistant, setIsCreatingAssistant] = useState(false);
+  const [isEditingAssistant, setIsEditingAssistant] = useState(false);
+  const [assistants, setAssistants] = useState<Assistant[]>([]);
+  const [selectedAssistant, setSelectedAssistant] = useState<Assistant>();
+
+  const getAssistants = async (userId: string): Promise<void> => {
+    setIsLoadingAllAssistants(true);
+    try {
+      const client = createClient();
+      const response = await client.assistants.search({
+        metadata: {
+          user_id: userId,
+        },
+      });
+
+      setAssistants({
+        ...response,
+      });
+      setIsLoadingAllAssistants(false);
+    } catch (e) {
+      toast({
+        title: "Failed to get assistants",
+        description: "Please try again later.",
+      });
+      console.error("Failed to get assistants", e);
+      setIsLoadingAllAssistants(false);
+    }
+  };
+
+  const deleteAssistant = async (assistantId: string): Promise<boolean> => {
+    setIsDeletingAssistant(true);
+    try {
+      const client = createClient();
+      await client.assistants.delete(assistantId);
+
+      if (selectedAssistant?.assistant_id === assistantId) {
+        // Get the first assistant in the list to set as
+        const defaultAssistant =
+          assistants.find((a) => a.metadata?.is_default) || assistants[0];
+        setSelectedAssistant(defaultAssistant);
+      }
+
+      setAssistants((prev) =>
+        prev.filter((assistant) => assistant.assistant_id !== assistantId)
+      );
+      setIsDeletingAssistant(false);
+      return true;
+    } catch (e) {
+      toast({
+        title: "Failed to delete assistant",
+        description: "Please try again later.",
+      });
+      console.error("Failed to delete assistant", e);
+      setIsDeletingAssistant(false);
+      return false;
+    }
+  };
+
+  const createCustomAssistant = async (
+    newAssistant: CreateAssistantFields,
+    userId: string,
+    successCallback?: (id: string) => void
+  ): Promise<boolean> => {
+    setIsCreatingAssistant(true);
+    try {
+      const client = createClient();
+      const { tools, systemPrompt, name, ...metadata } = newAssistant;
+      const createdAssistant = await client.assistants.create({
+        graphId: "agent",
+        name,
+        metadata: {
+          user_id: userId,
+          ...metadata,
+        },
+        config: {
+          configurable: {
+            tools,
+            systemPrompt,
+          },
+        },
+        ifExists: "do_nothing",
+      });
+
+      setAssistants((prev) => [...prev, createdAssistant]);
+      setSelectedAssistant(createdAssistant);
+      successCallback?.(createdAssistant.assistant_id);
+      setIsCreatingAssistant(false);
+      return true;
+    } catch (e) {
+      toast({
+        title: "Failed to create assistant",
+        description: "Please try again later.",
+      });
+      setIsCreatingAssistant(false);
+      console.error("Failed to create an assistant", e);
+      return false;
+    }
+  };
+
+  const editCustomAssistant = async (
+    editedAssistant: CreateAssistantFields,
+    assistantId: string,
+    userId: string
+  ): Promise<Assistant | undefined> => {
+    setIsEditingAssistant(true);
+    try {
+      const client = createClient();
+      const { tools, systemPrompt, name, ...metadata } = editedAssistant;
+      const response = await client.assistants.update(assistantId, {
+        name,
+        graphId: "agent",
+        metadata: {
+          user_id: userId,
+          ...metadata,
+        },
+        config: {
+          configurable: {
+            tools,
+            systemPrompt,
+          },
+        },
+      });
+
+      setAssistants((prev) =>
+        prev.map((assistant) => {
+          if (assistant.assistant_id === assistantId) {
+            return response;
+          }
+          return assistant;
+        })
+      );
+      setIsEditingAssistant(false);
+      return response;
+    } catch (e) {
+      console.error("Failed to edit assistant", e);
+      setIsEditingAssistant(false);
+      return undefined;
+    }
+  };
+
+  /**
+   * Legacy function which gets the assistant and updates it's metadata. Then, it deletes the assistant ID cookie
+   * to ensure this function does not run again.
+   */
+  const legacyGetAndUpdateAssistant = async (
+    userId: string,
+    assistantIdCookie: string
+  ) => {
+    const updatedAssistant = await editCustomAssistant(
+      {
+        is_default: true,
+        iconData: {
+          iconName: "User",
+          iconColor: "#000000",
+        },
+        description: "Your default assistant.",
+        name: "Default assistant",
+        tools: undefined,
+        systemPrompt: undefined,
+      },
+      assistantIdCookie,
+      userId
+    );
+
+    if (!updatedAssistant) {
+      const ghIssueTitle = "Failed to set default assistant";
+      const ghIssueBody = `Failed to set the default assistant for user.\n\nDate: '${new Date().toISOString()}'`;
+      const assignee = "bracesproul";
+      const queryParams = new URLSearchParams({
+        title: ghIssueTitle,
+        body: ghIssueBody,
+        assignee,
+        "labels[]": "autogenerated",
+      });
+      const newIssueURL = `https://github.com/langchain-ai/open-canvas/issues/new?${queryParams.toString()}`;
+
+      toast({
+        title: "Failed to edit assistant",
+        description: (
+          <p>
+            Please open an issue{" "}
+            <a href={newIssueURL} target="_blank">
+              here
+            </a>{" "}
+            (do <i>not</i> edit fields) and try again later.
+          </p>
+        ),
+      });
+      return;
+    }
+
+    setSelectedAssistant(updatedAssistant);
+    setAssistants([updatedAssistant]);
+    // Remove the cookie to ensure this is not called again.
+    removeCookie(ASSISTANT_ID_COOKIE);
+  };
+
+  const getOrCreateAssistant = async (userId: string) => {
+    if (selectedAssistant) {
+      return;
+    }
+    setIsLoadingAllAssistants(true);
+    const client = createClient();
+    let userAssistants: Assistant[] = [];
+
+    const assistantIdCookie = getCookie(ASSISTANT_ID_COOKIE);
+    if (assistantIdCookie) {
+      await legacyGetAndUpdateAssistant(userId, assistantIdCookie);
+      // Return early because this function will set the selected assistant and assistants state.
+      setIsLoadingAllAssistants(false);
+      return;
+    }
+
+    // No cookie found. First, search for all assistants under the user's ID
+    try {
+      userAssistants = await client.assistants.search({
+        graphId: "agent",
+        metadata: {
+          user_id: userId,
+        },
+        limit: 100,
+      });
+    } catch (e) {
+      console.error("Failed to get default assistant", e);
+    }
+
+    if (!userAssistants.length) {
+      // No assistants found, create a new assistant and set it as the default.
+      await createCustomAssistant(
+        {
+          iconData: {
+            iconName: "User",
+            iconColor: "#000000",
+          },
+          name: "Default assistant",
+          description: "Your default assistant.",
+          is_default: true,
+        },
+        userId
+      );
+
+      // Return early because this function will set the selected assistant and assistants state.
+      setIsLoadingAllAssistants(false);
+      return;
+    }
+
+    setAssistants(userAssistants);
+
+    const defaultAssistant = userAssistants.find(
+      (assistant) => assistant.metadata?.is_default
+    );
+    if (!defaultAssistant) {
+      // Update the first assistant to be the default assistant, then set it as the selected assistant.
+      const firstAssistant = userAssistants.sort((a, b) => {
+        return a.created_at.localeCompare(b.created_at);
+      })[0];
+      const updatedAssistant = await editCustomAssistant(
+        {
+          is_default: true,
+          iconData: {
+            iconName:
+              (firstAssistant.metadata?.iconName as string | undefined) ||
+              "User",
+            iconColor:
+              (firstAssistant.metadata?.iconColor as string | undefined) ||
+              "#000000",
+          },
+          description:
+            (firstAssistant.metadata?.description as string | undefined) ||
+            "Your default assistant.",
+          name:
+            firstAssistant.name.toLowerCase() === "Untitled"
+              ? "Default assistant"
+              : firstAssistant.name,
+          tools:
+            (firstAssistant.config?.configurable?.tools as
+              | AssistantTool[]
+              | undefined) || undefined,
+          systemPrompt:
+            (firstAssistant.config?.configurable?.systemPrompt as
+              | string
+              | undefined) || undefined,
+        },
+        firstAssistant.assistant_id,
+        userId
+      );
+
+      setSelectedAssistant(updatedAssistant);
+    } else {
+      setSelectedAssistant(defaultAssistant);
+    }
+
+    setIsLoadingAllAssistants(false);
+  };
+
+  return {
+    assistants,
+    selectedAssistant,
+    isLoadingAllAssistants,
+    isDeletingAssistant,
+    isCreatingAssistant,
+    isEditingAssistant,
+    getOrCreateAssistant,
+    getAssistants,
+    deleteAssistant,
+    createCustomAssistant,
+    editCustomAssistant,
+    setSelectedAssistant,
+  };
+}
diff --git a/src/hooks/useStore.tsx b/src/hooks/useStore.tsx
index 28389b0a..65ba2b98 100644
--- a/src/hooks/useStore.tsx
+++ b/src/hooks/useStore.tsx
@@ -32,6 +32,7 @@ export function useStore() {
     if (!item?.value) {
       setIsLoadingReflections(false);
       // No reflections found. Return early.
+      setReflections(undefined);
       return;
     }
 
diff --git a/src/hooks/useThread.tsx b/src/hooks/useThread.tsx
index e78fb859..b6ab6c71 100644
--- a/src/hooks/useThread.tsx
+++ b/src/hooks/useThread.tsx
@@ -13,7 +13,6 @@ import { useState } from "react";
 import { createClient } from "./utils";
 
 export function useThread() {
-  const [assistantId, setAssistantId] = useState<string>();
   const [threadId, setThreadId] = useState<string>();
   const [userThreads, setUserThreads] = useState<Thread[]>([]);
   const [isUserThreadsLoading, setIsUserThreadsLoading] = useState(false);
@@ -24,22 +23,23 @@ export function useThread() {
 
   const createThread = async (
     customModelName: ALL_MODEL_NAMES = DEFAULT_MODEL_NAME,
-    custModelConfig: CustomModelConfig = modelConfig,
+    customModelConfig: CustomModelConfig = modelConfig,
     userId: string
   ): Promise<Thread | undefined> => {
     const client = createClient();
+
     try {
       const thread = await client.threads.create({
         metadata: {
           supabase_user_id: userId,
           customModelName,
-          modelConfig: custModelConfig,
+          modelConfig: customModelConfig,
         },
       });
       setThreadId(thread.thread_id);
       setCookie(THREAD_ID_COOKIE_NAME, thread.thread_id);
       setModelName(customModelName);
-      setModelConfig(custModelConfig);
+      setModelConfig(customModelConfig);
       await getUserThreads(userId);
       return thread;
     } catch (e) {
@@ -47,24 +47,6 @@ export function useThread() {
     }
   };
 
-  const getOrCreateAssistant = async () => {
-    const assistantIdCookie = getCookie(ASSISTANT_ID_COOKIE);
-    if (assistantIdCookie) {
-      setAssistantId(assistantIdCookie);
-      return;
-    }
-    const client = createClient();
-    try {
-      const assistant = await client.assistants.create({
-        graphId: "agent",
-      });
-      setAssistantId(assistant.assistant_id);
-      setCookie(ASSISTANT_ID_COOKIE, assistant.assistant_id);
-    } catch (e) {
-      console.error("Failed to create assistant", e);
-    }
-  };
-
   const getUserThreads = async (userId: string) => {
     setIsUserThreadsLoading(true);
     try {
@@ -219,7 +201,6 @@ export function useThread() {
 
   return {
     threadId,
-    assistantId,
     userThreads,
     isUserThreadsLoading,
     modelName,
@@ -231,7 +212,6 @@ export function useThread() {
     deleteThread,
     getThreadById,
     setThreadId,
-    getOrCreateAssistant,
     setModelName,
     setModelConfig,
   };
diff --git a/src/lib/cookies.ts b/src/lib/cookies.ts
index d0922903..78a1ca72 100644
--- a/src/lib/cookies.ts
+++ b/src/lib/cookies.ts
@@ -20,3 +20,10 @@ export const setCookie = (
     ...(options || {}),
   });
 };
+
+export const removeCookie = (name: string): void => {
+  if (typeof window === "undefined") {
+    return;
+  }
+  Cookies.remove(name);
+};
diff --git a/src/lib/supabase/add_assistant_id_to_user.ts b/src/lib/supabase/add_assistant_id_to_user.ts
deleted file mode 100644
index 22539f58..00000000
--- a/src/lib/supabase/add_assistant_id_to_user.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { getCookie, setCookie } from "../cookies";
-import {
-  ASSISTANT_ID_COOKIE,
-  HAS_ASSISTANT_COOKIE_BEEN_SET,
-} from "@/constants";
-import { createSupabaseClient } from "./client";
-
-/**
- * Function which searches for the `oc_assistant_id_v2` in cookies and if so, it adds it to the user object.
- * This way we can start to add resiliency to adding/retrieving reflections in a way that is not dependent on cookies.
- */
-export async function addAssistantIdToUser(): Promise<void> {
-  const hasCookieBeenSet = getCookie(HAS_ASSISTANT_COOKIE_BEEN_SET);
-  if (hasCookieBeenSet === "true") {
-    return;
-  }
-  const assistantIdCookie = getCookie(ASSISTANT_ID_COOKIE);
-  if (!assistantIdCookie) {
-    return;
-  }
-
-  try {
-    const supabase = createSupabaseClient();
-    // add ID to user data
-    const { error } = await supabase.auth.updateUser({
-      data: {
-        reflections_id: assistantIdCookie,
-      },
-    });
-    if (error) {
-      throw new Error("Failed to update user with reflection ID.");
-    }
-    // If successful, set cookie to true
-    setCookie(HAS_ASSISTANT_COOKIE_BEEN_SET, "true");
-  } catch (_) {
-    console.error("Failed to update user with reflection ID.");
-  }
-}
diff --git a/src/types.ts b/src/types.ts
index e75736ec..036e6b14 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -286,4 +286,5 @@ export interface ModelConfigurationParams {
   name: string;
   label: string;
   config: CustomModelConfig;
+  isNew: boolean;
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 48019f85..bf3afe22 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -21,10 +21,21 @@ const config: Config = {
             'background-position': 'right center',
             'transform': 'rotate(3deg)'
           }
-        }
+        },
+        'gradient-x': {
+          '0%, 100%': {
+            'background-size': '200% 200%',
+            'background-position': 'left center',
+          },
+          '50%': {
+            'background-size': '200% 200%',
+            'background-position': 'right center',
+          },
+        },
       },
       animation: {
-        'gradient-xy-enhanced': 'gradient-xy-enhanced 15s ease infinite'
+        'gradient-xy-enhanced': 'gradient-xy-enhanced 15s ease infinite',
+        'gradient-x': 'gradient-x 3s ease-in-out infinite',
       },
   		backgroundImage: {
   			'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
diff --git a/yarn.lock b/yarn.lock
index b19d26a6..0174f305 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -523,6 +523,11 @@
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.11.1.tgz#a547badfc719eb3e5f4b556325e542fbe9d7a18f"
   integrity sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==
 
+"@eslint-community/regexpp@^4.5.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.1.tgz#cfc6cffe39df390a3841cde2abccf92eaa7ae0e0"
+  integrity sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
+
 "@eslint-community/regexpp@^4.6.1":
   version "4.11.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.11.0.tgz#b0ffd0312b4a3fd2d6f77237e7248a5ad3a680ae"
@@ -900,62 +905,62 @@
   resolved "https://registry.yarnpkg.com/@mantine/utils/-/utils-6.0.22.tgz#7eace697084e2bc5a831eb0fd7cbbc04cc1b0354"
   integrity sha512-RSKlNZvxhMCkOFZ6slbYvZYbWjHUM+PxDQnupIOxIdsTZQQjx/BFfrfJ7kQFOP+g7MtpOds8weAetEs5obwMOQ==
 
-"@next/env@14.2.7":
-  version "14.2.7"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.7.tgz#40fcd6ccdd53fd7e6788a0604f39032c84bea112"
-  integrity sha512-OTx9y6I3xE/eih+qtthppwLytmpJVPM5PPoJxChFsbjIEFXIayG0h/xLzefHGJviAa3Q5+Fd+9uYojKkHDKxoQ==
+"@next/env@14.2.10":
+  version "14.2.10"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.10.tgz#1d3178340028ced2d679f84140877db4f420333c"
+  integrity sha512-dZIu93Bf5LUtluBXIv4woQw2cZVZ2DJTjax5/5DOs3lzEOeKLy7GxRSr4caK9/SCPdaW6bCgpye6+n4Dh9oJPw==
 
-"@next/eslint-plugin-next@14.2.7":
-  version "14.2.7"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.7.tgz#22154d5833124fdd439d158b91a9cf87ea53f5fa"
-  integrity sha512-+7xh142AdhZGjY9/L0iFo7mqRBMJHe+q+uOL+hto1Lfo9DeWCGcR6no4StlFbVSVcA6fQLKEX6y6qhMsSKbgNQ==
+"@next/eslint-plugin-next@14.2.10":
+  version "14.2.10"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.10.tgz#9733254969a193e4815182490f51c9668ce289c7"
+  integrity sha512-LqJcPP5QkmKewpwO3zX8SoVfWwKn5NKwfcs/j52oJa5EsEDyUsqjsmj5IRzmAJA0FSuB4umhjG55AGayY306fw==
   dependencies:
     glob "10.3.10"
 
-"@next/swc-darwin-arm64@14.2.7":
-  version "14.2.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.7.tgz#6cd39ba5d5f43705de44e389d4b4f5d2df391927"
-  integrity sha512-UhZGcOyI9LE/tZL3h9rs/2wMZaaJKwnpAyegUVDGZqwsla6hMfeSj9ssBWQS9yA4UXun3pPhrFLVnw5KXZs3vw==
-
-"@next/swc-darwin-x64@14.2.7":
-  version "14.2.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.7.tgz#a1d191a293443cf8df9451b8f13a348caa718cb7"
-  integrity sha512-ys2cUgZYRc+CbyDeLAaAdZgS7N1Kpyy+wo0b/gAj+SeOeaj0Lw/q+G1hp+DuDiDAVyxLBCJXEY/AkhDmtihUTA==
-
-"@next/swc-linux-arm64-gnu@14.2.7":
-  version "14.2.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.7.tgz#9da3f993b3754b900fe7b469de51898fc51112f2"
-  integrity sha512-2xoWtE13sUJ3qrC1lwE/HjbDPm+kBQYFkkiVECJWctRASAHQ+NwjMzgrfqqMYHfMxFb5Wws3w9PqzZJqKFdWcQ==
-
-"@next/swc-linux-arm64-musl@14.2.7":
-  version "14.2.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.7.tgz#f75662bdedd2d91ad7e05778274fa17659f1f02f"
-  integrity sha512-+zJ1gJdl35BSAGpkCbfyiY6iRTaPrt3KTl4SF/B1NyELkqqnrNX6cp4IjjjxKpd64/7enI0kf6b9O1Uf3cL0pw==
-
-"@next/swc-linux-x64-gnu@14.2.7":
-  version "14.2.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.7.tgz#3c6c5b551a5af4fc8178bd5733c8063266034e79"
-  integrity sha512-m6EBqrskeMUzykBrv0fDX/28lWIBGhMzOYaStp0ihkjzIYJiKUOzVYD1gULHc8XDf5EMSqoH/0/TRAgXqpQwmw==
-
-"@next/swc-linux-x64-musl@14.2.7":
-  version "14.2.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.7.tgz#16f92f00263d1fce91ae80e5f230eb1feea484e4"
-  integrity sha512-gUu0viOMvMlzFRz1r1eQ7Ql4OE+hPOmA7smfZAhn8vC4+0swMZaZxa9CSIozTYavi+bJNDZ3tgiSdMjmMzRJlQ==
-
-"@next/swc-win32-arm64-msvc@14.2.7":
-  version "14.2.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.7.tgz#1224cb8a04cd9caad785a2187df9e85b49414a42"
-  integrity sha512-PGbONHIVIuzWlYmLvuFKcj+8jXnLbx4WrlESYlVnEzDsa3+Q2hI1YHoXaSmbq0k4ZwZ7J6sWNV4UZfx1OeOlbQ==
-
-"@next/swc-win32-ia32-msvc@14.2.7":
-  version "14.2.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.7.tgz#9494aaf9cc50ddef600f8c1b2ed0f216b19f9294"
-  integrity sha512-BiSY5umlx9ed5RQDoHcdbuKTUkuFORDqzYKPHlLeS+STUWQKWziVOn3Ic41LuTBvqE0TRJPKpio9GSIblNR+0w==
-
-"@next/swc-win32-x64-msvc@14.2.7":
-  version "14.2.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.7.tgz#75e1d90758cb10a547e1cdfb878871da28123682"
-  integrity sha512-pxsI23gKWRt/SPHFkDEsP+w+Nd7gK37Hpv0ngc5HpWy2e7cKx9zR/+Q2ptAUqICNTecAaGWvmhway7pj/JLEWA==
+"@next/swc-darwin-arm64@14.2.10":
+  version "14.2.10"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.10.tgz#49d10ca4086fbd59ee68e204f75d7136eda2aa80"
+  integrity sha512-V3z10NV+cvMAfxQUMhKgfQnPbjw+Ew3cnr64b0lr8MDiBJs3eLnM6RpGC46nhfMZsiXgQngCJKWGTC/yDcgrDQ==
+
+"@next/swc-darwin-x64@14.2.10":
+  version "14.2.10"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.10.tgz#0ebeae3afb8eac433882b79543295ab83624a1a8"
+  integrity sha512-Y0TC+FXbFUQ2MQgimJ/7Ina2mXIKhE7F+GUe1SgnzRmwFY3hX2z8nyVCxE82I2RicspdkZnSWMn4oTjIKz4uzA==
+
+"@next/swc-linux-arm64-gnu@14.2.10":
+  version "14.2.10"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.10.tgz#7e602916d2fb55a3c532f74bed926a0137c16f20"
+  integrity sha512-ZfQ7yOy5zyskSj9rFpa0Yd7gkrBnJTkYVSya95hX3zeBG9E55Z6OTNPn1j2BTFWvOVVj65C3T+qsjOyVI9DQpA==
+
+"@next/swc-linux-arm64-musl@14.2.10":
+  version "14.2.10"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.10.tgz#6b143f628ccee490b527562e934f8de578d4be47"
+  integrity sha512-n2i5o3y2jpBfXFRxDREr342BGIQCJbdAUi/K4q6Env3aSx8erM9VuKXHw5KNROK9ejFSPf0LhoSkU/ZiNdacpQ==
+
+"@next/swc-linux-x64-gnu@14.2.10":
+  version "14.2.10"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.10.tgz#086f2f16a0678890a1eb46518c4dda381b046082"
+  integrity sha512-GXvajAWh2woTT0GKEDlkVhFNxhJS/XdDmrVHrPOA83pLzlGPQnixqxD8u3bBB9oATBKB//5e4vpACnx5Vaxdqg==
+
+"@next/swc-linux-x64-musl@14.2.10":
+  version "14.2.10"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.10.tgz#1befef10ed8dbcc5047b5d637a25ae3c30a0bfc3"
+  integrity sha512-opFFN5B0SnO+HTz4Wq4HaylXGFV+iHrVxd3YvREUX9K+xfc4ePbRrxqOuPOFjtSuiVouwe6uLeDtabjEIbkmDA==
+
+"@next/swc-win32-arm64-msvc@14.2.10":
+  version "14.2.10"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.10.tgz#731f52c3ae3c56a26cf21d474b11ae1529531209"
+  integrity sha512-9NUzZuR8WiXTvv+EiU/MXdcQ1XUvFixbLIMNQiVHuzs7ZIFrJDLJDaOF1KaqttoTujpcxljM/RNAOmw1GhPPQQ==
+
+"@next/swc-win32-ia32-msvc@14.2.10":
+  version "14.2.10"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.10.tgz#32723ef7f04e25be12af357cc72ddfdd42fd1041"
+  integrity sha512-fr3aEbSd1GeW3YUMBkWAu4hcdjZ6g4NBl1uku4gAn661tcxd1bHs1THWYzdsbTRLcCKLjrDZlNp6j2HTfrw+Bg==
+
+"@next/swc-win32-x64-msvc@14.2.10":
+  version "14.2.10"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.10.tgz#ee1d036cb5ec871816f96baee7991035bb242455"
+  integrity sha512-UjeVoRGKNL2zfbcQ6fscmgjBAS/inHBh63mjIlfPg/NG8Yn2ztqylXt5qilYb6hoHIwaU2ogHknHWWmahJjgZQ==
 
 "@nextjournal/lang-clojure@^1.0.0":
   version "1.0.0"
@@ -1993,7 +1998,7 @@
   resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.6.tgz#a04ca19e877687bd449f5ad37d33b104b71fdf95"
   integrity sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==
 
-"@types/json-schema@*", "@types/json-schema@^7.0.15":
+"@types/json-schema@*", "@types/json-schema@^7.0.12", "@types/json-schema@^7.0.15":
   version "7.0.15"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
@@ -2126,6 +2131,11 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
+"@types/semver@^7.5.0":
+  version "7.5.8"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
+  integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
+
 "@types/unist@*", "@types/unist@^3.0.0":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c"
@@ -2168,6 +2178,23 @@
     natural-compare "^1.4.0"
     ts-api-utils "^1.3.0"
 
+"@typescript-eslint/eslint-plugin@^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.2.0.tgz#5a5fcad1a7baed85c10080d71ad901f98c38d5b7"
+  integrity sha512-mdekAHOqS9UjlmyF/LSs6AIEvfceV749GFxoBAjwAv0nkevfKHWQFDMcBZWUiIC5ft6ePWivXoS36aKQ0Cy3sw==
+  dependencies:
+    "@eslint-community/regexpp" "^4.5.1"
+    "@typescript-eslint/scope-manager" "7.2.0"
+    "@typescript-eslint/type-utils" "7.2.0"
+    "@typescript-eslint/utils" "7.2.0"
+    "@typescript-eslint/visitor-keys" "7.2.0"
+    debug "^4.3.4"
+    graphemer "^1.4.0"
+    ignore "^5.2.4"
+    natural-compare "^1.4.0"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
 "@typescript-eslint/eslint-plugin@^8.12.2":
   version "8.12.2"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.12.2.tgz#c2ef660bb83fd1432368319312a2581fc92ccac1"
@@ -2229,6 +2256,16 @@
     "@typescript-eslint/types" "8.8.1"
     "@typescript-eslint/visitor-keys" "8.8.1"
 
+"@typescript-eslint/type-utils@7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.2.0.tgz#7be5c30e9b4d49971b79095a1181324ef6089a19"
+  integrity sha512-xHi51adBHo9O9330J8GQYQwrKBqbIPJGZZVQTHHmy200hvkLZFWJIFtAG/7IYTWUyun6DE6w5InDReePJYJlJA==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "7.2.0"
+    "@typescript-eslint/utils" "7.2.0"
+    debug "^4.3.4"
+    ts-api-utils "^1.0.1"
+
 "@typescript-eslint/type-utils@8.12.2":
   version "8.12.2"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.12.2.tgz#132b0c52d45f6814e6f2e32416c7951ed480b016"
@@ -2306,6 +2343,19 @@
     semver "^7.6.0"
     ts-api-utils "^1.3.0"
 
+"@typescript-eslint/utils@7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.2.0.tgz#fc8164be2f2a7068debb4556881acddbf0b7ce2a"
+  integrity sha512-YfHpnMAGb1Eekpm3XRK8hcMwGLGsnT6L+7b2XyRv6ouDuJU1tZir1GS2i0+VXRatMwSI1/UfcyPe53ADkU+IuA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@types/json-schema" "^7.0.12"
+    "@types/semver" "^7.5.0"
+    "@typescript-eslint/scope-manager" "7.2.0"
+    "@typescript-eslint/types" "7.2.0"
+    "@typescript-eslint/typescript-estree" "7.2.0"
+    semver "^7.5.4"
+
 "@typescript-eslint/utils@8.12.2":
   version "8.12.2"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.12.2.tgz#726cc9f49f5866605bd15bbc1768ffc15637930e"
@@ -3379,13 +3429,14 @@ escape-string-regexp@^5.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
   integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
 
-eslint-config-next@14.2.7:
-  version "14.2.7"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-14.2.7.tgz#25c5c821740453db5e5fc8a857ec80c4784f36d5"
-  integrity sha512-ppmy+QdQ7qkuCHGDlPjWaoSbJvjGpWSBD4zEW8f1eWlxYXYpZK7QzBOer1EcHKT3uKhlY1JjUus9g7Kvv712rw==
+eslint-config-next@14.2.10:
+  version "14.2.10"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-14.2.10.tgz#bd56aa506bde6ef256b533a399dcdd5c9aee1c11"
+  integrity sha512-qO/L8LbfhBhobNowiJP+UBOb7w+JRvbz6T5X05heLOGO6/VwDIIsZL6XjWiKJ45lnwSpwP1kxoBBxCYr2wTMaw==
   dependencies:
-    "@next/eslint-plugin-next" "14.2.7"
+    "@next/eslint-plugin-next" "14.2.10"
     "@rushstack/eslint-patch" "^1.3.3"
+    "@typescript-eslint/eslint-plugin" "^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0"
     "@typescript-eslint/parser" "^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0"
     eslint-import-resolver-node "^0.3.6"
     eslint-import-resolver-typescript "^3.5.2"
@@ -4454,7 +4505,7 @@ humanize-ms@^1.2.1:
   dependencies:
     ms "^2.0.0"
 
-ignore@^5.2.0, ignore@^5.3.1:
+ignore@^5.2.0, ignore@^5.2.4, ignore@^5.3.1:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
   integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
@@ -6102,12 +6153,12 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-next@14.2.7:
-  version "14.2.7"
-  resolved "https://registry.yarnpkg.com/next/-/next-14.2.7.tgz#e02d5d9622ff4b998e5c89adfd660c9bf6435970"
-  integrity sha512-4Qy2aK0LwH4eQiSvQWyKuC7JXE13bIopEQesWE0c/P3uuNRnZCQanI0vsrMLmUQJLAto+A+/8+sve2hd+BQuOQ==
+next@14.2.10:
+  version "14.2.10"
+  resolved "https://registry.yarnpkg.com/next/-/next-14.2.10.tgz#331981a4fecb1ae8af1817d4db98fc9687ee1cb6"
+  integrity sha512-sDDExXnh33cY3RkS9JuFEKaS4HmlWmDKP1VJioucCG6z5KuA008DPsDZOzi8UfqEk3Ii+2NCQSJrfbEWtZZfww==
   dependencies:
-    "@next/env" "14.2.7"
+    "@next/env" "14.2.10"
     "@swc/helpers" "0.5.5"
     busboy "1.6.0"
     caniuse-lite "^1.0.30001579"
@@ -6115,15 +6166,15 @@ next@14.2.7:
     postcss "8.4.31"
     styled-jsx "5.1.1"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "14.2.7"
-    "@next/swc-darwin-x64" "14.2.7"
-    "@next/swc-linux-arm64-gnu" "14.2.7"
-    "@next/swc-linux-arm64-musl" "14.2.7"
-    "@next/swc-linux-x64-gnu" "14.2.7"
-    "@next/swc-linux-x64-musl" "14.2.7"
-    "@next/swc-win32-arm64-msvc" "14.2.7"
-    "@next/swc-win32-ia32-msvc" "14.2.7"
-    "@next/swc-win32-x64-msvc" "14.2.7"
+    "@next/swc-darwin-arm64" "14.2.10"
+    "@next/swc-darwin-x64" "14.2.10"
+    "@next/swc-linux-arm64-gnu" "14.2.10"
+    "@next/swc-linux-arm64-musl" "14.2.10"
+    "@next/swc-linux-x64-gnu" "14.2.10"
+    "@next/swc-linux-x64-musl" "14.2.10"
+    "@next/swc-win32-arm64-msvc" "14.2.10"
+    "@next/swc-win32-ia32-msvc" "14.2.10"
+    "@next/swc-win32-x64-msvc" "14.2.10"
 
 node-domexception@1.0.0:
   version "1.0.0"
@@ -6744,6 +6795,11 @@ react-base16-styling@^0.6.0:
     lodash.flow "^3.3.0"
     pure-color "^1.2.0"
 
+react-colorful@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
+  integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
+
 react-dom@^18:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"

From 9dc427c7bc7b06b47e8febe2940cc04efd3e38cc Mon Sep 17 00:00:00 2001
From: bracesproul <braceasproul@gmail.com>
Date: Tue, 5 Nov 2024 13:07:36 -0800
Subject: [PATCH 4/6] cr

---
 src/agent/open-canvas/nodes/generatePath.ts   |  3 --
 src/agent/utils.ts                            |  4 +-
 src/components/canvas/canvas.tsx              | 27 +++++++---
 .../model-selector/constants.ts               |  9 +++-
 .../chat-interface/model-selector/index.tsx   | 20 ++++---
 .../model-selector/model-settings.tsx         |  6 +--
 .../model-selector/select-selector.tsx        |  9 +++-
 src/components/ui/command.tsx                 | 54 +++++++++----------
 src/components/ui/popover.tsx                 | 20 +++----
 src/constants.ts                              | 16 +++---
 src/contexts/GraphContext.tsx                 |  4 +-
 src/hooks/useThread.tsx                       | 18 +++++--
 12 files changed, 110 insertions(+), 80 deletions(-)

diff --git a/src/agent/open-canvas/nodes/generatePath.ts b/src/agent/open-canvas/nodes/generatePath.ts
index 8adbee3b..b66f0fdc 100644
--- a/src/agent/open-canvas/nodes/generatePath.ts
+++ b/src/agent/open-canvas/nodes/generatePath.ts
@@ -10,10 +10,8 @@ import { z } from "zod";
 import {
   formatArtifactContentWithTemplate,
   getModelFromConfig,
-  getModelNameAndProviderFromConfig,
 } from "../../utils";
 import { getArtifactContent } from "../../../contexts/utils";
-import { initChatModel } from "langchain/chat_models/universal";
 import { LangGraphRunnableConfig } from "@langchain/langgraph";
 
 /**
@@ -23,7 +21,6 @@ export const generatePath = async (
   state: typeof OpenCanvasGraphAnnotation.State,
   config: LangGraphRunnableConfig
 ) => {
-  console.log("config.configurable!!", config.configurable);
   if (state.highlightedCode) {
     return {
       next: "updateArtifact",
diff --git a/src/agent/utils.ts b/src/agent/utils.ts
index 5d248c16..e4172a5a 100644
--- a/src/agent/utils.ts
+++ b/src/agent/utils.ts
@@ -187,9 +187,7 @@ export function optionallyGetSystemPromptFromConfig(
   return config.configurable?.systemPrompt as string | undefined;
 }
 
-export async function getModelFromConfig(
-  config: LangGraphRunnableConfig,
-) {
+export async function getModelFromConfig(config: LangGraphRunnableConfig) {
   const { modelName, modelProvider, modelConfig } =
     getModelNameAndProviderFromConfig(config);
   return await initChatModel(modelName, {
diff --git a/src/components/canvas/canvas.tsx b/src/components/canvas/canvas.tsx
index d0b5c185..7f22af93 100644
--- a/src/components/canvas/canvas.tsx
+++ b/src/components/canvas/canvas.tsx
@@ -1,7 +1,11 @@
 "use client";
 
 import { ArtifactRenderer } from "@/components/artifacts/ArtifactRenderer";
-import { ALL_MODEL_NAMES } from "@/constants";
+import {
+  ALL_MODEL_NAMES,
+  DEFAULT_MODEL_CONFIG,
+  DEFAULT_MODEL_NAME,
+} from "@/constants";
 import { useGraphContext } from "@/contexts/GraphContext";
 import { useToast } from "@/hooks/use-toast";
 import { getLanguageTemplate } from "@/lib/get_language_template";
@@ -89,12 +93,21 @@ export function CanvasComponent() {
             // Chat should only be "started" if there are messages present
             if ((thread.values as Record<string, any>)?.messages?.length) {
               setChatStarted(true);
-              setModelName(
-                thread?.metadata?.customModelName as ALL_MODEL_NAMES
-              );
-              setModelConfig(
-                thread?.metadata?.modelConfig as CustomModelConfig
-              );
+              if (thread?.metadata?.customModelName) {
+                setModelName(
+                  thread.metadata.customModelName as ALL_MODEL_NAMES
+                );
+              } else {
+                setModelName(DEFAULT_MODEL_NAME);
+              }
+
+              if (thread?.metadata?.modelConfig) {
+                setModelConfig(
+                  thread.metadata.modelConfig as CustomModelConfig
+                );
+              } else {
+                setModelConfig(DEFAULT_MODEL_CONFIG);
+              }
             } else {
               setChatStarted(false);
             }
diff --git a/src/components/chat-interface/model-selector/constants.ts b/src/components/chat-interface/model-selector/constants.ts
index ed37f626..1424eaa3 100644
--- a/src/components/chat-interface/model-selector/constants.ts
+++ b/src/components/chat-interface/model-selector/constants.ts
@@ -1,8 +1,13 @@
-import { ANTHROPIC_MODELS, OPENAI_MODELS, FIREWORKS_MODELS, GEMINI_MODELS } from "@/constants";
+import {
+  ANTHROPIC_MODELS,
+  OPENAI_MODELS,
+  FIREWORKS_MODELS,
+  GEMINI_MODELS,
+} from "@/constants";
 
 export const ALL_MODELS = [
   ...ANTHROPIC_MODELS,
   ...OPENAI_MODELS,
   ...FIREWORKS_MODELS,
   ...GEMINI_MODELS,
-];
\ No newline at end of file
+];
diff --git a/src/components/chat-interface/model-selector/index.tsx b/src/components/chat-interface/model-selector/index.tsx
index 3cdb7525..476b4292 100644
--- a/src/components/chat-interface/model-selector/index.tsx
+++ b/src/components/chat-interface/model-selector/index.tsx
@@ -9,11 +9,15 @@ import {
   FIREWORKS_MODELS,
   GEMINI_MODELS,
 } from "@/constants";
-import { Dispatch, SetStateAction, useState } from "react";
+import { useState } from "react";
 import { AlertNewModelSelectorFeature } from "./alert-new-model-selector";
 import { IsNewBadge } from "./new-badge";
 import { CustomModelConfig } from "@/types";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { CaretSortIcon } from "@radix-ui/react-icons";
 import { SelectSelector } from "./select-selector";
 
@@ -51,7 +55,7 @@ export default function ModelSelector(props: ModelSelectorProps) {
     <div className="relative">
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger
-          className="min-w-[180px] w-[210px] bg-transparent shadow-none focus:outline-none cursor-pointer hover:bg-gray-100 rounded transition-colors border-none text-gray-600 h-9 px-3 py-2 text-sm focus:ring-1 focus:ring-ring"
+          className="min-w-[180px] w-[250px] bg-transparent shadow-none focus:outline-none cursor-pointer hover:bg-gray-100 rounded transition-colors border-none text-gray-600 h-9 px-3 py-2 text-sm focus:ring-1 focus:ring-ring"
           asChild
         >
           <div className="flex items-center pr-2 truncate">
@@ -63,13 +67,13 @@ export default function ModelSelector(props: ModelSelectorProps) {
               className="mr-2"
             />
             <span className="flex flex-row items-center justify-start gap-2">
-                {modelNameToLabel(props.modelName)}
-                {isSelectedModelNew && <IsNewBadge />}
-              </span>
+              {modelNameToLabel(props.modelName)}
+              {isSelectedModelNew && <IsNewBadge />}
+            </span>
             <CaretSortIcon className="size-4 opacity-50 ml-auto" />
           </div>
         </PopoverTrigger>
-        <PopoverContent className="min-w-[180px] w-[240px] p-0">
+        <PopoverContent className="min-w-[180px] w-[280px] p-0">
           <SelectSelector
             chatStarted={props.chatStarted}
             modelName={props.modelName}
@@ -90,4 +94,4 @@ export default function ModelSelector(props: ModelSelectorProps) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/chat-interface/model-selector/model-settings.tsx b/src/components/chat-interface/model-selector/model-settings.tsx
index e011df5f..48d59e15 100644
--- a/src/components/chat-interface/model-selector/model-settings.tsx
+++ b/src/components/chat-interface/model-selector/model-settings.tsx
@@ -7,9 +7,7 @@ import { CustomModelConfig, ModelConfigurationParams } from "@/types";
 
 import { cn } from "@/lib/utils";
 import { GearIcon } from "@radix-ui/react-icons";
-import {
-  useCallback,
-} from "react";
+import { useCallback } from "react";
 import { Slider } from "@/components/ui/slider";
 
 interface SettingSectionProps {
@@ -128,4 +126,4 @@ export function ModelSettings({
       </PopoverContent>
     </Popover>
   );
-};
\ No newline at end of file
+}
diff --git a/src/components/chat-interface/model-selector/select-selector.tsx b/src/components/chat-interface/model-selector/select-selector.tsx
index a6776f03..648a128b 100644
--- a/src/components/chat-interface/model-selector/select-selector.tsx
+++ b/src/components/chat-interface/model-selector/select-selector.tsx
@@ -1,4 +1,9 @@
-import { Command, CommandGroup, CommandItem, CommandList } from "@/components/ui/command";
+import {
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
 import { ModelSettings } from "./model-settings";
 import { Check } from "lucide-react";
 import { ALL_MODELS } from "./constants";
@@ -105,4 +110,4 @@ export function SelectSelector(props: SelectSelectorProps) {
       </CommandList>
     </Command>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index c52980e8..8f23c713 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
-import { Command as CommandPrimitive } from "cmdk"
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { Command as CommandPrimitive } from "cmdk";
 
-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -20,8 +20,8 @@ const Command = React.forwardRef<
     )}
     {...props}
   />
-))
-Command.displayName = CommandPrimitive.displayName
+));
+Command.displayName = CommandPrimitive.displayName;
 
 interface CommandDialogProps extends DialogProps {}
 
@@ -34,8 +34,8 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
         </Command>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
@@ -52,9 +52,9 @@ const CommandInput = React.forwardRef<
       {...props}
     />
   </div>
-))
+));
 
-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
@@ -65,9 +65,9 @@ const CommandList = React.forwardRef<
     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
     {...props}
   />
-))
+));
 
-CommandList.displayName = CommandPrimitive.List.displayName
+CommandList.displayName = CommandPrimitive.List.displayName;
 
 const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
@@ -78,9 +78,9 @@ const CommandEmpty = React.forwardRef<
     className="py-6 text-center text-sm"
     {...props}
   />
-))
+));
 
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
 const CommandGroup = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Group>,
@@ -94,9 +94,9 @@ const CommandGroup = React.forwardRef<
     )}
     {...props}
   />
-))
+));
 
-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
 const CommandSeparator = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
@@ -107,8 +107,8 @@ const CommandSeparator = React.forwardRef<
     className={cn("-mx-1 h-px bg-border", className)}
     {...props}
   />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 const CommandItem = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Item>,
@@ -122,9 +122,9 @@ const CommandItem = React.forwardRef<
     )}
     {...props}
   />
-))
+));
 
-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({
   className,
@@ -138,9 +138,9 @@ const CommandShortcut = ({
       )}
       {...props}
     />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
 
 export {
   Command,
@@ -152,4 +152,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+};
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index 29c7bd2a..b7a19e9d 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
-const PopoverAnchor = PopoverPrimitive.Anchor
+const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -27,7 +27,7 @@ const PopoverContent = React.forwardRef<
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/src/constants.ts b/src/constants.ts
index 08f876d5..bf09f777 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,7 +1,7 @@
 import { CustomModelConfig, ModelConfigurationParams } from "./types";
 
 export const LANGGRAPH_API_URL =
-  process.env.LANGGRAPH_API_URL ?? "http://localhost:53404";
+  process.env.LANGGRAPH_API_URL ?? "http://localhost:54646";
 // v2 is tied to the 'open-canvas-prod' deployment.
 export const ASSISTANT_ID_COOKIE = "oc_assistant_id_v2";
 // export const ASSISTANT_ID_COOKIE = "oc_assistant_id";
@@ -42,8 +42,8 @@ export const OPENAI_MODELS: ModelConfigurationParams[] = [
       maxTokens: {
         min: 1,
         max: 16384,
-        default: 16384,
-        current: 16384,
+        default: 4096,
+        current: 4096,
       },
     },
     isNew: false,
@@ -106,8 +106,8 @@ export const FIREWORKS_MODELS: ModelConfigurationParams[] = [
       maxTokens: {
         min: 1,
         max: 16384,
-        default: 16384,
-        current: 16384,
+        default: 4096,
+        current: 4096,
       },
     },
     isNew: false,
@@ -129,8 +129,8 @@ export const GEMINI_MODELS: ModelConfigurationParams[] = [
       maxTokens: {
         min: 1,
         max: 8192,
-        default: 8192,
-        current: 8192,
+        default: 4096,
+        current: 4096,
       },
     },
     isNew: false,
@@ -138,7 +138,7 @@ export const GEMINI_MODELS: ModelConfigurationParams[] = [
 ];
 
 export const DEFAULT_MODEL_NAME: ALL_MODEL_NAMES = OPENAI_MODELS[0].name;
-export const DEFAULT_MODE_CONFIG: CustomModelConfig = OPENAI_MODELS[0].config;
+export const DEFAULT_MODEL_CONFIG: CustomModelConfig = OPENAI_MODELS[0].config;
 
 export type OPENAI_MODEL_NAMES = (typeof OPENAI_MODELS)[number]["name"];
 export type ANTHROPIC_MODEL_NAMES = (typeof ANTHROPIC_MODELS)[number]["name"];
diff --git a/src/contexts/GraphContext.tsx b/src/contexts/GraphContext.tsx
index 75b8ca3a..e8ffa074 100644
--- a/src/contexts/GraphContext.tsx
+++ b/src/contexts/GraphContext.tsx
@@ -1,7 +1,7 @@
 import {
   ALL_MODEL_NAMES,
   DEFAULT_INPUTS,
-  DEFAULT_MODE_CONFIG,
+  DEFAULT_MODEL_CONFIG,
   DEFAULT_MODEL_NAME,
   THREAD_ID_COOKIE_NAME,
 } from "@/constants";
@@ -888,7 +888,7 @@ export function GraphProvider({ children }: { children: ReactNode }) {
       );
     } else {
       threadData.setModelName(DEFAULT_MODEL_NAME);
-      threadData.setModelConfig(DEFAULT_MODE_CONFIG);
+      threadData.setModelConfig(DEFAULT_MODEL_CONFIG);
     }
 
     const castValues: {
diff --git a/src/hooks/useThread.tsx b/src/hooks/useThread.tsx
index 565e92e9..54fe8066 100644
--- a/src/hooks/useThread.tsx
+++ b/src/hooks/useThread.tsx
@@ -1,6 +1,6 @@
 import {
   ALL_MODEL_NAMES,
-  DEFAULT_MODE_CONFIG,
+  DEFAULT_MODEL_CONFIG,
   DEFAULT_MODEL_NAME,
   HAS_EMPTY_THREADS_CLEARED_COOKIE,
   THREAD_ID_COOKIE_NAME,
@@ -18,7 +18,7 @@ export function useThread() {
   const [modelName, setModelName] =
     useState<ALL_MODEL_NAMES>(DEFAULT_MODEL_NAME);
   const [modelConfig, setModelConfig] =
-    useState<CustomModelConfig>(DEFAULT_MODE_CONFIG);
+    useState<CustomModelConfig>(DEFAULT_MODEL_CONFIG);
 
   const createThread = async (
     customModelName: ALL_MODEL_NAMES = DEFAULT_MODEL_NAME,
@@ -38,6 +38,7 @@ export function useThread() {
       setThreadId(thread.thread_id);
       setCookie(THREAD_ID_COOKIE_NAME, thread.thread_id);
       setModelName(customModelName);
+      console.log("setting model config", customModelConfig);
       setModelConfig(customModelConfig);
       await getUserThreads(userId);
       return thread;
@@ -163,8 +164,17 @@ export function useThread() {
       const client = createClient();
       const thread = await client.threads.get(id);
       if (thread.metadata && thread.metadata.customModelName) {
-        setModelName(thread.metadata.customModelName as ALL_MODEL_NAMES);
-        setModelConfig(thread.metadata.modelConfig as CustomModelConfig);
+        if (thread.metadata.customModelName) {
+          setModelName(thread.metadata.customModelName as ALL_MODEL_NAMES);
+        } else {
+          setModelName(DEFAULT_MODEL_NAME);
+        }
+
+        if (thread.metadata.modelConfig) {
+          setModelConfig(thread.metadata.modelConfig as CustomModelConfig);
+        } else {
+          setModelConfig(DEFAULT_MODEL_CONFIG);
+        }
       }
       return thread;
     } catch (e) {

From 54ee213728b2a4edcb689b0f2a2987566403638d Mon Sep 17 00:00:00 2001
From: Muhammad Ahmad <ahmadshaukat_4@outlook.com>
Date: Thu, 7 Nov 2024 18:23:58 +0500
Subject: [PATCH 5/6] fix: Independent model configuration state per provider

---
 src/components/canvas/canvas.tsx              |   5 +-
 .../chat-interface/model-selector/index.tsx   | 158 +++++++++++++-----
 ...l-settings.tsx => model-config-pannel.tsx} | 143 +++++++++-------
 .../model-selector/select-selector.tsx        | 113 -------------
 src/components/chat-interface/thread.tsx      |   5 +-
 src/constants.ts                              |  18 +-
 src/contexts/GraphContext.tsx                 |  11 +-
 src/hooks/useThread.tsx                       |  45 ++++-
 8 files changed, 268 insertions(+), 230 deletions(-)
 rename src/components/chat-interface/model-selector/{model-settings.tsx => model-config-pannel.tsx} (52%)
 delete mode 100644 src/components/chat-interface/model-selector/select-selector.tsx

diff --git a/src/components/canvas/canvas.tsx b/src/components/canvas/canvas.tsx
index 7f22af93..5a8cc640 100644
--- a/src/components/canvas/canvas.tsx
+++ b/src/components/canvas/canvas.tsx
@@ -103,10 +103,11 @@ export function CanvasComponent() {
 
               if (thread?.metadata?.modelConfig) {
                 setModelConfig(
-                  thread.metadata.modelConfig as CustomModelConfig
+                  thread?.metadata?.customModelName as ALL_MODEL_NAMES,
+                  thread.metadata?.modelConfig as CustomModelConfig
                 );
               } else {
-                setModelConfig(DEFAULT_MODEL_CONFIG);
+                setModelConfig(DEFAULT_MODEL_NAME, DEFAULT_MODEL_CONFIG);
               }
             } else {
               setChatStarted(false);
diff --git a/src/components/chat-interface/model-selector/index.tsx b/src/components/chat-interface/model-selector/index.tsx
index 476b4292..8d0672d4 100644
--- a/src/components/chat-interface/model-selector/index.tsx
+++ b/src/components/chat-interface/model-selector/index.tsx
@@ -1,37 +1,27 @@
 "use client";
 
 import LLMIcon from "@/components/icons/svg/LLMIcon.svg";
-import NextImage from "next/image";
 import {
-  ALL_MODEL_NAMES,
-  ANTHROPIC_MODELS,
-  OPENAI_MODELS,
-  FIREWORKS_MODELS,
-  GEMINI_MODELS,
-} from "@/constants";
-import { useState } from "react";
-import { AlertNewModelSelectorFeature } from "./alert-new-model-selector";
-import { IsNewBadge } from "./new-badge";
-import { CustomModelConfig } from "@/types";
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { CaretSortIcon } from "@radix-ui/react-icons";
-import { SelectSelector } from "./select-selector";
-
-const allModels = [
-  ...ANTHROPIC_MODELS,
-  ...OPENAI_MODELS,
-  ...FIREWORKS_MODELS,
-  ...GEMINI_MODELS,
-];
-
-const modelNameToLabel = (modelName: ALL_MODEL_NAMES) => {
-  const model = allModels.find((m) => m.name === modelName);
-  return model?.label ?? modelName;
-};
+import { ALL_MODEL_NAMES, ALL_MODELS } from "@/constants";
+import { cn } from "@/lib/utils";
+import { CustomModelConfig } from "@/types";
+import { CaretSortIcon, GearIcon } from "@radix-ui/react-icons";
+import { Check } from "lucide-react";
+import NextImage from "next/image";
+import { useCallback, useState } from "react";
+import { AlertNewModelSelectorFeature } from "./alert-new-model-selector";
+import { ModelConfigPanel } from "./model-config-pannel";
+import { IsNewBadge } from "./new-badge";
 
 interface ModelSelectorProps {
   modelName: ALL_MODEL_NAMES;
@@ -39,16 +29,66 @@ interface ModelSelectorProps {
   chatStarted: boolean;
   modelConfig: CustomModelConfig;
   setModelConfig: (
-    config: CustomModelConfig | ((prev: CustomModelConfig) => CustomModelConfig)
+    modelName: ALL_MODEL_NAMES,
+    config: CustomModelConfig
   ) => void;
+  modelConfigs: Record<string, CustomModelConfig>;
 }
 
-export default function ModelSelector(props: ModelSelectorProps) {
+export default function ModelSelector({
+  chatStarted,
+  modelName,
+  setModelConfig,
+  setModelName,
+  modelConfigs,
+}: ModelSelectorProps) {
   const [showAlert, setShowAlert] = useState(false);
   const [open, setOpen] = useState(false);
+  const [openConfigModelId, setOpenConfigModelId] =
+    useState<ALL_MODEL_NAMES | null>(null);
 
-  const isSelectedModelNew = !!allModels.find(
-    (model) => model.name === props.modelName && model.isNew
+  const handleModelChange = useCallback(
+    async (newModel: ALL_MODEL_NAMES) => {
+      setModelName(newModel);
+      setOpen(false);
+    },
+    [setModelName]
+  );
+
+  const allAllowedModels = ALL_MODELS.filter((model) => {
+    if (
+      model.name.includes("fireworks/") &&
+      process.env.NEXT_PUBLIC_FIREWORKS_ENABLED === "false"
+    ) {
+      return false;
+    }
+    if (
+      model.name.includes("claude-") &&
+      process.env.NEXT_PUBLIC_ANTHROPIC_ENABLED === "false"
+    ) {
+      return false;
+    }
+    if (
+      model.name.includes("gpt-") &&
+      process.env.NEXT_PUBLIC_OPENAI_ENABLED === "false"
+    ) {
+      return false;
+    }
+    if (
+      model.name.includes("gemini-") &&
+      process.env.NEXT_PUBLIC_GEMINI_ENABLED === "false"
+    ) {
+      return false;
+    }
+
+    // By default, return true if the environment variable is not set or is set to true
+    return true;
+  });
+
+  const selectedModelLabel =
+    ALL_MODELS.find((m) => m.name === modelName)?.label || modelName;
+  const isSelectedModelNew = ALL_MODELS.some(
+    (m) => m.name === modelName && m.isNew
   );
 
   return (
@@ -67,29 +107,67 @@ export default function ModelSelector(props: ModelSelectorProps) {
               className="mr-2"
             />
             <span className="flex flex-row items-center justify-start gap-2">
-              {modelNameToLabel(props.modelName)}
+              {selectedModelLabel}
               {isSelectedModelNew && <IsNewBadge />}
             </span>
             <CaretSortIcon className="size-4 opacity-50 ml-auto" />
           </div>
         </PopoverTrigger>
         <PopoverContent className="min-w-[180px] w-[280px] p-0">
-          <SelectSelector
-            chatStarted={props.chatStarted}
-            modelName={props.modelName}
-            setModelName={props.setModelName}
-            open={open}
-            setOpen={setOpen}
-            modelConfig={props.modelConfig}
-            setModelConfig={props.setModelConfig}
-          />
+          <Command>
+            <CommandList>
+              {allAllowedModels.map((model) => (
+                <CommandGroup key={model.name} className="w-full">
+                  <CommandItem
+                    value={model.name}
+                    onSelect={handleModelChange}
+                    className="flex items-center"
+                  >
+                    <Check
+                      className={cn(
+                        "mr-1 size-4",
+                        modelName === model.name ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    <span className="flex flex-row w-full items-center justify-start gap-2">
+                      {model.label}
+                      {model.isNew && <IsNewBadge />}
+                    </span>
+
+                    {openConfigModelId === model.name ? (
+                      <ModelConfigPanel
+                        model={model}
+                        modelConfig={modelConfigs[model.name]}
+                        isOpen={true}
+                        onOpenChange={(open) =>
+                          setOpenConfigModelId(open ? model.name : null)
+                        }
+                        onClick={(e) => e.stopPropagation()}
+                        setModelConfig={setModelConfig}
+                      />
+                    ) : (
+                      <button
+                        className="ml-auto flex-shrink-0 flex size-6 items-center justify-center focus:outline-none focus:ring-0"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setOpenConfigModelId(model.name);
+                        }}
+                      >
+                        <GearIcon className="size-4" />
+                      </button>
+                    )}
+                  </CommandItem>
+                </CommandGroup>
+              ))}
+            </CommandList>
+          </Command>
         </PopoverContent>
       </Popover>
       <div className="absolute top-full -left-10 pt-2 w-max min-w-full">
         <AlertNewModelSelectorFeature
           showAlert={showAlert}
           setShowAlert={setShowAlert}
-          chatStarted={props.chatStarted}
+          chatStarted={chatStarted}
         />
       </div>
     </div>
diff --git a/src/components/chat-interface/model-selector/model-settings.tsx b/src/components/chat-interface/model-selector/model-config-pannel.tsx
similarity index 52%
rename from src/components/chat-interface/model-selector/model-settings.tsx
rename to src/components/chat-interface/model-selector/model-config-pannel.tsx
index 48d59e15..fb9df003 100644
--- a/src/components/chat-interface/model-selector/model-settings.tsx
+++ b/src/components/chat-interface/model-selector/model-config-pannel.tsx
@@ -5,95 +5,81 @@ import {
 } from "@/components/ui/popover";
 import { CustomModelConfig, ModelConfigurationParams } from "@/types";
 
+import { Button } from "@/components/ui/button";
+import { Slider } from "@/components/ui/slider";
+import { ALL_MODEL_NAMES } from "@/constants";
 import { cn } from "@/lib/utils";
-import { GearIcon } from "@radix-ui/react-icons";
+import { GearIcon, ResetIcon } from "@radix-ui/react-icons";
 import { useCallback } from "react";
-import { Slider } from "@/components/ui/slider";
-
-interface SettingSectionProps {
-  title: string;
-  description: string;
-  value: number;
-  min: number;
-  max: number;
-  step: number;
-  onChange: (value: number[]) => void;
-}
 
-const SettingSection = ({
-  title,
-  description,
-  value,
-  min,
-  max,
-  step,
-  onChange,
-}: SettingSectionProps) => (
-  <div className="space-y-2">
-    <h4 className="font-medium leading-none">{title}</h4>
-    <p className="text-sm text-muted-foreground">{description}</p>
-    <Slider
-      min={min}
-      max={max}
-      step={step}
-      value={[value]}
-      onValueChange={onChange}
-    />
-    <div className="text-right text-sm">{value}</div>
-  </div>
-);
-
-interface ModelSettingsProps {
+interface ModelConfigPanelProps {
   model: ModelConfigurationParams;
+  modelConfig: CustomModelConfig;
   className?: string;
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
   onClick: (e: any) => any;
-  modelConfig: CustomModelConfig;
   setModelConfig: (
-    config: CustomModelConfig | ((prev: CustomModelConfig) => CustomModelConfig)
+    modelName: ALL_MODEL_NAMES,
+    config: CustomModelConfig
   ) => void;
 }
 
-export function ModelSettings({
+export function ModelConfigPanel({
   model,
+  modelConfig,
   className,
   isOpen,
   onOpenChange,
   onClick,
-  modelConfig,
   setModelConfig,
-}: ModelSettingsProps) {
+}: ModelConfigPanelProps) {
+  console.log("modelConfig ", modelConfig);
+
   const handleTemperatureChange = useCallback(
     (value: number[]) => {
-      setModelConfig((prev) => ({
-        ...prev,
+      setModelConfig(model.name, {
+        ...modelConfig,
         temperatureRange: {
-          ...prev.temperatureRange,
+          ...modelConfig.temperatureRange,
           current: value[0],
         },
-      }));
+      });
     },
-    [setModelConfig]
+    [setModelConfig, modelConfig, model]
   );
 
   const handleMaxTokensChange = useCallback(
     (value: number[]) => {
-      setModelConfig((prev) => ({
-        ...prev,
+      setModelConfig(model.name, {
+        ...modelConfig,
         maxTokens: {
-          ...prev.maxTokens,
+          ...modelConfig.maxTokens,
           current: value[0],
         },
-      }));
+      });
     },
-    [setModelConfig]
+    [setModelConfig, modelConfig, model]
   );
 
+  const handleReset = useCallback(() => {
+    setModelConfig(model.name, {
+      ...modelConfig,
+      temperatureRange: {
+        ...modelConfig.temperatureRange,
+        current: modelConfig.temperatureRange.default,
+      },
+      maxTokens: {
+        ...modelConfig.maxTokens,
+        current: modelConfig.maxTokens.default,
+      },
+    });
+  }, [setModelConfig, modelConfig, model]);
+
   return (
     <Popover open={isOpen} onOpenChange={onOpenChange}>
       <PopoverTrigger onClick={onClick} asChild>
-        <button className="flex-shrink-0 size-6">
+        <button className="flex-shrink-0 flex size-6 items-center justify-center focus:outline-none focus:ring-0 focus:ring-offset-0">
           <GearIcon className="size-4" />
         </button>
       </PopoverTrigger>
@@ -104,26 +90,61 @@ export function ModelSettings({
         onClick={(e) => e.stopPropagation()}
       >
         <div className="grid gap-4">
-          <SettingSection
+          <ModelSettingSlider
             title="Temperature"
             description="Controls creativity - lower for focused outputs, higher for more variety and imagination."
             value={modelConfig.temperatureRange.current}
-            min={model.config.temperatureRange.min}
-            max={model.config.temperatureRange.max}
-            step={0.1}
+            range={{
+              min: modelConfig.temperatureRange.min,
+              max: modelConfig.temperatureRange.max,
+              step: 0.1,
+            }}
             onChange={handleTemperatureChange}
           />
-          <SettingSection
-            title="Max Tokens"
+          <ModelSettingSlider
+            title="Max tokens"
             description="Set how long the AI's response can be - more tokens mean longer, more detailed responses."
             value={modelConfig.maxTokens.current}
-            min={model.config.maxTokens.min}
-            max={model.config.maxTokens.max}
-            step={1}
+            range={{
+              min: modelConfig.maxTokens.min,
+              max: modelConfig.maxTokens.max,
+              step: 1,
+            }}
             onChange={handleMaxTokensChange}
           />
+          <Button onClick={handleReset} variant="outline" className="mt-2">
+            <ResetIcon className="mr-2 h-4 w-4" />
+            Reset to Defaults
+          </Button>
         </div>
       </PopoverContent>
     </Popover>
   );
 }
+
+const ModelSettingSlider = ({
+  title,
+  description,
+  value,
+  range,
+  onChange,
+}: {
+  title: string;
+  description: string;
+  value: number;
+  range: { min: number; max: number; step: number };
+  onChange: (value: number[]) => void;
+}) => (
+  <div className="space-y-2">
+    <h4 className="font-semibold leading-none text-base">{title}</h4>
+    <p className="text-sm text-muted-foreground">{description}</p>
+    <Slider
+      min={range.min}
+      max={range.max}
+      step={range.step}
+      value={[value]}
+      onValueChange={onChange}
+    />
+    <div className="text-right text-sm">{value}</div>
+  </div>
+);
diff --git a/src/components/chat-interface/model-selector/select-selector.tsx b/src/components/chat-interface/model-selector/select-selector.tsx
deleted file mode 100644
index 648a128b..00000000
--- a/src/components/chat-interface/model-selector/select-selector.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import {
-  Command,
-  CommandGroup,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
-import { ModelSettings } from "./model-settings";
-import { Check } from "lucide-react";
-import { ALL_MODELS } from "./constants";
-import { useCallback, useState } from "react";
-import { ALL_MODEL_NAMES } from "@/constants";
-import { CustomModelConfig } from "@/types";
-import { cn } from "@/lib/utils";
-import { IsNewBadge } from "./new-badge";
-
-interface SelectSelectorProps {
-  modelName: ALL_MODEL_NAMES;
-  setModelName: (name: ALL_MODEL_NAMES) => void;
-  chatStarted: boolean;
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  modelConfig: CustomModelConfig;
-  setModelConfig: (
-    config: CustomModelConfig | ((prev: CustomModelConfig) => CustomModelConfig)
-  ) => void;
-}
-
-export function SelectSelector(props: SelectSelectorProps) {
-  const { modelName, setModelName, modelConfig, setModelConfig, setOpen } =
-    props;
-  const [activeSettings, setActiveSettings] = useState<string | null>(null);
-
-  const handleModelChange = useCallback(
-    async (newModel: ALL_MODEL_NAMES) => {
-      setModelName(newModel);
-
-      const selectedModel = ALL_MODELS.find((model) => model.name === newModel);
-      if (selectedModel) {
-        setModelConfig(selectedModel.config);
-      }
-      setOpen(false);
-    },
-    [setModelName, setOpen, setModelConfig]
-  );
-
-  const allAllowedModels = ALL_MODELS.filter((model) => {
-    if (
-      model.name.includes("fireworks/") &&
-      process.env.NEXT_PUBLIC_FIREWORKS_ENABLED === "false"
-    ) {
-      return false;
-    }
-    if (
-      model.name.includes("claude-") &&
-      process.env.NEXT_PUBLIC_ANTHROPIC_ENABLED === "false"
-    ) {
-      return false;
-    }
-    if (
-      model.name.includes("gpt-") &&
-      process.env.NEXT_PUBLIC_OPENAI_ENABLED === "false"
-    ) {
-      return false;
-    }
-    if (
-      model.name.includes("gemini-") &&
-      process.env.NEXT_PUBLIC_GEMINI_ENABLED === "false"
-    ) {
-      return false;
-    }
-
-    // By default, return true if the environment variable is not set or is set to true
-    return true;
-  });
-
-  return (
-    <Command>
-      <CommandList>
-        {allAllowedModels.map((model) => (
-          <CommandGroup key={model.name} className="w-full">
-            <CommandItem
-              value={model.name}
-              onSelect={handleModelChange}
-              className="flex items-center"
-            >
-              <Check
-                className={cn(
-                  "mr-1 size-4",
-                  modelName === model.name ? "opacity-100" : "opacity-0"
-                )}
-              />
-              <span className="flex flex-row w-full items-center justify-start gap-2">
-                {model.label}
-                {model.isNew && <IsNewBadge />}
-              </span>
-              <ModelSettings
-                className="ml-auto"
-                model={model}
-                isOpen={activeSettings === model.name}
-                onOpenChange={(open) => {
-                  setActiveSettings(open ? model.name : null);
-                }}
-                onClick={(e) => e.stopPropagation()} // Prevent onSelect from being triggered
-                modelConfig={modelConfig}
-                setModelConfig={setModelConfig}
-              />
-            </CommandItem>
-          </CommandGroup>
-        ))}
-      </CommandList>
-    </Command>
-  );
-}
diff --git a/src/components/chat-interface/thread.tsx b/src/components/chat-interface/thread.tsx
index 50b2736c..1b43e79d 100644
--- a/src/components/chat-interface/thread.tsx
+++ b/src/components/chat-interface/thread.tsx
@@ -56,6 +56,7 @@ export const Thread: FC<ThreadProps> = (props: ThreadProps) => {
       setModelName,
       modelConfig,
       setModelConfig,
+      modelConfigs,
     },
     assistantsData: { selectedAssistant },
     graphData: { clearState, runId, feedbackSubmitted, setFeedbackSubmitted },
@@ -74,7 +75,7 @@ export const Thread: FC<ThreadProps> = (props: ThreadProps) => {
       return;
     }
     setModelName(modelName);
-    setModelConfig(modelConfig);
+    setModelConfig(modelName, modelConfig);
     clearState();
     setChatStarted(false);
     const thread = await createThread(modelName, modelConfig, user.id);
@@ -102,6 +103,7 @@ export const Thread: FC<ThreadProps> = (props: ThreadProps) => {
               setModelName={setModelName}
               modelConfig={modelConfig}
               setModelConfig={setModelConfig}
+              modelConfigs={modelConfigs}
             />
           )}
         </div>
@@ -153,6 +155,7 @@ export const Thread: FC<ThreadProps> = (props: ThreadProps) => {
                 setModelName={setModelName}
                 modelConfig={modelConfig}
                 setModelConfig={setModelConfig}
+                modelConfigs={modelConfigs}
               />
               <Composer chatStarted={true} userId={props.userId} />
             </div>
diff --git a/src/constants.ts b/src/constants.ts
index bf09f777..db107b34 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -83,7 +83,7 @@ export const ANTHROPIC_MODELS: ModelConfigurationParams[] = [
       },
       maxTokens: {
         min: 1,
-        max: 8192,
+        max: 4096,
         default: 4096,
         current: 4096,
       },
@@ -137,8 +137,12 @@ export const GEMINI_MODELS: ModelConfigurationParams[] = [
   },
 ];
 
-export const DEFAULT_MODEL_NAME: ALL_MODEL_NAMES = OPENAI_MODELS[0].name;
-export const DEFAULT_MODEL_CONFIG: CustomModelConfig = OPENAI_MODELS[0].config;
+export const ALL_MODELS: ModelConfigurationParams[] = [
+  ...OPENAI_MODELS,
+  ...ANTHROPIC_MODELS,
+  ...FIREWORKS_MODELS,
+  ...GEMINI_MODELS,
+];
 
 export type OPENAI_MODEL_NAMES = (typeof OPENAI_MODELS)[number]["name"];
 export type ANTHROPIC_MODEL_NAMES = (typeof ANTHROPIC_MODELS)[number]["name"];
@@ -149,3 +153,11 @@ export type ALL_MODEL_NAMES =
   | ANTHROPIC_MODEL_NAMES
   | FIREWORKS_MODEL_NAMES
   | GEMINI_MODEL_NAMES;
+
+export const DEFAULT_MODEL_NAME: ALL_MODEL_NAMES = OPENAI_MODELS[0].name;
+
+export const DEFAULT_MODEL_CONFIG: CustomModelConfig = {
+  ...OPENAI_MODELS[0].config,
+  temperatureRange: { ...OPENAI_MODELS[0].config.temperatureRange },
+  maxTokens: { ...OPENAI_MODELS[0].config.maxTokens },
+};
diff --git a/src/contexts/GraphContext.tsx b/src/contexts/GraphContext.tsx
index e8ffa074..71049562 100644
--- a/src/contexts/GraphContext.tsx
+++ b/src/contexts/GraphContext.tsx
@@ -8,6 +8,7 @@ import {
 import { CustomModelConfig } from "@/types";
 
 import { useToast } from "@/hooks/use-toast";
+import { useAssistants } from "@/hooks/useAssistants";
 import { useRuns } from "@/hooks/useRuns";
 import { useThread } from "@/hooks/useThread";
 import { useUser } from "@/hooks/useUser";
@@ -17,6 +18,8 @@ import {
   isArtifactMarkdownContent,
   isDeprecatedArtifactType,
 } from "@/lib/artifact_content_types";
+import { setCookie } from "@/lib/cookies";
+import { reverseCleanContent } from "@/lib/normalize_string";
 import {
   ArtifactLengthOptions,
   ArtifactToolResponse,
@@ -52,9 +55,6 @@ import {
   updateHighlightedMarkdown,
   updateRewrittenArtifact,
 } from "./utils";
-import { reverseCleanContent } from "@/lib/normalize_string";
-import { setCookie } from "@/lib/cookies";
-import { useAssistants } from "@/hooks/useAssistants";
 
 interface GraphData {
   runId: string | undefined;
@@ -313,7 +313,7 @@ export function GraphProvider({ children }: { children: ReactNode }) {
           config: {
             configurable: {
               customModelName: threadData.modelName,
-              modelConfig: threadData.modelConfig,
+              modelConfig: threadData.modelConfigs[threadData.modelName],
             },
           },
         }
@@ -884,11 +884,12 @@ export function GraphProvider({ children }: { children: ReactNode }) {
         thread.metadata.customModelName as ALL_MODEL_NAMES
       );
       threadData.setModelConfig(
+        thread.metadata.customModelName as ALL_MODEL_NAMES,
         thread.metadata.modelConfig as CustomModelConfig
       );
     } else {
       threadData.setModelName(DEFAULT_MODEL_NAME);
-      threadData.setModelConfig(DEFAULT_MODEL_CONFIG);
+      threadData.setModelConfig(DEFAULT_MODEL_NAME, DEFAULT_MODEL_CONFIG);
     }
 
     const castValues: {
diff --git a/src/hooks/useThread.tsx b/src/hooks/useThread.tsx
index 54fe8066..0e0fcfad 100644
--- a/src/hooks/useThread.tsx
+++ b/src/hooks/useThread.tsx
@@ -1,5 +1,6 @@
 import {
   ALL_MODEL_NAMES,
+  ALL_MODELS,
   DEFAULT_MODEL_CONFIG,
   DEFAULT_MODEL_NAME,
   HAS_EMPTY_THREADS_CLEARED_COOKIE,
@@ -17,8 +18,38 @@ export function useThread() {
   const [isUserThreadsLoading, setIsUserThreadsLoading] = useState(false);
   const [modelName, setModelName] =
     useState<ALL_MODEL_NAMES>(DEFAULT_MODEL_NAME);
-  const [modelConfig, setModelConfig] =
-    useState<CustomModelConfig>(DEFAULT_MODEL_CONFIG);
+
+  const [modelConfigs, setModelConfigs] = useState<
+    Record<ALL_MODEL_NAMES, CustomModelConfig>
+  >(() => {
+    // Initialize with default configs for all models
+    const initialConfigs: Record<ALL_MODEL_NAMES, CustomModelConfig> =
+      {} as Record<ALL_MODEL_NAMES, CustomModelConfig>;
+    ALL_MODELS.forEach((model) => {
+      initialConfigs[model.name] = {
+        ...model.config,
+        temperatureRange: { ...model.config.temperatureRange },
+        maxTokens: { ...model.config.maxTokens },
+      };
+    });
+    return initialConfigs;
+  });
+
+  const setModelConfig = (
+    modelName: ALL_MODEL_NAMES,
+    config: CustomModelConfig
+  ) => {
+    setModelConfigs((prevConfigs) => ({
+      ...prevConfigs,
+      [modelName]: {
+        ...config,
+        temperatureRange: { ...config.temperatureRange },
+        maxTokens: { ...config.maxTokens },
+      },
+    }));
+  };
+
+  const modelConfig = modelConfigs[modelName];
 
   const createThread = async (
     customModelName: ALL_MODEL_NAMES = DEFAULT_MODEL_NAME,
@@ -39,7 +70,7 @@ export function useThread() {
       setCookie(THREAD_ID_COOKIE_NAME, thread.thread_id);
       setModelName(customModelName);
       console.log("setting model config", customModelConfig);
-      setModelConfig(customModelConfig);
+      setModelConfig(customModelName, customModelConfig);
       await getUserThreads(userId);
       return thread;
     } catch (e) {
@@ -171,9 +202,12 @@ export function useThread() {
         }
 
         if (thread.metadata.modelConfig) {
-          setModelConfig(thread.metadata.modelConfig as CustomModelConfig);
+          setModelConfig(
+            thread.metadata.customModelName as ALL_MODEL_NAMES,
+            thread.metadata.modelConfig as CustomModelConfig
+          );
         } else {
-          setModelConfig(DEFAULT_MODEL_CONFIG);
+          setModelConfig(DEFAULT_MODEL_NAME, DEFAULT_MODEL_CONFIG);
         }
       }
       return thread;
@@ -214,6 +248,7 @@ export function useThread() {
     isUserThreadsLoading,
     modelName,
     modelConfig,
+    modelConfigs,
     createThread,
     clearThreadsWithNoValues,
     searchOrCreateThread,

From c092962e0d18a5cda0ac0677927e7121c2f74c05 Mon Sep 17 00:00:00 2001
From: Muhammad Ahmad <ahmadshaukat_4@outlook.com>
Date: Mon, 18 Nov 2024 17:35:34 +0500
Subject: [PATCH 6/6] fix: Remove debug log for model configuration in
 ModelSelector

---
 src/components/chat-interface/model-selector/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/chat-interface/model-selector/index.tsx b/src/components/chat-interface/model-selector/index.tsx
index d1b2cd8e..2b2cf1f9 100644
--- a/src/components/chat-interface/model-selector/index.tsx
+++ b/src/components/chat-interface/model-selector/index.tsx
@@ -126,7 +126,6 @@ export default function ModelSelector({
                 const config =
                   modelConfigs[model.name] ||
                   modelConfigs[model.name.replace("azure/", "")];
-                console.log("Model config for", model.name, ":", config);
 
                 return (
                   <CommandGroup key={model.name} className="w-full">