Merge branch 'main' into main

2025-02-05 20:46:43 +00:00 · 2024-11-21 20:39:08 -06:00 · 2024-11-21 20:39:08 -06:00 · cb8a096fc4
commit cb8a096fc4
parent 5359423481 9792e9387a
35 changed files with 755 additions and 200 deletions
--- a/.env.example
+++ b/.env.example
@ -5,6 +5,12 @@
 # You only need this environment variable set if you want to use Groq models
 GROQ_API_KEY=

+# Get your HuggingFace API Key here -
+# https://huggingface.co/settings/tokens
+# You only need this environment variable set if you want to use HuggingFace models
+HuggingFace_API_KEY=
+
+
 # Get your Open AI API Key by following these instructions -
 # https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key
 # You only need this environment variable set if you want to use GPT models
@ -43,6 +49,10 @@ OPENAI_LIKE_API_KEY=
 # You only need this environment variable set if you want to use Mistral models
 MISTRAL_API_KEY=

+# Get the Cohere Api key by following these instructions -
+# https://dashboard.cohere.com/api-keys
+# You only need this environment variable set if you want to use Cohere models
+COHERE_API_KEY=

 # Get LMStudio Base URL from LM Studio Developer Console
 # Make sure to enable CORS
@ -63,4 +73,4 @@ VITE_LOG_LEVEL=debug
 # DEFAULT_NUM_CTX=24576 # Consumes 32GB of VRAM
 # DEFAULT_NUM_CTX=12288 # Consumes 26GB of VRAM
 # DEFAULT_NUM_CTX=6144 # Consumes 24GB of VRAM
-DEFAULT_NUM_CTX=
+DEFAULT_NUM_CTX=
--- a/.gitignore
+++ b/.gitignore
@ -22,6 +22,7 @@ dist-ssr
 *.sln
 *.sw?

+/.history
 /.cache
 /build
 .env.local
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@ -1,7 +0,0 @@
-#!/usr/bin/env sh
-
-. "$(dirname "$0")/_/husky.sh"
-
-npx commitlint --edit $1
-
-exit 0
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -75,6 +75,7 @@ pnpm install
   - Add your LLM API keys (only set the ones you plan to use):
 ```bash
 GROQ_API_KEY=XXX
+HuggingFace_API_KEY=XXX
 OPENAI_API_KEY=XXX
 ANTHROPIC_API_KEY=XXX
 ...
--- a/4
+++ b/4
@ -19,6 +19,7 @@ FROM base AS bolt-ai-production

 # Define environment variables with default values or let them be overridden
 ARG GROQ_API_KEY
+ARG HuggingFace_API_KEY
 ARG OPENAI_API_KEY
 ARG ANTHROPIC_API_KEY
 ARG OPEN_ROUTER_API_KEY
@ -29,6 +30,7 @@ ARG DEFAULT_NUM_CTX

 ENV WRANGLER_SEND_METRICS=false \
    GROQ_API_KEY=${GROQ_API_KEY} \
+    HuggingFace_KEY=${HuggingFace_API_KEY} \
    OPENAI_API_KEY=${OPENAI_API_KEY} \
    ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY} \
    OPEN_ROUTER_API_KEY=${OPEN_ROUTER_API_KEY} \
@ -50,6 +52,7 @@ FROM base AS bolt-ai-development

 # Define the same environment variables for development
 ARG GROQ_API_KEY
+ARG HuggingFace 
 ARG OPENAI_API_KEY
 ARG ANTHROPIC_API_KEY
 ARG OPEN_ROUTER_API_KEY
@ -59,6 +62,7 @@ ARG VITE_LOG_LEVEL=debug
 ARG DEFAULT_NUM_CTX

 ENV GROQ_API_KEY=${GROQ_API_KEY} \
+    HuggingFace_API_KEY=${HuggingFace_API_KEY} \
    OPENAI_API_KEY=${OPENAI_API_KEY} \
    ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY} \
    OPEN_ROUTER_API_KEY=${OPEN_ROUTER_API_KEY} \
--- a/README.md
+++ b/README.md
@ -1,8 +1,12 @@
 [![Bolt.new: AI-Powered Full-Stack Web Development in the Browser](./public/social_preview_index.jpg)](https://bolt.new)

-# Bolt.new Fork by Cole Medin
+# Bolt.new Fork by Cole Medin - oTToDev

-This fork of Bolt.new allows you to choose the LLM that you use for each prompt! Currently, you can use OpenAI, Anthropic, Ollama, OpenRouter, Gemini, or Groq models - and it is easily extended to use any other model supported by the Vercel AI SDK! See the instructions below for running this locally and extending it to include more models.
+This fork of Bolt.new (oTToDev) allows you to choose the LLM that you use for each prompt! Currently, you can use OpenAI, Anthropic, Ollama, OpenRouter, Gemini, LMStudio, Mistral, xAI, HuggingFace, DeepSeek, or Groq models - and it is easily extended to use any other model supported by the Vercel AI SDK! See the instructions below for running this locally and extending it to include more models.
+
+Join the community for oTToDev!
+
+https://thinktank.ottomator.ai

 # Requested Additions to this Fork - Feel Free to Contribute!!

@ -20,21 +24,24 @@ This fork of Bolt.new allows you to choose the LLM that you use for each prompt!
 - ✅ Publish projects directly to GitHub (@goncaloalves)
 - ✅ Ability to enter API keys in the UI (@ali00209)
 - ✅ xAI Grok Beta Integration (@milutinke)
+- ✅ LM Studio Integration (@karrot0)
+- ✅ HuggingFace Integration (@ahsan3219)
+- ✅ Bolt terminal to see the output of LLM run commands (@thecodacus)
+- ✅ Streaming of code output (@thecodacus)
+- ✅ Ability to revert code to earlier version (@wonderwhy-er)
 - ⬜ **HIGH PRIORITY** - Prevent Bolt from rewriting files as often (file locking and diffs)
 - ⬜ **HIGH PRIORITY** - Better prompting for smaller LLMs (code window sometimes doesn't start)
- ⬜ **HIGH PRIORITY** Load local projects into the app
+- ⬜ **HIGH PRIORITY** - Load local projects into the app
 - ⬜ **HIGH PRIORITY** - Attach images to prompts
 - ⬜ **HIGH PRIORITY** - Run agents in the backend as opposed to a single model call
 - ⬜ Mobile friendly
- ⬜ LM Studio Integration
 - ⬜ Together Integration
 - ⬜ Azure Open AI API Integration
- ⬜ HuggingFace Integration
 - ⬜ Perplexity Integration
 - ⬜ Vertex AI Integration
- ⬜ Cohere Integration
+- ✅ Cohere Integration (@hasanraiyan)
+- ✅ Dynamic model max token length (@hasanraiyan)
 - ⬜ Deploy directly to Vercel/Netlify/other similar platforms
- ⬜ Ability to revert code to earlier version
 - ⬜ Prompt caching
 - ⬜ Better prompt enhancing
 - ⬜ Have LLM plan the project in a MD file for better results/transparency
--- a/app/components/chat/APIKeyManager.tsx
+++ b/app/components/chat/APIKeyManager.tsx
@ -10,11 +10,7 @@ interface APIKeyManagerProps {
  labelForGetApiKey?: string;
 }

-export const APIKeyManager: React.FC<APIKeyManagerProps> = ({
-                                                              provider,
-                                                              apiKey,
-                                                              setApiKey,
-                                                            }) => {
+export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey, setApiKey }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [tempKey, setTempKey] = useState(apiKey);

@ -24,15 +20,29 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({
  };

  return (
-    <div className="flex items-center gap-2 mt-2 mb-2">
-      <span className="text-sm text-bolt-elements-textSecondary">{provider?.name} API Key:</span>
+    <div className="flex items-start sm:items-center mt-2 mb-2 flex-col sm:flex-row">
+      <div>
+        <span className="text-sm text-bolt-elements-textSecondary">{provider?.name} API Key:</span>
+        {!isEditing && (
+          <div className="flex items-center mb-4">
+            <span className="flex-1 text-xs text-bolt-elements-textPrimary mr-2">
+              {apiKey ? '••••••••' : 'Not set (will still work if set in .env file)'}
+            </span>
+            <IconButton onClick={() => setIsEditing(true)} title="Edit API Key">
+              <div className="i-ph:pencil-simple" />
+            </IconButton>
+          </div>
+        )}
+      </div>
+
      {isEditing ? (
-        <>
+        <div className="flex items-center gap-3 mt-2">
          <input
            type="password"
            value={tempKey}
+            placeholder="Your API Key"
            onChange={(e) => setTempKey(e.target.value)}
-            className="flex-1 p-1 text-sm rounded border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus"
+            className="flex-1 px-2 py-1 text-xs lg:text-sm rounded border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus"
          />
          <IconButton onClick={handleSave} title="Save API Key">
            <div className="i-ph:check" />
@ -40,20 +50,15 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({
          <IconButton onClick={() => setIsEditing(false)} title="Cancel">
            <div className="i-ph:x" />
          </IconButton>
-        </>
+        </div>
      ) : (
        <>
-          <span className="flex-1 text-sm text-bolt-elements-textPrimary">
-            {apiKey ? '••••••••' : 'Not set (will still work if set in .env file)'}
-          </span>
-          <IconButton onClick={() => setIsEditing(true)} title="Edit API Key">
-            <div className="i-ph:pencil-simple" />
-          </IconButton>
-
-          {provider?.getApiKeyLink && <IconButton onClick={() => window.open(provider?.getApiKeyLink)} title="Edit API Key">
-            <span className="mr-2">{provider?.labelForGetApiKey || 'Get API Key'}</span>
-            <div className={provider?.icon || "i-ph:key"} />
-          </IconButton>}
+          {provider?.getApiKeyLink && (
+            <IconButton className="ml-auto" onClick={() => window.open(provider?.getApiKeyLink)} title="Edit API Key">
+              <span className="mr-2 text-xs lg:text-sm">{provider?.labelForGetApiKey || 'Get API Key'}</span>
+              <div className={provider?.icon || 'i-ph:key'} />
+            </IconButton>
+          )}
        </>
      )}
    </div>
--- a/app/components/chat/Artifact.tsx
+++ b/app/components/chat/Artifact.tsx
@ -7,6 +7,7 @@ import type { ActionState } from '~/lib/runtime/action-runner';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { classNames } from '~/utils/classNames';
 import { cubicEasingFn } from '~/utils/easings';
+import { WORK_DIR } from '~/utils/constants';

 const highlighterOptions = {
  langs: ['shell'],
@ -129,6 +130,14 @@ const actionVariants = {
  visible: { opacity: 1, y: 0 },
 };

+function openArtifactInWorkbench(filePath: any) {
+  if (workbenchStore.currentView.get() !== 'code') {
+    workbenchStore.currentView.set('code');
+  }
+
+  workbenchStore.setSelectedFile(`${WORK_DIR}/${filePath}`);
+}
+
 const ActionList = memo(({ actions }: ActionListProps) => {
  return (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
@ -169,7 +178,10 @@ const ActionList = memo(({ actions }: ActionListProps) => {
                {type === 'file' ? (
                  <div>
                    Create{' '}
-                    <code className="bg-bolt-elements-artifacts-inlineCode-background text-bolt-elements-artifacts-inlineCode-text px-1.5 py-1 rounded-md">
+                    <code
+                      className="bg-bolt-elements-artifacts-inlineCode-background text-bolt-elements-artifacts-inlineCode-text px-1.5 py-1 rounded-md text-bolt-elements-item-contentAccent hover:underline cursor-pointer"
+                      onClick={() => openArtifactInWorkbench(action.filePath)}
+                    >
                      {action.filePath}
                    </code>
                  </div>
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@ -27,9 +27,9 @@ const EXAMPLE_PROMPTS = [

 const providerList = PROVIDER_LIST;

-const ModelSelector = ({ model, setModel, provider, setProvider, modelList, providerList }) => {
+const ModelSelector = ({ model, setModel, provider, setProvider, modelList, providerList, apiKeys }) => {
  return (
-    <div className="mb-2 flex gap-2">
+    <div className="mb-2 flex gap-2 flex-col sm:flex-row">
      <select
        value={provider?.name}
        onChange={(e) => {
@ -49,8 +49,7 @@ const ModelSelector = ({ model, setModel, provider, setProvider, modelList, prov
        key={provider?.name}
        value={model}
        onChange={(e) => setModel(e.target.value)}
-        style={{ maxWidth: '70%' }}
-        className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
+        className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all lg:max-w-[70%] "
      >
        {[...modelList]
          .filter((e) => e.provider == provider?.name && e.name)
@ -157,25 +156,25 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
        ref={ref}
        className={classNames(
          styles.BaseChat,
-          'relative flex h-full w-full overflow-hidden bg-bolt-elements-background-depth-1',
+          'relative flex flex-col lg:flex-row h-full w-full overflow-hidden bg-bolt-elements-background-depth-1',
        )}
        data-chat-visible={showChat}
      >
        <ClientOnly>{() => <Menu />}</ClientOnly>
-        <div ref={scrollRef} className="flex overflow-y-auto w-full h-full">
-          <div className={classNames(styles.Chat, 'flex flex-col flex-grow min-w-[var(--chat-min-width)] h-full')}>
+        <div ref={scrollRef} className="flex flex-col lg:flex-row overflow-y-auto w-full h-full">
+          <div className={classNames(styles.Chat, 'flex flex-col flex-grow lg:min-w-[var(--chat-min-width)] h-full')}>
            {!chatStarted && (
-              <div id="intro" className="mt-[26vh] max-w-chat mx-auto text-center">
-                <h1 className="text-6xl font-bold text-bolt-elements-textPrimary mb-4 animate-fade-in">
+              <div id="intro" className="mt-[26vh] max-w-chat mx-auto text-center px-4 lg:px-0">
+                <h1 className="text-3xl lg:text-6xl font-bold text-bolt-elements-textPrimary mb-4 animate-fade-in">
                  Where ideas begin
                </h1>
-                <p className="text-xl mb-8 text-bolt-elements-textSecondary animate-fade-in animation-delay-200">
+                <p className="text-md lg:text-xl mb-8 text-bolt-elements-textSecondary animate-fade-in animation-delay-200">
                  Bring ideas to life in seconds or get help on existing projects.
                </p>
              </div>
            )}
            <div
-              className={classNames('pt-6 px-6', {
+              className={classNames('pt-6 px-2 sm:px-6', {
                'h-full flex flex-col': chatStarted,
              })}
            >
@ -184,7 +183,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                  return chatStarted ? (
                    <Messages
                      ref={messageRef}
-                      className="flex flex-col w-full flex-1 max-w-chat px-4 pb-6 mx-auto z-1"
+                      className="flex flex-col w-full flex-1 max-w-chat pb-6 mx-auto z-1"
                      messages={messages}
                      isStreaming={isStreaming}
                    />
@ -192,9 +191,12 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                }}
              </ClientOnly>
              <div
-                className={classNames('relative w-full max-w-chat mx-auto z-prompt', {
-                  'sticky bottom-0': chatStarted,
-                })}
+                className={classNames(
+                  ' bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt mb-6',
+                  {
+                    'sticky bottom-2': chatStarted,
+                  },
+                )}
              >
                <ModelSelector
                  key={provider?.name + ':' + modelList.length}
@ -204,7 +206,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                  provider={provider}
                  setProvider={setProvider}
                  providerList={PROVIDER_LIST}
+                  apiKeys={apiKeys}
                />
+
                {provider && (
                  <APIKeyManager
                    provider={provider}
@ -212,6 +216,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                    setApiKey={(key) => updateApiKey(provider.name, key)}
                  />
                )}
+
                <div
                  className={classNames(
                    'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all',
@ -219,7 +224,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                >
                  <textarea
                    ref={textareaRef}
-                    className={`w-full pl-4 pt-4 pr-16 focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent transition-all`}
+                    className={`w-full pl-4 pt-4 pr-16 focus:outline-none focus:ring-0 focus:border-none focus:shadow-none resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent transition-all`}
                    onKeyDown={(event) => {
                      if (event.key === 'Enter') {
                        if (event.shiftKey) {
@ -292,7 +297,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                    ) : null}
                  </div>
                </div>
-                <div className="bg-bolt-elements-background-depth-1 pb-6">{/* Ghost Element */}</div>
              </div>
            </div>
            {!chatStarted && (
--- a/app/components/chat/Messages.client.tsx
+++ b/app/components/chat/Messages.client.tsx
@ -3,6 +3,11 @@ import React from 'react';
 import { classNames } from '~/utils/classNames';
 import { AssistantMessage } from './AssistantMessage';
 import { UserMessage } from './UserMessage';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { useLocation } from '@remix-run/react';
+import { db, chatId } from '~/lib/persistence/useChatHistory';
+import { forkChat } from '~/lib/persistence/db';
+import { toast } from 'react-toastify';

 interface MessagesProps {
  id?: string;
@ -13,41 +18,115 @@ interface MessagesProps {

 export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props: MessagesProps, ref) => {
  const { id, isStreaming = false, messages = [] } = props;
+  const location = useLocation();
+
+  const handleRewind = (messageId: string) => {
+    const searchParams = new URLSearchParams(location.search);
+    searchParams.set('rewindTo', messageId);
+    window.location.search = searchParams.toString();
+  };
+
+  const handleFork = async (messageId: string) => {
+    try {
+      if (!db || !chatId.get()) {
+        toast.error('Chat persistence is not available');
+        return;
+      }
+
+      const urlId = await forkChat(db, chatId.get()!, messageId);
+      window.location.href = `/chat/${urlId}`;
+    } catch (error) {
+      toast.error('Failed to fork chat: ' + (error as Error).message);
+    }
+  };

  return (
-    <div id={id} ref={ref} className={props.className}>
-      {messages.length > 0
-        ? messages.map((message, index) => {
-            const { role, content } = message;
-            const isUserMessage = role === 'user';
-            const isFirst = index === 0;
-            const isLast = index === messages.length - 1;
+    <Tooltip.Provider delayDuration={200}>
+      <div id={id} ref={ref} className={props.className}>
+        {messages.length > 0
+          ? messages.map((message, index) => {
+              const { role, content, id: messageId } = message;
+              const isUserMessage = role === 'user';
+              const isFirst = index === 0;
+              const isLast = index === messages.length - 1;

-            return (
-              <div
-                key={index}
-                className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
-                  'bg-bolt-elements-messages-background': isUserMessage || !isStreaming || (isStreaming && !isLast),
-                  'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
-                    isStreaming && isLast,
-                  'mt-4': !isFirst,
-                })}
-              >
-                {isUserMessage && (
-                  <div className="flex items-center justify-center w-[34px] h-[34px] overflow-hidden bg-white text-gray-600 rounded-full shrink-0 self-start">
-                    <div className="i-ph:user-fill text-xl"></div>
+              return (
+                <div
+                  key={index}
+                  className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
+                    'bg-bolt-elements-messages-background': isUserMessage || !isStreaming || (isStreaming && !isLast),
+                    'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
+                      isStreaming && isLast,
+                    'mt-4': !isFirst,
+                  })}
+                >
+                  {isUserMessage && (
+                    <div className="flex items-center justify-center w-[34px] h-[34px] overflow-hidden bg-white text-gray-600 rounded-full shrink-0 self-start">
+                      <div className="i-ph:user-fill text-xl"></div>
+                    </div>
+                  )}
+                  <div className="grid grid-col-1 w-full">
+                    {isUserMessage ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
                  </div>
-                )}
-                <div className="grid grid-col-1 w-full">
-                  {isUserMessage ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
+                  {!isUserMessage && (
+                    <div className="flex gap-2 flex-col lg:flex-row">
+                      <Tooltip.Root>
+                        <Tooltip.Trigger asChild>
+                          {messageId && (
+                            <button
+                              onClick={() => handleRewind(messageId)}
+                              key="i-ph:arrow-u-up-left"
+                              className={classNames(
+                                'i-ph:arrow-u-up-left',
+                                'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
+                              )}
+                            />
+                          )}
+                        </Tooltip.Trigger>
+                        <Tooltip.Portal>
+                          <Tooltip.Content
+                            className="bg-bolt-elements-tooltip-background text-bolt-elements-textPrimary px-3 py-2 rounded-lg text-sm shadow-lg"
+                            sideOffset={5}
+                            style={{ zIndex: 1000 }}
+                          >
+                            Revert to this message
+                            <Tooltip.Arrow className="fill-bolt-elements-tooltip-background" />
+                          </Tooltip.Content>
+                        </Tooltip.Portal>
+                      </Tooltip.Root>
+
+                      <Tooltip.Root>
+                        <Tooltip.Trigger asChild>
+                          <button
+                            onClick={() => handleFork(messageId)}
+                            key="i-ph:git-fork"
+                            className={classNames(
+                              'i-ph:git-fork',
+                              'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
+                            )}
+                          />
+                        </Tooltip.Trigger>
+                        <Tooltip.Portal>
+                          <Tooltip.Content
+                            className="bg-bolt-elements-tooltip-background text-bolt-elements-textPrimary px-3 py-2 rounded-lg text-sm shadow-lg"
+                            sideOffset={5}
+                            style={{ zIndex: 1000 }}
+                          >
+                            Fork chat from this message
+                            <Tooltip.Arrow className="fill-bolt-elements-tooltip-background" />
+                          </Tooltip.Content>
+                        </Tooltip.Portal>
+                      </Tooltip.Root>
+                    </div>
+                  )}
                </div>
-              </div>
-            );
-          })
-        : null}
-      {isStreaming && (
-        <div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
-      )}
-    </div>
+              );
+            })
+          : null}
+        {isStreaming && (
+          <div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
+        )}
+      </div>
+    </Tooltip.Provider>
  );
 });
--- a/app/components/header/HeaderActionButtons.client.tsx
+++ b/app/components/header/HeaderActionButtons.client.tsx
@ -1,4 +1,5 @@
 import { useStore } from '@nanostores/react';
+import useViewport from '~/lib/hooks';
 import { chatStore } from '~/lib/stores/chat';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { classNames } from '~/utils/classNames';
@ -9,6 +10,8 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
  const showWorkbench = useStore(workbenchStore.showWorkbench);
  const { showChat } = useStore(chatStore);

+  const isSmallViewport = useViewport(1024);
+
  const canHideChat = showWorkbench || !showChat;

  return (
@ -16,7 +19,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
      <div className="flex border border-bolt-elements-borderColor rounded-md overflow-hidden">
        <Button
          active={showChat}
-          disabled={!canHideChat}
+          disabled={!canHideChat || isSmallViewport} // expand button is disabled on mobile as it's needed
          onClick={() => {
            if (canHideChat) {
              chatStore.setKey('showChat', !showChat);
--- a/app/components/sidebar/HistoryItem.tsx
+++ b/app/components/sidebar/HistoryItem.tsx
@ -5,9 +5,10 @@ import { type ChatHistoryItem } from '~/lib/persistence';
 interface HistoryItemProps {
  item: ChatHistoryItem;
  onDelete?: (event: React.UIEvent) => void;
+  onDuplicate?: (id: string) => void;
 }

-export function HistoryItem({ item, onDelete }: HistoryItemProps) {
+export function HistoryItem({ item, onDelete, onDuplicate }: HistoryItemProps) {
  const [hovering, setHovering] = useState(false);
  const hoverRef = useRef<HTMLDivElement>(null);

@ -44,7 +45,14 @@ export function HistoryItem({ item, onDelete }: HistoryItemProps) {
        {item.description}
        <div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-bolt-elements-background-depth-2 group-hover:from-bolt-elements-background-depth-3 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-45%">
          {hovering && (
-            <div className="flex items-center p-1 text-bolt-elements-textSecondary hover:text-bolt-elements-item-contentDanger">
+            <div className="flex items-center p-1 text-bolt-elements-textSecondary">
+              {onDuplicate && (
+                <button
+                  className="i-ph:copy scale-110 mr-2"
+                  onClick={() => onDuplicate?.(item.id)}
+                  title="Duplicate chat"
+                />
+              )}
              <Dialog.Trigger asChild>
                <button
                  className="i-ph:trash scale-110"
--- a/app/components/sidebar/Menu.client.tsx
+++ b/app/components/sidebar/Menu.client.tsx
@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
 import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
 import { IconButton } from '~/components/ui/IconButton';
 import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
-import { db, deleteById, getAll, chatId, type ChatHistoryItem } from '~/lib/persistence';
+import { db, deleteById, getAll, chatId, type ChatHistoryItem, useChatHistory } from '~/lib/persistence';
 import { cubicEasingFn } from '~/utils/easings';
 import { logger } from '~/utils/logger';
 import { HistoryItem } from './HistoryItem';
@ -34,6 +34,7 @@ const menuVariants = {
 type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;

 export function Menu() {
+  const { duplicateCurrentChat } = useChatHistory();
  const menuRef = useRef<HTMLDivElement>(null);
  const [list, setList] = useState<ChatHistoryItem[]>([]);
  const [open, setOpen] = useState(false);
@ -99,6 +100,17 @@ export function Menu() {
    };
  }, []);

+  const handleDeleteClick = (event: React.UIEvent, item: ChatHistoryItem) => {
+    event.preventDefault();
+
+    setDialogContent({ type: 'delete', item });
+  };
+
+  const handleDuplicate = async (id: string) => {
+    await duplicateCurrentChat(id);
+    loadEntries(); // Reload the list after duplication
+  };
+
  return (
    <motion.div
      ref={menuRef}
@ -128,7 +140,12 @@ export function Menu() {
                  {category}
                </div>
                {items.map((item) => (
-                  <HistoryItem key={item.id} item={item} onDelete={() => setDialogContent({ type: 'delete', item })} />
+                  <HistoryItem
+                    key={item.id}
+                    item={item}
+                    onDelete={(event) => handleDeleteClick(event, item)}
+                    onDuplicate={() => handleDuplicate(item.id)}
+                  />
                ))}
              </div>
            ))}
--- a/app/components/workbench/Workbench.client.tsx
+++ b/app/components/workbench/Workbench.client.tsx
@ -16,6 +16,7 @@ import { cubicEasingFn } from '~/utils/easings';
 import { renderLogger } from '~/utils/logger';
 import { EditorPanel } from './EditorPanel';
 import { Preview } from './Preview';
+import useViewport from '~/lib/hooks';

 interface WorkspaceProps {
  chatStarted?: boolean;
@ -65,6 +66,8 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
  const files = useStore(workbenchStore.files);
  const selectedView = useStore(workbenchStore.currentView);

+  const isSmallViewport = useViewport(1024);
+
  const setSelectedView = (view: WorkbenchViewType) => {
    workbenchStore.currentView.set(view);
  };
@ -128,18 +131,20 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
          className={classNames(
            'fixed top-[calc(var(--header-height)+1.5rem)] bottom-6 w-[var(--workbench-inner-width)] mr-4 z-0 transition-[left,width] duration-200 bolt-ease-cubic-bezier',
            {
+              'w-full': isSmallViewport,
+              'left-0': showWorkbench && isSmallViewport,
              'left-[var(--workbench-left)]': showWorkbench,
              'left-[100%]': !showWorkbench,
            },
          )}
        >
-          <div className="absolute inset-0 px-6">
+          <div className="absolute inset-0 px-2 lg:px-6">
            <div className="h-full flex flex-col bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor shadow-sm rounded-lg overflow-hidden">
              <div className="flex items-center px-3 py-2 border-b border-bolt-elements-borderColor">
                <Slider selected={selectedView} options={sliderOptions} setSelected={setSelectedView} />
                <div className="ml-auto" />
                {selectedView === 'code' && (
-                  <>
+                  <div className="flex overflow-y-auto">
                    <PanelHeaderButton
                      className="mr-1 text-sm"
                      onClick={() => {
@ -165,29 +170,32 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
                    <PanelHeaderButton
                      className="mr-1 text-sm"
                      onClick={() => {
-                        const repoName = prompt("Please enter a name for your new GitHub repository:", "bolt-generated-project");
+                        const repoName = prompt(
+                          'Please enter a name for your new GitHub repository:',
+                          'bolt-generated-project',
+                        );
                        if (!repoName) {
-                          alert("Repository name is required. Push to GitHub cancelled.");
+                          alert('Repository name is required. Push to GitHub cancelled.');
                          return;
                        }
-                        const githubUsername = prompt("Please enter your GitHub username:");
+                        const githubUsername = prompt('Please enter your GitHub username:');
                        if (!githubUsername) {
-                          alert("GitHub username is required. Push to GitHub cancelled.");
+                          alert('GitHub username is required. Push to GitHub cancelled.');
                          return;
                        }
-                        const githubToken = prompt("Please enter your GitHub personal access token:");
+                        const githubToken = prompt('Please enter your GitHub personal access token:');
                        if (!githubToken) {
-                          alert("GitHub token is required. Push to GitHub cancelled.");
+                          alert('GitHub token is required. Push to GitHub cancelled.');
                          return;
                        }
-                        
-                      workbenchStore.pushToGitHub(repoName, githubUsername, githubToken);  
+
+                        workbenchStore.pushToGitHub(repoName, githubUsername, githubToken);
                      }}
                    >
                      <div className="i-ph:github-logo" />
                      Push to GitHub
                    </PanelHeaderButton>
-                  </>
+                  </div>
                )}
                <IconButton
                  icon="i-ph:x-circle"
--- a/app/lib/.server/llm/api-key.ts
+++ b/app/lib/.server/llm/api-key.ts
@ -23,6 +23,8 @@ export function getAPIKey(cloudflareEnv: Env, provider: string, userApiKeys?: Re
      return env.GOOGLE_GENERATIVE_AI_API_KEY || cloudflareEnv.GOOGLE_GENERATIVE_AI_API_KEY;
    case 'Groq':
      return env.GROQ_API_KEY || cloudflareEnv.GROQ_API_KEY;
+    case 'HuggingFace':
+      return env.HuggingFace_API_KEY || cloudflareEnv.HuggingFace_API_KEY;
    case 'OpenRouter':
      return env.OPEN_ROUTER_API_KEY || cloudflareEnv.OPEN_ROUTER_API_KEY;
    case 'Deepseek':
@ -33,6 +35,8 @@ export function getAPIKey(cloudflareEnv: Env, provider: string, userApiKeys?: Re
      return env.OPENAI_LIKE_API_KEY || cloudflareEnv.OPENAI_LIKE_API_KEY;
    case "xAI":
      return env.XAI_API_KEY || cloudflareEnv.XAI_API_KEY;
+    case "Cohere":
+      return env.COHERE_API_KEY;
    default:
      return "";
  }
--- a/app/lib/.server/llm/model.ts
+++ b/app/lib/.server/llm/model.ts
@ -7,6 +7,7 @@ import { createGoogleGenerativeAI } from '@ai-sdk/google';
 import { ollama } from 'ollama-ai-provider';
 import { createOpenRouter } from "@openrouter/ai-sdk-provider";
 import { createMistral } from '@ai-sdk/mistral';
+import { createCohere } from '@ai-sdk/cohere'

 export const DEFAULT_NUM_CTX = process.env.DEFAULT_NUM_CTX ? 
  parseInt(process.env.DEFAULT_NUM_CTX, 10) : 
@ -27,6 +28,15 @@ export function getOpenAILikeModel(baseURL:string,apiKey: string, model: string)

  return openai(model);
 }
+
+export function getCohereAIModel(apiKey:string, model: string){
+  const cohere = createCohere({
+    apiKey,
+  });
+
+  return cohere(model);
+}
+
 export function getOpenAIModel(apiKey: string, model: string) {
  const openai = createOpenAI({
    apiKey,
@ -60,6 +70,15 @@ export function getGroqModel(apiKey: string, model: string) {
  return openai(model);
 }

+export function getHuggingFaceModel(apiKey: string, model: string) {
+  const openai = createOpenAI({
+    baseURL: 'https://api-inference.huggingface.co/v1/',
+    apiKey,
+  });
+
+  return openai(model);
+}
+
 export function getOllamaModel(baseURL: string, model: string) {
  let Ollama = ollama(model, {
    numCtx: DEFAULT_NUM_CTX,
@ -103,6 +122,8 @@ export function getXAIModel(apiKey: string, model: string) {

  return openai(model);
 }
+
+
 export function getModel(provider: string, model: string, env: Env, apiKeys?: Record<string, string>) {
  const apiKey = getAPIKey(env, provider, apiKeys);
  const baseURL = getBaseURL(env, provider);
@ -114,6 +135,8 @@ export function getModel(provider: string, model: string, env: Env, apiKeys?: Re
      return getOpenAIModel(apiKey, model);
    case 'Groq':
      return getGroqModel(apiKey, model);
+    case 'HuggingFace':
+      return getHuggingFaceModel(apiKey, model);
    case 'OpenRouter':
      return getOpenRouterModel(apiKey, model);
    case 'Google':
@ -128,6 +151,8 @@ export function getModel(provider: string, model: string, env: Env, apiKeys?: Re
      return getLMStudioModel(baseURL, model);
    case 'xAI':
      return getXAIModel(apiKey, model);
+    case 'Cohere':
+      return getCohereAIModel(apiKey, model);
    default:
      return getOllamaModel(baseURL, model);
  }
--- a/app/lib/.server/llm/prompts.ts
+++ b/app/lib/.server/llm/prompts.ts
@ -88,7 +88,7 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
  Example:

  <${MODIFICATIONS_TAG_NAME}>
-    <diff path="/home/project/src/main.js">
+    <diff path="${WORK_DIR}/src/main.js">
      @@ -2,7 +2,10 @@
        return a + b;
      }
@ -103,7 +103,7 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
      +
      +console.log('The End');
    </diff>
-    <file path="/home/project/package.json">
+    <file path="${WORK_DIR}/package.json">
      // full file content here
    </file>
  </${MODIFICATIONS_TAG_NAME}>
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@ -41,10 +41,9 @@ function extractPropertiesFromMessage(message: Message): { model: string; provid

  return { model, provider, content: cleanedContent };
 }
-
 export function streamText(
-  messages: Messages, 
-  env: Env, 
+  messages: Messages,
+  env: Env,
  options?: StreamingOptions,
  apiKeys?: Record<string, string>
 ) {
@ -64,13 +63,22 @@ export function streamText(
      return { ...message, content };
    }

-    return message; // No changes for non-user messages
+    return message; 
  });

+  const modelDetails = MODEL_LIST.find((m) => m.name === currentModel);
+
+  
+
+    const dynamicMaxTokens =
+modelDetails && modelDetails.maxTokenAllowed
+  ? modelDetails.maxTokenAllowed
+  : MAX_TOKENS;
+
  return _streamText({
    model: getModel(currentProvider, currentModel, env, apiKeys),
    system: getSystemPrompt(),
-    maxTokens: MAX_TOKENS,
+    maxTokens: dynamicMaxTokens,
    messages: convertToCoreMessages(processedMessages),
    ...options,
  });
--- a/app/lib/hooks/index.ts
+++ b/app/lib/hooks/index.ts
@ -2,3 +2,4 @@ export * from './useMessageParser';
 export * from './usePromptEnhancer';
 export * from './useShortcuts';
 export * from './useSnapScroll';
+export { default } from './useViewport';
--- a/app/lib/hooks/usePromptEnhancer.ts
+++ b/app/lib/hooks/usePromptEnhancer.ts
@ -1,4 +1,5 @@
 import { useState } from 'react';
+import type { ProviderInfo } from '~/types/model';
 import { createScopedLogger } from '~/utils/logger';

 const logger = createScopedLogger('usePromptEnhancement');
@ -13,54 +14,54 @@ export function usePromptEnhancer() {
  };

  const enhancePrompt = async (
-    input: string, 
+    input: string,
    setInput: (value: string) => void,
    model: string,
-    provider: string,
-    apiKeys?: Record<string, string>
+    provider: ProviderInfo,
+    apiKeys?: Record<string, string>,
  ) => {
    setEnhancingPrompt(true);
    setPromptEnhanced(false);
-  
+
    const requestBody: any = {
      message: input,
      model,
      provider,
    };
-  
+
    if (apiKeys) {
      requestBody.apiKeys = apiKeys;
    }
-  
+
    const response = await fetch('/api/enhancer', {
      method: 'POST',
      body: JSON.stringify(requestBody),
    });
-  
+
    const reader = response.body?.getReader();
-  
+
    const originalInput = input;
-  
+
    if (reader) {
      const decoder = new TextDecoder();
-  
+
      let _input = '';
      let _error;
-  
+
      try {
        setInput('');
-  
+
        while (true) {
          const { value, done } = await reader.read();
-  
+
          if (done) {
            break;
          }
-  
+
          _input += decoder.decode(value);
-  
+
          logger.trace('Set input', _input);
-  
+
          setInput(_input);
        }
      } catch (error) {
@ -70,10 +71,10 @@ export function usePromptEnhancer() {
        if (_error) {
          logger.error(_error);
        }
-  
+
        setEnhancingPrompt(false);
        setPromptEnhanced(true);
-  
+
        setTimeout(() => {
          setInput(_input);
        });
--- a/app/lib/hooks/useViewport.ts
+++ b/app/lib/hooks/useViewport.ts
@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+
+const useViewport = (threshold = 1024) => {
+  const [isSmallViewport, setIsSmallViewport] = useState(window.innerWidth < threshold);
+
+  useEffect(() => {
+    const handleResize = () => setIsSmallViewport(window.innerWidth < threshold);
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [threshold]);
+
+  return isSmallViewport;
+};
+
+export default useViewport;
--- a/app/lib/persistence/db.ts
+++ b/app/lib/persistence/db.ts
@ -158,3 +158,50 @@ async function getUrlIds(db: IDBDatabase): Promise<string[]> {
    };
  });
 }
+
+export async function forkChat(db: IDBDatabase, chatId: string, messageId: string): Promise<string> {
+  const chat = await getMessages(db, chatId);
+  if (!chat) throw new Error('Chat not found');
+
+  // Find the index of the message to fork at
+  const messageIndex = chat.messages.findIndex(msg => msg.id === messageId);
+  if (messageIndex === -1) throw new Error('Message not found');
+
+  // Get messages up to and including the selected message
+  const messages = chat.messages.slice(0, messageIndex + 1);
+
+  // Generate new IDs
+  const newId = await getNextId(db);
+  const urlId = await getUrlId(db, newId);
+
+  // Create the forked chat
+  await setMessages(
+    db,
+    newId,
+    messages,
+    urlId,
+    chat.description ? `${chat.description} (fork)` : 'Forked chat'
+  );
+
+  return urlId;
+}
+
+export async function duplicateChat(db: IDBDatabase, id: string): Promise<string> {
+  const chat = await getMessages(db, id);
+  if (!chat) {
+    throw new Error('Chat not found');
+  }
+
+  const newId = await getNextId(db);
+  const newUrlId = await getUrlId(db, newId); // Get a new urlId for the duplicated chat
+
+  await setMessages(
+    db,
+    newId,
+    chat.messages,
+    newUrlId, // Use the new urlId
+    `${chat.description || 'Chat'} (copy)`
+  );
+
+  return newUrlId; // Return the urlId instead of id for navigation
+}
--- a/app/lib/persistence/useChatHistory.ts
+++ b/app/lib/persistence/useChatHistory.ts
@ -1,10 +1,10 @@
-import { useLoaderData, useNavigate } from '@remix-run/react';
+import { useLoaderData, useNavigate, useSearchParams } from '@remix-run/react';
 import { useState, useEffect } from 'react';
 import { atom } from 'nanostores';
 import type { Message } from 'ai';
 import { toast } from 'react-toastify';
 import { workbenchStore } from '~/lib/stores/workbench';
-import { getMessages, getNextId, getUrlId, openDatabase, setMessages } from './db';
+import { getMessages, getNextId, getUrlId, openDatabase, setMessages, duplicateChat } from './db';

 export interface ChatHistoryItem {
  id: string;
@ -24,6 +24,7 @@ export const description = atom<string | undefined>(undefined);
 export function useChatHistory() {
  const navigate = useNavigate();
  const { id: mixedId } = useLoaderData<{ id?: string }>();
+  const [searchParams] = useSearchParams();

  const [initialMessages, setInitialMessages] = useState<Message[]>([]);
  const [ready, setReady] = useState<boolean>(false);
@ -44,7 +45,12 @@ export function useChatHistory() {
      getMessages(db, mixedId)
        .then((storedMessages) => {
          if (storedMessages && storedMessages.messages.length > 0) {
-            setInitialMessages(storedMessages.messages);
+            const rewindId = searchParams.get('rewindTo');
+            const filteredMessages = rewindId
+              ? storedMessages.messages.slice(0, storedMessages.messages.findIndex((m) => m.id === rewindId) + 1)
+              : storedMessages.messages;
+
+            setInitialMessages(filteredMessages);
            setUrlId(storedMessages.urlId);
            description.set(storedMessages.description);
            chatId.set(storedMessages.id);
@ -93,6 +99,19 @@ export function useChatHistory() {

      await setMessages(db, chatId.get() as string, messages, urlId, description.get());
    },
+    duplicateCurrentChat: async (listItemId:string) => {
+      if (!db || (!mixedId && !listItemId)) {
+        return;
+      }
+
+      try {
+        const newId = await duplicateChat(db, mixedId || listItemId);
+        navigate(`/chat/${newId}`);
+        toast.success('Chat duplicated successfully');
+      } catch (error) {
+        toast.error('Failed to duplicate chat');
+      }
+    }
  };
 }

--- a/app/lib/runtime/action-runner.ts
+++ b/app/lib/runtime/action-runner.ts
@ -94,7 +94,7 @@ export class ActionRunner {

    this.#updateAction(actionId, { ...action, ...data.action, executed: !isStreaming });

-    this.#currentExecutionPromise = this.#currentExecutionPromise
+    return this.#currentExecutionPromise = this.#currentExecutionPromise 
      .then(() => {
        return this.#executeAction(actionId, isStreaming);
      })
@ -119,7 +119,14 @@ export class ActionRunner {
          break;
        }
        case 'start': {
-          await this.#runStartAction(action)
+          // making the start app non blocking
+
+          this.#runStartAction(action).then(()=>this.#updateAction(actionId, { status: 'complete' }))
+          .catch(()=>this.#updateAction(actionId, { status: 'failed', error: 'Action failed' }))
+          // adding a delay to avoid any race condition between 2 start actions
+          // i am up for a better approch 
+          await new Promise(resolve=>setTimeout(resolve,2000))
+          return
          break;
        }
      }
--- a/app/lib/stores/workbench.ts
+++ b/app/lib/stores/workbench.ts
@ -14,6 +14,7 @@ import { saveAs } from 'file-saver';
 import { Octokit, type RestEndpointMethodTypes } from "@octokit/rest";
 import * as nodePath from 'node:path';
 import type { WebContainerProcess } from '@webcontainer/api';
+import { extractRelativePath } from '~/utils/diff';

 export interface ArtifactState {
  id: string;
@ -42,7 +43,7 @@ export class WorkbenchStore {
  modifiedFiles = new Set<string>();
  artifactIdList: string[] = [];
  #boltTerminal: { terminal: ITerminal; process: WebContainerProcess } | undefined;
-
+  #globalExecutionQueue=Promise.resolve();
  constructor() {
    if (import.meta.hot) {
      import.meta.hot.data.artifacts = this.artifacts;
@ -52,6 +53,10 @@ export class WorkbenchStore {
    }
  }

+  addToExecutionQueue(callback: () => Promise<void>) {
+    this.#globalExecutionQueue=this.#globalExecutionQueue.then(()=>callback())
+  }
+
  get previews() {
    return this.#previewsStore.previews;
  }
@ -255,8 +260,11 @@ export class WorkbenchStore {

    this.artifacts.setKey(messageId, { ...artifact, ...state });
  }
-
-  async addAction(data: ActionCallbackData) {
+  addAction(data: ActionCallbackData) {
+    this._addAction(data)
+    // this.addToExecutionQueue(()=>this._addAction(data))
+  }
+  async _addAction(data: ActionCallbackData) {
    const { messageId } = data;

    const artifact = this.#getArtifact(messageId);
@ -265,10 +273,18 @@ export class WorkbenchStore {
      unreachable('Artifact not found');
    }

-    artifact.runner.addAction(data);
+    return artifact.runner.addAction(data);
  }

-  async runAction(data: ActionCallbackData, isStreaming: boolean = false) {
+  runAction(data: ActionCallbackData, isStreaming: boolean = false) {
+    if(isStreaming) {
+      this._runAction(data, isStreaming)
+    }
+    else{
+      this.addToExecutionQueue(()=>this._runAction(data, isStreaming))
+    }
+  }
+  async _runAction(data: ActionCallbackData, isStreaming: boolean = false) {
    const { messageId } = data;

    const artifact = this.#getArtifact(messageId);
@ -293,11 +309,11 @@ export class WorkbenchStore {
      this.#editorStore.updateFile(fullPath, data.action.content);

      if (!isStreaming) {
-        this.resetCurrentDocument();
        await artifact.runner.runAction(data);
+        this.resetAllFileModifications();
      }
    } else {
-      artifact.runner.runAction(data);
+      await artifact.runner.runAction(data);
    }
  }

@ -312,8 +328,7 @@ export class WorkbenchStore {

    for (const [filePath, dirent] of Object.entries(files)) {
      if (dirent?.type === 'file' && !dirent.isBinary) {
-        // remove '/home/project/' from the beginning of the path
-        const relativePath = filePath.replace(/^\/home\/project\//, '');
+        const relativePath = extractRelativePath(filePath);

        // split the path into segments
        const pathSegments = relativePath.split('/');
@ -343,7 +358,7 @@ export class WorkbenchStore {

    for (const [filePath, dirent] of Object.entries(files)) {
      if (dirent?.type === 'file' && !dirent.isBinary) {
-        const relativePath = filePath.replace(/^\/home\/project\//, '');
+        const relativePath = extractRelativePath(filePath);
        const pathSegments = relativePath.split('/');
        let currentHandle = targetHandle;

@ -417,7 +432,7 @@ export class WorkbenchStore {
              content: Buffer.from(dirent.content).toString('base64'),
              encoding: 'base64',
            });
-            return { path: filePath.replace(/^\/home\/project\//, ''), sha: blob.sha };
+            return { path: extractRelativePath(filePath), sha: blob.sha };
          }
        })
      );
--- a/app/routes/api.enhancer.ts
+++ b/app/routes/api.enhancer.ts
@ -2,7 +2,7 @@ import { type ActionFunctionArgs } from '@remix-run/cloudflare';
 import { StreamingTextResponse, parseStreamPart } from 'ai';
 import { streamText } from '~/lib/.server/llm/stream-text';
 import { stripIndents } from '~/utils/stripIndent';
-import type { StreamingOptions } from '~/lib/.server/llm/stream-text';
+import type { ProviderInfo } from '~/types/model';

 const encoder = new TextEncoder();
 const decoder = new TextDecoder();
@ -12,25 +12,27 @@ export async function action(args: ActionFunctionArgs) {
 }

 async function enhancerAction({ context, request }: ActionFunctionArgs) {
-  const { message, model, provider, apiKeys } = await request.json<{ 
+  const { message, model, provider, apiKeys } = await request.json<{
    message: string;
    model: string;
-    provider: string;
+    provider: ProviderInfo;
    apiKeys?: Record<string, string>;
  }>();

-  // Validate 'model' and 'provider' fields
+  const { name: providerName } = provider;
+
+  // validate 'model' and 'provider' fields
  if (!model || typeof model !== 'string') {
    throw new Response('Invalid or missing model', {
      status: 400,
-      statusText: 'Bad Request'
+      statusText: 'Bad Request',
    });
  }

-  if (!provider || typeof provider !== 'string') {
+  if (!providerName || typeof providerName !== 'string') {
    throw new Response('Invalid or missing provider', {
      status: 400,
-      statusText: 'Bad Request'
+      statusText: 'Bad Request',
    });
  }

@ -39,7 +41,9 @@ async function enhancerAction({ context, request }: ActionFunctionArgs) {
      [
        {
          role: 'user',
-          content: `[Model: ${model}]\n\n[Provider: ${provider}]\n\n` + stripIndents`
+          content:
+            `[Model: ${model}]\n\n[Provider: ${providerName}]\n\n` +
+            stripIndents`
          I want you to improve the user prompt that is wrapped in \`<original_prompt>\` tags.

          IMPORTANT: Only respond with the improved prompt and nothing else!
@ -52,23 +56,24 @@ async function enhancerAction({ context, request }: ActionFunctionArgs) {
      ],
      context.cloudflare.env,
      undefined,
-      apiKeys
+      apiKeys,
    );

    const transformStream = new TransformStream({
      transform(chunk, controller) {
        const text = decoder.decode(chunk);
-        const lines = text.split('\n').filter(line => line.trim() !== '');
-        
+        const lines = text.split('\n').filter((line) => line.trim() !== '');
+
        for (const line of lines) {
          try {
            const parsed = parseStreamPart(line);
+
            if (parsed.type === 'text') {
              controller.enqueue(encoder.encode(parsed.value));
            }
          } catch (e) {
-            // Skip invalid JSON lines
-            console.warn('Failed to parse stream part:', line);
+            // skip invalid JSON lines
+            console.warn('Failed to parse stream part:', line, e);
          }
        }
      },
@ -83,7 +88,7 @@ async function enhancerAction({ context, request }: ActionFunctionArgs) {
    if (error instanceof Error && error.message?.includes('API key')) {
      throw new Response('Invalid or missing API key', {
        status: 401,
-        statusText: 'Unauthorized'
+        statusText: 'Unauthorized',
      });
    }

--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@ -12,12 +12,12 @@ const PROVIDER_LIST: ProviderInfo[] = [
  {
    name: 'Anthropic',
    staticModels: [
-      { name: 'claude-3-5-sonnet-latest', label: 'Claude 3.5 Sonnet (new)', provider: 'Anthropic' },
-      { name: 'claude-3-5-sonnet-20240620', label: 'Claude 3.5 Sonnet (old)', provider: 'Anthropic' },
-      { name: 'claude-3-5-haiku-latest', label: 'Claude 3.5 Haiku (new)', provider: 'Anthropic' },
-      { name: 'claude-3-opus-latest', label: 'Claude 3 Opus', provider: 'Anthropic' },
-      { name: 'claude-3-sonnet-20240229', label: 'Claude 3 Sonnet', provider: 'Anthropic' },
-      { name: 'claude-3-haiku-20240307', label: 'Claude 3 Haiku', provider: 'Anthropic' }
+      { name: 'claude-3-5-sonnet-latest', label: 'Claude 3.5 Sonnet (new)', provider: 'Anthropic', maxTokenAllowed: 8000 },
+      { name: 'claude-3-5-sonnet-20240620', label: 'Claude 3.5 Sonnet (old)', provider: 'Anthropic', maxTokenAllowed: 8000 },
+      { name: 'claude-3-5-haiku-latest', label: 'Claude 3.5 Haiku (new)', provider: 'Anthropic', maxTokenAllowed: 8000 },
+      { name: 'claude-3-opus-latest', label: 'Claude 3 Opus', provider: 'Anthropic', maxTokenAllowed: 8000 },
+      { name: 'claude-3-sonnet-20240229', label: 'Claude 3 Sonnet', provider: 'Anthropic', maxTokenAllowed: 8000 },
+      { name: 'claude-3-haiku-20240307', label: 'Claude 3 Haiku', provider: 'Anthropic', maxTokenAllowed: 8000 }
    ],
    getApiKeyLink: "https://console.anthropic.com/settings/keys",
  },
@ -33,23 +33,40 @@ const PROVIDER_LIST: ProviderInfo[] = [
    staticModels: [],
    getDynamicModels: getOpenAILikeModels
  },
+  {
+    name: 'Cohere',
+    staticModels: [
+      { name: 'command-r-plus-08-2024', label: 'Command R plus Latest', provider: 'Cohere', maxTokenAllowed: 4096 },
+      { name: 'command-r-08-2024', label: 'Command R Latest', provider: 'Cohere', maxTokenAllowed: 4096 },
+      { name: 'command-r-plus', label: 'Command R plus', provider: 'Cohere', maxTokenAllowed: 4096 },
+      { name: 'command-r', label: 'Command R', provider: 'Cohere', maxTokenAllowed: 4096 },
+      { name: 'command', label: 'Command', provider: 'Cohere', maxTokenAllowed: 4096 },
+      { name: 'command-nightly', label: 'Command Nightly', provider: 'Cohere', maxTokenAllowed: 4096 },
+      { name: 'command-light', label: 'Command Light', provider: 'Cohere', maxTokenAllowed: 4096 },
+      { name: 'command-light-nightly', label: 'Command Light Nightly', provider: 'Cohere', maxTokenAllowed: 4096 },
+      { name: 'c4ai-aya-expanse-8b', label: 'c4AI Aya Expanse 8b', provider: 'Cohere', maxTokenAllowed: 4096 },
+      { name: 'c4ai-aya-expanse-32b', label: 'c4AI Aya Expanse 32b', provider: 'Cohere', maxTokenAllowed: 4096 },
+    ],
+    getApiKeyLink: 'https://dashboard.cohere.com/api-keys'
+  },
  {
    name: 'OpenRouter',
    staticModels: [
-      { name: 'gpt-4o', label: 'GPT-4o', provider: 'OpenAI' },
+      { name: 'gpt-4o', label: 'GPT-4o', provider: 'OpenAI', maxTokenAllowed: 8000 },
      {
        name: 'anthropic/claude-3.5-sonnet',
        label: 'Anthropic: Claude 3.5 Sonnet (OpenRouter)',
        provider: 'OpenRouter'
+        , maxTokenAllowed: 8000
      },
-      { name: 'anthropic/claude-3-haiku', label: 'Anthropic: Claude 3 Haiku (OpenRouter)', provider: 'OpenRouter' },
-      { name: 'deepseek/deepseek-coder', label: 'Deepseek-Coder V2 236B (OpenRouter)', provider: 'OpenRouter' },
-      { name: 'google/gemini-flash-1.5', label: 'Google Gemini Flash 1.5 (OpenRouter)', provider: 'OpenRouter' },
-      { name: 'google/gemini-pro-1.5', label: 'Google Gemini Pro 1.5 (OpenRouter)', provider: 'OpenRouter' },
-      { name: 'x-ai/grok-beta', label: 'xAI Grok Beta (OpenRouter)', provider: 'OpenRouter' },
-      { name: 'mistralai/mistral-nemo', label: 'OpenRouter Mistral Nemo (OpenRouter)', provider: 'OpenRouter' },
-      { name: 'qwen/qwen-110b-chat', label: 'OpenRouter Qwen 110b Chat (OpenRouter)', provider: 'OpenRouter' },
-      { name: 'cohere/command', label: 'Cohere Command (OpenRouter)', provider: 'OpenRouter' }
+      { name: 'anthropic/claude-3-haiku', label: 'Anthropic: Claude 3 Haiku (OpenRouter)', provider: 'OpenRouter', maxTokenAllowed: 8000 },
+      { name: 'deepseek/deepseek-coder', label: 'Deepseek-Coder V2 236B (OpenRouter)', provider: 'OpenRouter', maxTokenAllowed: 8000 },
+      { name: 'google/gemini-flash-1.5', label: 'Google Gemini Flash 1.5 (OpenRouter)', provider: 'OpenRouter', maxTokenAllowed: 8000 },
+      { name: 'google/gemini-pro-1.5', label: 'Google Gemini Pro 1.5 (OpenRouter)', provider: 'OpenRouter', maxTokenAllowed: 8000 },
+      { name: 'x-ai/grok-beta', label: 'xAI Grok Beta (OpenRouter)', provider: 'OpenRouter', maxTokenAllowed: 8000 },
+      { name: 'mistralai/mistral-nemo', label: 'OpenRouter Mistral Nemo (OpenRouter)', provider: 'OpenRouter', maxTokenAllowed: 8000 },
+      { name: 'qwen/qwen-110b-chat', label: 'OpenRouter Qwen 110b Chat (OpenRouter)', provider: 'OpenRouter', maxTokenAllowed: 8000 },
+      { name: 'cohere/command', label: 'Cohere Command (OpenRouter)', provider: 'OpenRouter', maxTokenAllowed: 4096 }
    ],
    getDynamicModels: getOpenRouterModels,
    getApiKeyLink: 'https://openrouter.ai/settings/keys',
@ -57,54 +74,70 @@ const PROVIDER_LIST: ProviderInfo[] = [
  }, {
    name: 'Google',
    staticModels: [
-      { name: 'gemini-1.5-flash-latest', label: 'Gemini 1.5 Flash', provider: 'Google' },
-      { name: 'gemini-1.5-pro-latest', label: 'Gemini 1.5 Pro', provider: 'Google' }
+      { name: 'gemini-1.5-flash-latest', label: 'Gemini 1.5 Flash', provider: 'Google', maxTokenAllowed: 8192 },
+      { name: 'gemini-1.5-flash-002', label: 'Gemini 1.5 Flash-002', provider: 'Google', maxTokenAllowed: 8192 },
+      { name: 'gemini-1.5-flash-8b', label: 'Gemini 1.5 Flash-8b', provider: 'Google', maxTokenAllowed: 8192 },
+      { name: 'gemini-1.5-pro-latest', label: 'Gemini 1.5 Pro', provider: 'Google', maxTokenAllowed: 8192 },
+      { name: 'gemini-1.5-pro-002', label: 'Gemini 1.5 Pro-002', provider: 'Google', maxTokenAllowed: 8192 },
+      { name: 'gemini-exp-1114', label: 'Gemini exp-1114', provider: 'Google', maxTokenAllowed: 8192 }
    ],
    getApiKeyLink: 'https://aistudio.google.com/app/apikey'
  }, {
    name: 'Groq',
    staticModels: [
-      { name: 'llama-3.1-70b-versatile', label: 'Llama 3.1 70b (Groq)', provider: 'Groq' },
-      { name: 'llama-3.1-8b-instant', label: 'Llama 3.1 8b (Groq)', provider: 'Groq' },
-      { name: 'llama-3.2-11b-vision-preview', label: 'Llama 3.2 11b (Groq)', provider: 'Groq' },
-      { name: 'llama-3.2-3b-preview', label: 'Llama 3.2 3b (Groq)', provider: 'Groq' },
-      { name: 'llama-3.2-1b-preview', label: 'Llama 3.2 1b (Groq)', provider: 'Groq' }
+      { name: 'llama-3.1-70b-versatile', label: 'Llama 3.1 70b (Groq)', provider: 'Groq', maxTokenAllowed: 8000 },
+      { name: 'llama-3.1-8b-instant', label: 'Llama 3.1 8b (Groq)', provider: 'Groq', maxTokenAllowed: 8000 },
+      { name: 'llama-3.2-11b-vision-preview', label: 'Llama 3.2 11b (Groq)', provider: 'Groq', maxTokenAllowed: 8000 },
+      { name: 'llama-3.2-3b-preview', label: 'Llama 3.2 3b (Groq)', provider: 'Groq', maxTokenAllowed: 8000 },
+      { name: 'llama-3.2-1b-preview', label: 'Llama 3.2 1b (Groq)', provider: 'Groq', maxTokenAllowed: 8000 }
    ],
    getApiKeyLink: 'https://console.groq.com/keys'
-  }, {
+  },
+  {
+    name: 'HuggingFace',
+    staticModels: [
+      { name: 'Qwen/Qwen2.5-Coder-32B-Instruct', label: 'Qwen2.5-Coder-32B-Instruct (HuggingFace)', provider: 'HuggingFace', maxTokenAllowed: 8000 },
+      { name: '01-ai/Yi-1.5-34B-Chat', label: 'Yi-1.5-34B-Chat (HuggingFace)', provider: 'HuggingFace', maxTokenAllowed: 8000 },
+      { name: 'codellama/CodeLlama-34b-Instruct-hf', label: 'CodeLlama-34b-Instruct (HuggingFace)', provider: 'HuggingFace', maxTokenAllowed: 8000 },
+      { name: 'NousResearch/Hermes-3-Llama-3.1-8B', label: 'Hermes-3-Llama-3.1-8B (HuggingFace)', provider: 'HuggingFace', maxTokenAllowed: 8000 }
+    ],
+    getApiKeyLink: 'https://huggingface.co/settings/tokens'
+  },
+
+  {
    name: 'OpenAI',
    staticModels: [
-      { name: 'gpt-4o-mini', label: 'GPT-4o Mini', provider: 'OpenAI' },
-      { name: 'gpt-4-turbo', label: 'GPT-4 Turbo', provider: 'OpenAI' },
-      { name: 'gpt-4', label: 'GPT-4', provider: 'OpenAI' },
-      { name: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo', provider: 'OpenAI' }
+      { name: 'gpt-4o-mini', label: 'GPT-4o Mini', provider: 'OpenAI', maxTokenAllowed: 8000 },
+      { name: 'gpt-4-turbo', label: 'GPT-4 Turbo', provider: 'OpenAI', maxTokenAllowed: 8000 },
+      { name: 'gpt-4', label: 'GPT-4', provider: 'OpenAI', maxTokenAllowed: 8000 },
+      { name: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo', provider: 'OpenAI', maxTokenAllowed: 8000 }
    ],
    getApiKeyLink: "https://platform.openai.com/api-keys",
  }, {
    name: 'xAI',
    staticModels: [
-      { name: 'grok-beta', label: 'xAI Grok Beta', provider: 'xAI' }
+      { name: 'grok-beta', label: 'xAI Grok Beta', provider: 'xAI', maxTokenAllowed: 8000 }
    ],
    getApiKeyLink: 'https://docs.x.ai/docs/quickstart#creating-an-api-key'
  }, {
    name: 'Deepseek',
    staticModels: [
-      { name: 'deepseek-coder', label: 'Deepseek-Coder', provider: 'Deepseek' },
-      { name: 'deepseek-chat', label: 'Deepseek-Chat', provider: 'Deepseek' }
+      { name: 'deepseek-coder', label: 'Deepseek-Coder', provider: 'Deepseek', maxTokenAllowed: 8000 },
+      { name: 'deepseek-chat', label: 'Deepseek-Chat', provider: 'Deepseek', maxTokenAllowed: 8000 }
    ],
    getApiKeyLink: 'https://platform.deepseek.com/api_keys'
  }, {
    name: 'Mistral',
    staticModels: [
-      { name: 'open-mistral-7b', label: 'Mistral 7B', provider: 'Mistral' },
-      { name: 'open-mixtral-8x7b', label: 'Mistral 8x7B', provider: 'Mistral' },
-      { name: 'open-mixtral-8x22b', label: 'Mistral 8x22B', provider: 'Mistral' },
-      { name: 'open-codestral-mamba', label: 'Codestral Mamba', provider: 'Mistral' },
-      { name: 'open-mistral-nemo', label: 'Mistral Nemo', provider: 'Mistral' },
-      { name: 'ministral-8b-latest', label: 'Mistral 8B', provider: 'Mistral' },
-      { name: 'mistral-small-latest', label: 'Mistral Small', provider: 'Mistral' },
-      { name: 'codestral-latest', label: 'Codestral', provider: 'Mistral' },
-      { name: 'mistral-large-latest', label: 'Mistral Large Latest', provider: 'Mistral' }
+      { name: 'open-mistral-7b', label: 'Mistral 7B', provider: 'Mistral', maxTokenAllowed: 8000 },
+      { name: 'open-mixtral-8x7b', label: 'Mistral 8x7B', provider: 'Mistral', maxTokenAllowed: 8000 },
+      { name: 'open-mixtral-8x22b', label: 'Mistral 8x22B', provider: 'Mistral', maxTokenAllowed: 8000 },
+      { name: 'open-codestral-mamba', label: 'Codestral Mamba', provider: 'Mistral', maxTokenAllowed: 8000 },
+      { name: 'open-mistral-nemo', label: 'Mistral Nemo', provider: 'Mistral', maxTokenAllowed: 8000 },
+      { name: 'ministral-8b-latest', label: 'Mistral 8B', provider: 'Mistral', maxTokenAllowed: 8000 },
+      { name: 'mistral-small-latest', label: 'Mistral Small', provider: 'Mistral', maxTokenAllowed: 8000 },
+      { name: 'codestral-latest', label: 'Codestral', provider: 'Mistral', maxTokenAllowed: 8000 },
+      { name: 'mistral-large-latest', label: 'Mistral Large Latest', provider: 'Mistral', maxTokenAllowed: 8000 }
    ],
    getApiKeyLink: 'https://console.mistral.ai/api-keys/'
  }, {
@ -148,7 +181,8 @@ async function getOllamaModels(): Promise<ModelInfo[]> {
    return data.models.map((model: OllamaModel) => ({
      name: model.name,
      label: `${model.name} (${model.details.parameter_size})`,
-      provider: 'Ollama'
+      provider: 'Ollama',
+      maxTokenAllowed:8000,
    }));
  } catch (e) {
    return [];
@ -201,8 +235,9 @@ async function getOpenRouterModels(): Promise<ModelInfo[]> {
    name: m.id,
    label: `${m.name} - in:$${(m.pricing.prompt * 1_000_000).toFixed(
      2)} out:$${(m.pricing.completion * 1_000_000).toFixed(2)} - context ${Math.floor(
-      m.context_length / 1000)}k`,
-    provider: 'OpenRouter'
+        m.context_length / 1000)}k`,
+    provider: 'OpenRouter',
+    maxTokenAllowed:8000,
  }));
 }

--- a/app/utils/diff.spec.ts
+++ b/app/utils/diff.spec.ts
@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest';
+import { extractRelativePath } from './diff';
+import { WORK_DIR } from './constants';
+
+describe('Diff', () => {
+  it('should strip out Work_dir', () => {
+    const filePath = `${WORK_DIR}/index.js`;
+    const result = extractRelativePath(filePath);
+    expect(result).toBe('index.js');
+  });
+});
--- a/app/utils/diff.ts
+++ b/app/utils/diff.ts
@ -1,6 +1,6 @@
 import { createTwoFilesPatch } from 'diff';
 import type { FileMap } from '~/lib/stores/files';
-import { MODIFICATIONS_TAG_NAME } from './constants';
+import { MODIFICATIONS_TAG_NAME, WORK_DIR } from './constants';

 export const modificationsRegex = new RegExp(
  `^<${MODIFICATIONS_TAG_NAME}>[\\s\\S]*?<\\/${MODIFICATIONS_TAG_NAME}>\\s+`,
@ -75,6 +75,15 @@ export function diffFiles(fileName: string, oldFileContent: string, newFileConte
  return unifiedDiff;
 }

+const regex = new RegExp(`^${WORK_DIR}\/`);
+
+/**
+ * Strips out the work directory from the file path.
+ */
+export function extractRelativePath(filePath: string) {
+  return filePath.replace(regex, '');
+}
+
 /**
 * Converts the unified diff to HTML.
 *
--- a/app/utils/types.ts
+++ b/app/utils/types.ts
@ -25,6 +25,7 @@ export interface ModelInfo {
  name: string;
  label: string;
  provider: string;
+  maxTokenAllowed: number;
 }

 export interface ProviderInfo {
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@ -14,6 +14,7 @@ services:
      # No strictly neded but serving as hints for Coolify
      - PORT=5173
      - GROQ_API_KEY=${GROQ_API_KEY}
+      - HuggingFace_API_KEY=${HuggingFace_API_KEY}
      - OPENAI_API_KEY=${OPENAI_API_KEY}
      - ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY}
      - OPEN_ROUTER_API_KEY=${OPEN_ROUTER_API_KEY}
@ -41,6 +42,7 @@ services:
      - WATCHPACK_POLLING=true  
      - PORT=5173
      - GROQ_API_KEY=${GROQ_API_KEY}
+      - HuggingFace_API_KEY=${HuggingFace_API_KEY}
      - OPENAI_API_KEY=${OPENAI_API_KEY}
      - ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY}
      - OPEN_ROUTER_API_KEY=${OPEN_ROUTER_API_KEY}
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@ -4,7 +4,7 @@ import { getNamingConventionRule, tsFileExtensions } from '@blitz/eslint-plugin/

 export default [
  {
-    ignores: ['**/dist', '**/node_modules', '**/.wrangler', '**/bolt/build'],
+    ignores: ['**/dist', '**/node_modules', '**/.wrangler', '**/bolt/build', '**/.history'],
  },
  ...blitzPlugin.configs.recommended(),
  {
--- a/package.json
+++ b/package.json
@ -27,6 +27,7 @@
  },
  "dependencies": {
    "@ai-sdk/anthropic": "^0.0.39",
+    "@ai-sdk/cohere": "^1.0.1",
    "@ai-sdk/google": "^0.0.52",
    "@ai-sdk/mistral": "^0.0.43",
    "@ai-sdk/openai": "^0.0.66",
@ -54,6 +55,7 @@
    "@openrouter/ai-sdk-provider": "^0.0.5",
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-tooltip": "^1.1.4",
    "@remix-run/cloudflare": "^2.10.2",
    "@remix-run/cloudflare-pages": "^2.10.2",
    "@remix-run/react": "^2.10.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -14,6 +14,9 @@ importers:
      '@ai-sdk/anthropic':
        specifier: ^0.0.39
        version: 0.0.39(zod@3.23.8)
+      '@ai-sdk/cohere':
+        specifier: ^1.0.1
+        version: 1.0.1(zod@3.23.8)
      '@ai-sdk/google':
        specifier: ^0.0.52
        version: 0.0.52(zod@3.23.8)
@ -95,6 +98,9 @@ importers:
      '@radix-ui/react-dropdown-menu':
        specifier: ^2.1.1
        version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.1.4
+        version: 1.1.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      '@remix-run/cloudflare':
        specifier: ^2.10.2
        version: 2.10.2(@cloudflare/workers-types@4.20240620.0)(typescript@5.5.2)
@ -276,6 +282,12 @@ packages:
    peerDependencies:
      zod: ^3.0.0

+  '@ai-sdk/cohere@1.0.1':
+    resolution: {integrity: sha512-xLaSYl/hs9EqfpvT9PvqZrDWjJPQPZBd0iT32T6812vN6kwuEQ6sSgQvqHWczIqxeej2GNRgMQwDL6Lh0L5pZw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.0.0
+
  '@ai-sdk/google@0.0.52':
    resolution: {integrity: sha512-bfsA/1Ae0SQ6NfLwWKs5SU4MBwlzJjVhK6bTVBicYFjUxg9liK/W76P1Tq/qK9OlrODACz3i1STOIWsFPpIOuQ==}
    engines: {node: '>=18'}
@ -321,6 +333,15 @@ packages:
      zod:
        optional: true

+  '@ai-sdk/provider-utils@2.0.1':
+    resolution: {integrity: sha512-TNg7rPhRtETB2Z9F0JpOvpGii9Fs8EWM8nYy1jEkvSXkrPJ6b/9zVnDdaJsmLFDyrMbOsPJlkblYtmYEQou36w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.0.0
+    peerDependenciesMeta:
+      zod:
+        optional: true
+
  '@ai-sdk/provider@0.0.12':
    resolution: {integrity: sha512-oOwPQD8i2Ynpn22cur4sk26FW3mSy6t6/X/K1Ay2yGBKYiSpRyLfObhOrZEGsXDx+3euKy4nEZ193R36NM+tpQ==}
    engines: {node: '>=18'}
@ -333,6 +354,10 @@ packages:
    resolution: {integrity: sha512-XMsNGJdGO+L0cxhhegtqZ8+T6nn4EoShS819OvCgI2kLbYTIvk0GWFGD0AXJmxkxs3DrpsJxKAFukFR7bvTkgQ==}
    engines: {node: '>=18'}

+  '@ai-sdk/provider@1.0.0':
+    resolution: {integrity: sha512-Sj29AzooJ7SYvhPd+AAWt/E7j63E9+AzRnoMHUaJPRYzOd/WDrVNxxv85prF9gDcQ7XPVlSk9j6oAZV9/DXYpA==}
+    engines: {node: '>=18'}
+
  '@ai-sdk/react@0.0.62':
    resolution: {integrity: sha512-1asDpxgmeHWL0/EZPCLENxfOHT+0jce0z/zasRhascodm2S6f6/KZn5doLG9jdmarcb+GjMjFmmwyOVXz3W1xg==}
    engines: {node: '>=18'}
@ -1377,6 +1402,15 @@ packages:
      '@types/react':
        optional: true

+  '@radix-ui/react-context@1.1.1':
+    resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
  '@radix-ui/react-dialog@1.1.1':
    resolution: {integrity: sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==}
    peerDependencies:
@ -1412,6 +1446,19 @@ packages:
      '@types/react-dom':
        optional: true

+  '@radix-ui/react-dismissable-layer@1.1.1':
+    resolution: {integrity: sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-dropdown-menu@2.1.1':
    resolution: {integrity: sha512-y8E+x9fBq9qvteD2Zwa4397pUVhYsh9iq44b5RD5qu1GMJWBCBuVg1hMyItbc6+zH00TxGRqd9Iot4wzf3OoBQ==}
    peerDependencies:
@ -1495,6 +1542,19 @@ packages:
      '@types/react-dom':
        optional: true

+  '@radix-ui/react-portal@1.1.2':
+    resolution: {integrity: sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-presence@1.1.0':
    resolution: {integrity: sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==}
    peerDependencies:
@ -1508,6 +1568,19 @@ packages:
      '@types/react-dom':
        optional: true

+  '@radix-ui/react-presence@1.1.1':
+    resolution: {integrity: sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-primitive@2.0.0':
    resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
    peerDependencies:
@ -1543,6 +1616,19 @@ packages:
      '@types/react':
        optional: true

+  '@radix-ui/react-tooltip@1.1.4':
+    resolution: {integrity: sha512-QpObUH/ZlpaO4YgHSaYzrLO2VuO+ZBFFgGzjMUPwtiYnAzzNNDPJeEGRrT7qNOrWm/Jr08M1vlp+vTHtnSQ0Uw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-use-callback-ref@1.1.0':
    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
    peerDependencies:
@ -1597,6 +1683,19 @@ packages:
      '@types/react':
        optional: true

+  '@radix-ui/react-visually-hidden@1.1.0':
+    resolution: {integrity: sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/rect@1.1.0':
    resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}

@ -2956,6 +3055,10 @@ packages:
    resolution: {integrity: sha512-v0eOBUbiaFojBu2s2NPBfYUoRR9GjcDNvCXVaqEf5vVfpIAh9f8RCo4vXTP8c63QRKCFwoLpMpTdPwwhEKVgzA==}
    engines: {node: '>=14.18'}

+  eventsource-parser@3.0.0:
+    resolution: {integrity: sha512-T1C0XCUimhxVQzW4zFipdx0SficT651NnkR0ZSH3yQwh+mFMdLfgjABVi4YtMTtaL4s168593DaoaRLMqryavA==}
+    engines: {node: '>=18.0.0'}
+
  evp_bytestokey@1.0.3:
    resolution: {integrity: sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==}

@ -5610,6 +5713,12 @@ snapshots:
      '@ai-sdk/provider-utils': 1.0.9(zod@3.23.8)
      zod: 3.23.8

+  '@ai-sdk/cohere@1.0.1(zod@3.23.8)':
+    dependencies:
+      '@ai-sdk/provider': 1.0.0
+      '@ai-sdk/provider-utils': 2.0.1(zod@3.23.8)
+      zod: 3.23.8
+
  '@ai-sdk/google@0.0.52(zod@3.23.8)':
    dependencies:
      '@ai-sdk/provider': 0.0.24
@ -5656,6 +5765,15 @@ snapshots:
    optionalDependencies:
      zod: 3.23.8

+  '@ai-sdk/provider-utils@2.0.1(zod@3.23.8)':
+    dependencies:
+      '@ai-sdk/provider': 1.0.0
+      eventsource-parser: 3.0.0
+      nanoid: 3.3.7
+      secure-json-parse: 2.7.0
+    optionalDependencies:
+      zod: 3.23.8
+
  '@ai-sdk/provider@0.0.12':
    dependencies:
      json-schema: 0.4.0
@ -5668,6 +5786,10 @@ snapshots:
    dependencies:
      json-schema: 0.4.0

+  '@ai-sdk/provider@1.0.0':
+    dependencies:
+      json-schema: 0.4.0
+
  '@ai-sdk/react@0.0.62(react@18.3.1)(zod@3.23.8)':
    dependencies:
      '@ai-sdk/provider-utils': 1.0.20(zod@3.23.8)
@ -6712,6 +6834,12 @@ snapshots:
    optionalDependencies:
      '@types/react': 18.3.3

+  '@radix-ui/react-context@1.1.1(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
  '@radix-ui/react-dialog@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.0
@ -6753,6 +6881,19 @@ snapshots:
      '@types/react': 18.3.3
      '@types/react-dom': 18.3.0

+  '@radix-ui/react-dismissable-layer@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
  '@radix-ui/react-dropdown-menu@2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.0
@ -6846,6 +6987,16 @@ snapshots:
      '@types/react': 18.3.3
      '@types/react-dom': 18.3.0

+  '@radix-ui/react-portal@1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
  '@radix-ui/react-presence@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
    dependencies:
      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
@ -6856,6 +7007,16 @@ snapshots:
      '@types/react': 18.3.3
      '@types/react-dom': 18.3.0

+  '@radix-ui/react-presence@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
  '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
    dependencies:
      '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1)
@ -6889,6 +7050,26 @@ snapshots:
    optionalDependencies:
      '@types/react': 18.3.3

+  '@radix-ui/react-tooltip@1.1.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.3)(react@18.3.1)':
    dependencies:
      react: 18.3.1
@ -6929,6 +7110,15 @@ snapshots:
    optionalDependencies:
      '@types/react': 18.3.3

+  '@radix-ui/react-visually-hidden@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
  '@radix-ui/rect@1.1.0': {}

  '@remix-run/cloudflare-pages@2.10.2(@cloudflare/workers-types@4.20240620.0)(typescript@5.5.2)':
@ -8606,6 +8796,8 @@ snapshots:

  eventsource-parser@1.1.2: {}

+  eventsource-parser@3.0.0: {}
+
  evp_bytestokey@1.0.3:
    dependencies:
      md5.js: 1.3.5
--- a/worker-configuration.d.ts
+++ b/worker-configuration.d.ts
@ -2,6 +2,7 @@ interface Env {
  ANTHROPIC_API_KEY: string;
  OPENAI_API_KEY: string;
  GROQ_API_KEY: string;
+  HuggingFace_API_KEY: string;
  OPEN_ROUTER_API_KEY: string;
  OLLAMA_API_BASE_URL: string;
  OPENAI_LIKE_API_KEY: string;