Merge branch 'feat/improve-search-architecture' of https://github.com/ItzCrazyKns/Perplexica into feat/improve-search-architecture

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

CONTRIBUTING.md

@@ -11,33 +11,63 @@ Perplexica's codebase is organized as follows:
 - **UI Components and Pages**:
   - **Components (`src/components`)**: Reusable UI components.
   - **Pages and Routes (`src/app`)**: Next.js app directory structure with page components.
-    - Main app routes include: home (`/`), chat (`/c`), discover (`/discover`), library (`/library`), and settings (`/settings`).
-  - **API Routes (`src/app/api`)**: API endpoints implemented with Next.js API routes.
-    - `/api/chat`: Handles chat interactions.
-    - `/api/search`: Provides direct access to Perplexica's search capabilities.
-    - Other endpoints for models, files, and suggestions.
+    - Main app routes include: home (`/`), chat (`/c`), discover (`/discover`), and library (`/library`).
+  - **API Routes (`src/app/api`)**: Server endpoints implemented with Next.js route handlers.
 - **Backend Logic (`src/lib`)**: Contains all the backend functionality including search, database, and API logic.
-  - The search functionality is present inside `src/lib/search` directory.
-  - All of the focus modes are implemented using the Meta Search Agent class in `src/lib/search/metaSearchAgent.ts`.
+  - The search system lives in `src/lib/agents/search`.
+  - The search pipeline is split into classification, research, widgets, and writing.
   - Database functionality is in `src/lib/db`.
-  - Chat model and embedding model providers are managed in `src/lib/providers`.
-  - Prompt templates and LLM chain definitions are in `src/lib/prompts` and `src/lib/chains` respectively.
+  - Chat model and embedding model providers are in `src/lib/models/providers`, and models are loaded via `src/lib/models/registry.ts`.
+  - Prompt templates are in `src/lib/prompts`.
+  - SearXNG integration is in `src/lib/searxng.ts`.
+  - Upload search lives in `src/lib/uploads`.
+
+### Where to make changes
+
+If you are not sure where to start, use this section as a map.
+
+- **Search behavior and reasoning**
+
+  - `src/lib/agents/search` contains the core chat and search pipeline.
+  - `classifier.ts` decides whether research is needed and what should run.
+  - `researcher/` gathers information in the background.
+
+- **Add or change a search capability**
+
+  - Research tools (web, academic, discussions, uploads, scraping) live in `src/lib/agents/search/researcher/actions`.
+  - Tools are registered in `src/lib/agents/search/researcher/actions/index.ts`.
+
+- **Add or change widgets**
+
+  - Widgets live in `src/lib/agents/search/widgets`.
+  - Widgets run in parallel with research and show structured results in the UI.
+
+- **Model integrations**
+
+  - Providers live in `src/lib/models/providers`.
+  - Add new providers there and wire them into the model registry so they show up in the app.
+
+- **Architecture docs**
+  - High level overview: `docs/architecture/README.md`
+  - High level flow: `docs/architecture/WORKING.md`
 
 ## API Documentation
 
-Perplexica exposes several API endpoints for programmatic access, including:
+Perplexica includes API documentation for programmatic access.
 
-- **Search API**: Access Perplexica's advanced search capabilities directly via the `/api/search` endpoint. For detailed documentation, see `docs/api/search.md`.
+- **Search API**: For detailed documentation, see `docs/API/SEARCH.md`.
 
 ## Setting Up Your Environment
 
 Before diving into coding, setting up your local environment is key. Here's what you need to do:
 
-1. In the root directory, locate the `sample.config.toml` file.
-2. Rename it to `config.toml` and fill in the necessary configuration fields.
-3. Run `npm install` to install all dependencies.
-4. Run `npm run db:migrate` to set up the local sqlite database.
-5. Use `npm run dev` to start the application in development mode.
+1. Run `npm install` to install all dependencies.
+2. Use `npm run dev` to start the application in development mode.
+3. Open http://localhost:3000 and complete the setup in the UI (API keys, models, search backend URL, etc.).
+
+Database migrations are applied automatically on startup.
+
+For full installation options (Docker and non Docker), see the installation guide in the repository README.
 
 **Please note**: Docker configurations are present for setting up production environments, whereas `npm run dev` is used for development purposes.
 

README.md

@@ -18,9 +18,11 @@ Want to know more about its architecture and how it works? You can read it [here
 
 🤖 **Support for all major AI providers** - Use local LLMs through Ollama or connect to OpenAI, Anthropic Claude, Google Gemini, Groq, and more. Mix and match models based on your needs.
 
-⚡ **Smart search modes** - Choose Balanced Mode for everyday searches, Fast Mode when you need quick answers, or wait for Quality Mode (coming soon) for deep research.
+⚡ **Smart search modes** - Choose Speed Mode when you need quick answers, Balanced Mode for everyday searches, or Quality Mode for deep research.
 
-🎯 **Six specialized focus modes** - Get better results with modes designed for specific tasks: Academic papers, YouTube videos, Reddit discussions, Wolfram Alpha calculations, writing assistance, or general web search.
+🧭 **Pick your sources** - Search the web, discussions, or academic papers. More sources and integrations are in progress.
+
+🧩 **Widgets** - Helpful UI cards that show up when relevant, like weather, calculations, stock prices, and other quick lookups.
 
 🔍 **Web search powered by SearxNG** - Access multiple search engines while keeping your identity private. Support for Tavily and Exa coming soon for even better results.
 
@@ -61,9 +63,9 @@ We'd also like to thank the following partners for their generous support:
 
 <table>
   <tr>
-    <td>
+    <td width="100" align="center">
       <a href="https://dashboard.exa.ai" target="_blank">
-        <img src=".assets/sponsers/exa.png" alt="Exa" style="max-width: 8rem; max-height: 8rem; border-radius: .75rem;" />
+        <img src=".assets/sponsers/exa.png" alt="Exa" width="80" height="80" style="border-radius: .75rem;" />
       </a>
     </td>
     <td>
@@ -81,7 +83,7 @@ There are mainly 2 ways of installing Perplexica - With Docker, Without Docker.
 Perplexica can be easily run using Docker. Simply run the following command:
 
 ```bash
-docker run -d -p 3000:3000 -v perplexica-data:/home/perplexica/data -v perplexica-uploads:/home/perplexica/uploads --name perplexica itzcrazykns1337/perplexica:latest
+docker run -d -p 3000:3000 -v perplexica-data:/home/perplexica/data --name perplexica itzcrazykns1337/perplexica:latest
 ```
 
 This will pull and start the Perplexica container with the bundled SearxNG search engine. Once running, open your browser and navigate to http://localhost:3000. You can then configure your settings (API keys, models, etc.) directly in the setup screen.
@@ -93,7 +95,7 @@ This will pull and start the Perplexica container with the bundled SearxNG searc
 If you already have SearxNG running, you can use the slim version of Perplexica:
 
 ```bash
-docker run -d -p 3000:3000 -e SEARXNG_API_URL=http://your-searxng-url:8080 -v perplexica-data:/home/perplexica/data -v perplexica-uploads:/home/perplexica/uploads --name perplexica itzcrazykns1337/perplexica:slim-latest
+docker run -d -p 3000:3000 -e SEARXNG_API_URL=http://your-searxng-url:8080 -v perplexica-data:/home/perplexica/data --name perplexica itzcrazykns1337/perplexica:slim-latest
 ```
 
 **Important**: Make sure your SearxNG instance has:
@@ -120,7 +122,7 @@ If you prefer to build from source or need more control:
 
    ```bash
    docker build -t perplexica .
-   docker run -d -p 3000:3000 -v perplexica-data:/home/perplexica/data -v perplexica-uploads:/home/perplexica/uploads --name perplexica perplexica
+   docker run -d -p 3000:3000 -v perplexica-data:/home/perplexica/data --name perplexica perplexica
    ```
 
 5. Access Perplexica at http://localhost:3000 and configure your settings in the setup screen.
@@ -237,13 +239,8 @@ Perplexica runs on Next.js and handles all API requests. It works right away on
 
 ## Upcoming Features
 
-- [x] Add settings page
-- [x] Adding support for local LLMs
-- [x] History Saving features
-- [x] Introducing various Focus Modes
-- [x] Adding API support
-- [x] Adding Discover
-- [ ] Finalizing Copilot Mode
+- [] Adding more widgets, integrations, search sources
+- [] Adding authentication
 
 ## Support Us
 

docker-compose.yaml

@@ -1,6 +1,8 @@
 services:
   perplexica:
     image: itzcrazykns1337/perplexica:latest
+    build:
+      context: .
     ports:
       - '3000:3000'
     volumes:

docs/API/SEARCH.md

@@ -57,7 +57,7 @@ Use the `id` field as the `providerId` and the `key` field from the models array
 
 ### Request
 
-The API accepts a JSON object in the request body, where you define the focus mode, chat models, embedding models, and your query.
+The API accepts a JSON object in the request body, where you define the enabled search `sources`, chat models, embedding models, and your query.
 
 #### Request Body Structure
 
@@ -72,7 +72,7 @@ The API accepts a JSON object in the request body, where you define the focus mo
     "key": "text-embedding-3-large"
   },
   "optimizationMode": "speed",
-  "focusMode": "webSearch",
+  "sources": ["web"],
   "query": "What is Perplexica",
   "history": [
     ["human", "Hi, how are you?"],
@@ -87,24 +87,25 @@ The API accepts a JSON object in the request body, where you define the focus mo
 
 ### Request Parameters
 
-- **`chatModel`** (object, optional): Defines the chat model to be used for the query. To get available providers and models, send a GET request to `http://localhost:3000/api/providers`.
+- **`chatModel`** (object, required): Defines the chat model to be used for the query. To get available providers and models, send a GET request to `http://localhost:3000/api/providers`.
 
   - `providerId` (string): The UUID of the provider. You can get this from the `/api/providers` endpoint response.
   - `key` (string): The model key/identifier (e.g., `gpt-4o-mini`, `llama3.1:latest`). Use the `key` value from the provider's `chatModels` array, not the display name.
 
-- **`embeddingModel`** (object, optional): Defines the embedding model for similarity-based searching. To get available providers and models, send a GET request to `http://localhost:3000/api/providers`.
+- **`embeddingModel`** (object, required): Defines the embedding model for similarity-based searching. To get available providers and models, send a GET request to `http://localhost:3000/api/providers`.
 
   - `providerId` (string): The UUID of the embedding provider. You can get this from the `/api/providers` endpoint response.
   - `key` (string): The embedding model key (e.g., `text-embedding-3-large`, `nomic-embed-text`). Use the `key` value from the provider's `embeddingModels` array, not the display name.
 
-- **`focusMode`** (string, required): Specifies which focus mode to use. Available modes:
+- **`sources`** (array, required): Which search sources to enable. Available values:
 
-  - `webSearch`, `academicSearch`, `writingAssistant`, `wolframAlphaSearch`, `youtubeSearch`, `redditSearch`.
+  - `web`, `academic`, `discussions`.
 
 - **`optimizationMode`** (string, optional): Specifies the optimization mode to control the balance between performance and quality. Available modes:
 
   - `speed`: Prioritize speed and return the fastest answer.
   - `balanced`: Provide a balanced answer with good speed and reasonable quality.
+  - `quality`: Prioritize answer quality (may be slower).
 
 - **`query`** (string, required): The search query or question.
 
@@ -132,14 +133,14 @@ The response from the API includes both the final message and the sources used t
   "message": "Perplexica is an innovative, open-source AI-powered search engine designed to enhance the way users search for information online. Here are some key features and characteristics of Perplexica:\n\n- **AI-Powered Technology**: It utilizes advanced machine learning algorithms to not only retrieve information but also to understand the context and intent behind user queries, providing more relevant results [1][5].\n\n- **Open-Source**: Being open-source, Perplexica offers flexibility and transparency, allowing users to explore its functionalities without the constraints of proprietary software [3][10].",
   "sources": [
     {
-      "pageContent": "Perplexica is an innovative, open-source AI-powered search engine designed to enhance the way users search for information online.",
+      "content": "Perplexica is an innovative, open-source AI-powered search engine designed to enhance the way users search for information online.",
       "metadata": {
         "title": "What is Perplexica, and how does it function as an AI-powered search ...",
         "url": "https://askai.glarity.app/search/What-is-Perplexica--and-how-does-it-function-as-an-AI-powered-search-engine"
       }
     },
     {
-      "pageContent": "Perplexica is an open-source AI-powered search tool that dives deep into the internet to find precise answers.",
+      "content": "Perplexica is an open-source AI-powered search tool that dives deep into the internet to find precise answers.",
       "metadata": {
         "title": "Sahar Mor's Post",
         "url": "https://www.linkedin.com/posts/sahar-mor_a-new-open-source-project-called-perplexica-activity-7204489745668694016-ncja"
@@ -158,7 +159,7 @@ Example of streamed response objects:
 
 ```
 {"type":"init","data":"Stream connected"}
-{"type":"sources","data":[{"pageContent":"...","metadata":{"title":"...","url":"..."}},...]}
+{"type":"sources","data":[{"content":"...","metadata":{"title":"...","url":"..."}},...]}
 {"type":"response","data":"Perplexica is an "}
 {"type":"response","data":"innovative, open-source "}
 {"type":"response","data":"AI-powered search engine..."}
@@ -174,9 +175,9 @@ Clients should process each line as a separate JSON object. The different messag
 
 ### Fields in the Response
 
-- **`message`** (string): The search result, generated based on the query and focus mode.
+- **`message`** (string): The search result, generated based on the query and enabled `sources`.
 - **`sources`** (array): A list of sources that were used to generate the search result. Each source includes:
-  - `pageContent`: A snippet of the relevant content from the source.
+  - `content`: A snippet of the relevant content from the source.
   - `metadata`: Metadata about the source, including:
     - `title`: The title of the webpage.
     - `url`: The URL of the webpage.
@@ -185,5 +186,5 @@ Clients should process each line as a separate JSON object. The different messag
 
 If an error occurs during the search process, the API will return an appropriate error message with an HTTP status code.
 
-- **400**: If the request is malformed or missing required fields (e.g., no focus mode or query).
+- **400**: If the request is malformed or missing required fields (e.g., no `sources` or `query`).
 - **500**: If an internal server error occurs during the search.

docs/architecture/README.md

@@ -1,11 +1,38 @@
-# Perplexica's Architecture
+# Perplexica Architecture
 
-Perplexica's architecture consists of the following key components:
+Perplexica is a Next.js application that combines an AI chat experience with search.
 
-1. **User Interface**: A web-based interface that allows users to interact with Perplexica for searching images, videos, and much more.
-2. **Agent/Chains**: These components predict Perplexica's next actions, understand user queries, and decide whether a web search is necessary.
-3. **SearXNG**: A metadata search engine used by Perplexica to search the web for sources.
-4. **LLMs (Large Language Models)**: Utilized by agents and chains for tasks like understanding content, writing responses, and citing sources. Examples include Claude, GPTs, etc.
-5. **Embedding Models**: To improve the accuracy of search results, embedding models re-rank the results using similarity search algorithms such as cosine similarity and dot product distance.
+For a high level flow, see [WORKING.md](WORKING.md). For deeper implementation details, see [CONTRIBUTING.md](../../CONTRIBUTING.md).
 
-For a more detailed explanation of how these components work together, see [WORKING.md](https://github.com/ItzCrazyKns/Perplexica/tree/master/docs/architecture/WORKING.md).
+## Key components
+
+1. **User Interface**
+
+   - A web based UI that lets users chat, search, and view citations.
+
+2. **API Routes**
+
+   - `POST /api/chat` powers the chat UI.
+   - `POST /api/search` provides a programmatic search endpoint.
+   - `GET /api/providers` lists available providers and model keys.
+
+3. **Agents and Orchestration**
+
+   - The system classifies the question first.
+   - It can run research and widgets in parallel.
+   - It generates the final answer and includes citations.
+
+4. **Search Backend**
+
+   - A meta search backend is used to fetch relevant web results when research is enabled.
+
+5. **LLMs (Large Language Models)**
+
+   - Used for classification, writing answers, and producing citations.
+
+6. **Embedding Models**
+
+   - Used for semantic search over user uploaded files.
+
+7. **Storage**
+   - Chats and messages are stored so conversations can be reloaded.

docs/architecture/WORKING.md

@@ -1,19 +1,72 @@
-# How does Perplexica work?
+# How Perplexica Works
 
-Curious about how Perplexica works? Don't worry, we'll cover it here. Before we begin, make sure you've read about the architecture of Perplexica to ensure you understand what it's made up of. Haven't read it? You can read it [here](https://github.com/ItzCrazyKns/Perplexica/tree/master/docs/architecture/README.md).
+This is a high level overview of how Perplexica answers a question.
 
-We'll understand how Perplexica works by taking an example of a scenario where a user asks: "How does an A.C. work?". We'll break down the process into steps to make it easier to understand. The steps are as follows:
+If you want a component level overview, see [README.md](README.md).
 
-1. The message is sent to the `/api/chat` route where it invokes the chain. The chain will depend on your focus mode. For this example, let's assume we use the "webSearch" focus mode.
-2. The chain is now invoked; first, the message is passed to another chain where it first predicts (using the chat history and the question) whether there is a need for sources and searching the web. If there is, it will generate a query (in accordance with the chat history) for searching the web that we'll take up later. If not, the chain will end there, and then the answer generator chain, also known as the response generator, will be started.
-3. The query returned by the first chain is passed to SearXNG to search the web for information.
-4. After the information is retrieved, it is based on keyword-based search. We then convert the information into embeddings and the query as well, then we perform a similarity search to find the most relevant sources to answer the query.
-5. After all this is done, the sources are passed to the response generator. This chain takes all the chat history, the query, and the sources. It generates a response that is streamed to the UI.
+If you want implementation details, see [CONTRIBUTING.md](../../CONTRIBUTING.md).
 
-## How are the answers cited?
+## What happens when you ask a question
 
-The LLMs are prompted to do so. We've prompted them so well that they cite the answers themselves, and using some UI magic, we display it to the user.
+When you send a message in the UI, the app calls `POST /api/chat`.
 
-## Image and Video Search
+At a high level, we do three things:
 
-Image and video searches are conducted in a similar manner. A query is always generated first, then we search the web for images and videos that match the query. These results are then returned to the user.
+1. Classify the question and decide what to do next.
+2. Run research and widgets in parallel.
+3. Write the final answer and include citations.
+
+## Classification
+
+Before searching or answering, we run a classification step.
+
+This step decides things like:
+
+- Whether we should do research for this question
+- Whether we should show any widgets
+- How to rewrite the question into a clearer standalone form
+
+## Widgets
+
+Widgets are small, structured helpers that can run alongside research.
+
+Examples include weather, stocks, and simple calculations.
+
+If a widget is relevant, we show it in the UI while the answer is still being generated.
+
+Widgets are helpful context for the answer, but they are not part of what the model should cite.
+
+## Research
+
+If research is needed, we gather information in the background while widgets can run.
+
+Depending on configuration, research may include web lookup and searching user uploaded files.
+
+## Answer generation
+
+Once we have enough context, the chat model generates the final response.
+
+You can control the tradeoff between speed and quality using `optimizationMode`:
+
+- `speed`
+- `balanced`
+- `quality`
+
+## How citations work
+
+We prompt the model to cite the references it used. The UI then renders those citations alongside the supporting links.
+
+## Search API
+
+If you are integrating Perplexica into another product, you can call `POST /api/search`.
+
+It returns:
+
+- `message`: the generated answer
+- `sources`: supporting references used for the answer
+
+You can also enable streaming by setting `stream: true`.
+
+## Image and video search
+
+Image and video search use separate endpoints (`POST /api/images` and `POST /api/videos`). We generate a focused query using the chat model, then fetch matching results from a search backend.

docs/installation/UPDATING.md

@@ -10,7 +10,7 @@ Simply pull the latest image and restart your container:
 docker pull itzcrazykns1337/perplexica:latest
 docker stop perplexica
 docker rm perplexica
-docker run -d -p 3000:3000 -v perplexica-data:/home/perplexica/data -v perplexica-uploads:/home/perplexica/uploads --name perplexica itzcrazykns1337/perplexica:latest
+docker run -d -p 3000:3000 -v perplexica-data:/home/perplexica/data --name perplexica itzcrazykns1337/perplexica:latest
 ```
 
 For slim version:
@@ -19,7 +19,7 @@ For slim version:
 docker pull itzcrazykns1337/perplexica:slim-latest
 docker stop perplexica
 docker rm perplexica
-docker run -d -p 3000:3000 -e SEARXNG_API_URL=http://your-searxng-url:8080 -v perplexica-data:/home/perplexica/data -v perplexica-uploads:/home/perplexica/uploads --name perplexica itzcrazykns1337/perplexica:slim-latest
+docker run -d -p 3000:3000 -e SEARXNG_API_URL=http://your-searxng-url:8080 -v perplexica-data:/home/perplexica/data --name perplexica itzcrazykns1337/perplexica:slim-latest
 ```
 
 Once updated, go to http://localhost:3000 and verify the latest changes. Your settings are preserved automatically.

drizzle/0002_daffy_wrecker.sql

@@ -1,15 +1 @@
-PRAGMA foreign_keys=OFF;--> statement-breakpoint
-CREATE TABLE `__new_messages` (
-	`id` integer PRIMARY KEY NOT NULL,
-	`messageId` text NOT NULL,
-	`chatId` text NOT NULL,
-	`backendId` text NOT NULL,
-	`query` text NOT NULL,
-	`createdAt` text NOT NULL,
-	`responseBlocks` text DEFAULT '[]',
-	`status` text DEFAULT 'answering'
-);
---> statement-breakpoint
-DROP TABLE `messages`;--> statement-breakpoint
-ALTER TABLE `__new_messages` RENAME TO `messages`;--> statement-breakpoint
-PRAGMA foreign_keys=ON;
+/* do nothing */

drizzle/meta/0002_snapshot.json

@@ -28,8 +28,8 @@
           "notNull": true,
           "autoincrement": false
         },
-        "focusMode": {
-          "name": "focusMode",
+        "sources": {
+          "name": "sources",
           "type": "text",
           "primaryKey": false,
           "notNull": true,

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.mjs

@@ -1,3 +1,5 @@
+import pkg from './package.json' with { type: 'json' };
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'standalone',
@@ -9,6 +11,9 @@ const nextConfig = {
     ],
   },
   serverExternalPackages: ['pdf-parse'],
+  env: {
+    NEXT_PUBLIC_VERSION: pkg.version,
+  },
 };
 
 export default nextConfig;

package.json

@@ -11,61 +11,55 @@
     "format:write": "prettier . --write"
   },
   "dependencies": {
+    "@google/genai": "^1.34.0",
     "@headlessui/react": "^2.2.0",
     "@headlessui/tailwindcss": "^0.2.2",
-    "@huggingface/transformers": "^3.7.5",
-    "@iarna/toml": "^2.2.5",
+    "@huggingface/transformers": "^3.8.1",
     "@icons-pack/react-simple-icons": "^12.3.0",
-    "@langchain/anthropic": "^1.0.1",
-    "@langchain/community": "^1.0.3",
-    "@langchain/core": "^1.0.5",
-    "@langchain/google-genai": "^1.0.1",
-    "@langchain/groq": "^1.0.1",
-    "@langchain/langgraph": "^1.0.1",
-    "@langchain/ollama": "^1.0.1",
-    "@langchain/openai": "^1.1.1",
-    "@langchain/textsplitters": "^1.0.0",
+    "@phosphor-icons/react": "^2.1.10",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/typography": "^0.5.12",
+    "@types/jspdf": "^2.0.0",
     "axios": "^1.8.3",
     "better-sqlite3": "^11.9.1",
     "clsx": "^2.1.0",
-    "compute-cosine-similarity": "^1.1.0",
     "drizzle-orm": "^0.40.1",
-    "framer-motion": "^12.23.24",
-    "html-to-text": "^9.0.5",
-    "jspdf": "^3.0.1",
-    "langchain": "^1.0.4",
+    "js-tiktoken": "^1.0.21",
+    "jspdf": "^3.0.4",
     "lightweight-charts": "^5.0.9",
-    "lucide-react": "^0.363.0",
+    "lucide-react": "^0.556.0",
     "mammoth": "^1.9.1",
     "markdown-to-jsx": "^7.7.2",
     "mathjs": "^15.1.0",
-    "next": "^15.2.2",
+    "motion": "^12.23.26",
+    "next": "^16.0.7",
     "next-themes": "^0.3.0",
+    "officeparser": "^5.2.2",
     "ollama": "^0.6.3",
     "openai": "^6.9.0",
     "partial-json": "^0.1.7",
-    "pdf-parse": "^1.1.1",
+    "pdf-parse": "^2.4.5",
     "react": "^18",
     "react-dom": "^18",
+    "react-syntax-highlighter": "^16.1.0",
     "react-text-to-speech": "^0.14.5",
     "react-textarea-autosize": "^8.5.3",
     "rfc6902": "^5.1.2",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.2",
-    "winston": "^3.17.0",
+    "turndown": "^7.2.2",
     "yahoo-finance2": "^3.10.2",
     "yet-another-react-lightbox": "^3.17.2",
     "zod": "^4.1.12"
   },
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.12",
-    "@types/html-to-text": "^9.0.4",
-    "@types/jspdf": "^2.0.0",
     "@types/node": "^24.8.1",
     "@types/pdf-parse": "^1.1.4",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/turndown": "^5.0.6",
     "autoprefixer": "^10.0.1",
     "drizzle-kit": "^0.30.5",
     "eslint": "^8",

src/app/api/chat/route.ts

@@ -1,10 +1,14 @@
-import crypto from 'crypto';
 import { z } from 'zod';
 import ModelRegistry from '@/lib/models/registry';
 import { ModelWithProvider } from '@/lib/models/types';
 import SearchAgent from '@/lib/agents/search';
 import SessionManager from '@/lib/session';
 import { ChatTurnMessage } from '@/lib/types';
+import { SearchSources } from '@/lib/agents/search/types';
+import db from '@/lib/db';
+import { eq } from 'drizzle-orm';
+import { chats } from '@/lib/db/schema';
+import UploadManager from '@/lib/uploads/manager';
 
 export const runtime = 'nodejs';
 export const dynamic = 'force-dynamic';
@@ -32,7 +36,7 @@ const bodySchema = z.object({
   optimizationMode: z.enum(['speed', 'balanced', 'quality'], {
     message: 'Optimization mode must be one of: speed, balanced, quality',
   }),
-  focusMode: z.string().min(1, 'Focus mode is required'),
+  sources: z.array(z.string()).optional().default([]),
   history: z
     .array(z.tuple([z.string(), z.string()]))
     .optional()
@@ -43,7 +47,6 @@ const bodySchema = z.object({
   systemInstructions: z.string().nullable().optional().default(''),
 });
 
-type Message = z.infer<typeof messageSchema>;
 type Body = z.infer<typeof bodySchema>;
 
 const safeValidateBody = (data: unknown) => {
@@ -65,6 +68,38 @@ const safeValidateBody = (data: unknown) => {
   };
 };
 
+const ensureChatExists = async (input: {
+  id: string;
+  sources: SearchSources[];
+  query: string;
+  fileIds: string[];
+}) => {
+  try {
+    const exists = await db.query.chats
+      .findFirst({
+        where: eq(chats.id, input.id),
+      })
+      .execute();
+
+    if (!exists) {
+      await db.insert(chats).values({
+        id: input.id,
+        createdAt: new Date().toISOString(),
+        sources: input.sources,
+        title: input.query,
+        files: input.fileIds.map((id) => {
+          return {
+            fileId: id,
+            name: UploadManager.getFile(id)?.name || 'Uploaded File',
+          };
+        }),
+      });
+    }
+  } catch (err) {
+    console.error('Failed to check/save chat:', err);
+  }
+};
+
 export const POST = async (req: Request) => {
   try {
     const reqBody = (await req.json()) as Body;
@@ -121,95 +156,86 @@ export const POST = async (req: Request) => {
     const writer = responseStream.writable.getWriter();
     const encoder = new TextEncoder();
 
-    let receivedMessage = '';
-
-    session.addListener('data', (data: any) => {
-      if (data.type === 'response') {
+    const disconnect = session.subscribe((event: string, data: any) => {
+      if (event === 'data') {
+        if (data.type === 'block') {
+          writer.write(
+            encoder.encode(
+              JSON.stringify({
+                type: 'block',
+                block: data.block,
+              }) + '\n',
+            ),
+          );
+        } else if (data.type === 'updateBlock') {
+          writer.write(
+            encoder.encode(
+              JSON.stringify({
+                type: 'updateBlock',
+                blockId: data.blockId,
+                patch: data.patch,
+              }) + '\n',
+            ),
+          );
+        } else if (data.type === 'researchComplete') {
+          writer.write(
+            encoder.encode(
+              JSON.stringify({
+                type: 'researchComplete',
+              }) + '\n',
+            ),
+          );
+        }
+      } else if (event === 'end') {
         writer.write(
           encoder.encode(
             JSON.stringify({
-              type: 'message',
+              type: 'messageEnd',
+            }) + '\n',
+          ),
+        );
+        writer.close();
+        session.removeAllListeners();
+      } else if (event === 'error') {
+        writer.write(
+          encoder.encode(
+            JSON.stringify({
+              type: 'error',
               data: data.data,
             }) + '\n',
           ),
         );
-        receivedMessage += data.data;
-      } else if (data.type === 'sources') {
-        writer.write(
-          encoder.encode(
-            JSON.stringify({
-              type: 'sources',
-              data: data.data,
-            }) + '\n',
-          ),
-        );
-      } else if (data.type === 'block') {
-        writer.write(
-          encoder.encode(
-            JSON.stringify({
-              type: 'block',
-              block: data.block,
-            }) + '\n',
-          ),
-        );
-      } else if (data.type === 'updateBlock') {
-        writer.write(
-          encoder.encode(
-            JSON.stringify({
-              type: 'updateBlock',
-              blockId: data.blockId,
-              patch: data.patch,
-            }) + '\n',
-          ),
-        );
-      } else if (data.type === 'researchComplete') {
-        writer.write(
-          encoder.encode(
-            JSON.stringify({
-              type: 'researchComplete',
-            }) + '\n',
-          ),
-        );
+        writer.close();
+        session.removeAllListeners();
       }
     });
 
-    session.addListener('end', () => {
-      writer.write(
-        encoder.encode(
-          JSON.stringify({
-            type: 'messageEnd',
-          }) + '\n',
-        ),
-      );
-      writer.close();
-      session.removeAllListeners();
-    });
-
-    session.addListener('error', (data: any) => {
-      writer.write(
-        encoder.encode(
-          JSON.stringify({
-            type: 'error',
-            data: data.data,
-          }) + '\n',
-        ),
-      );
-      writer.close();
-      session.removeAllListeners();
-    });
-
     agent.searchAsync(session, {
       chatHistory: history,
       followUp: message.content,
+      chatId: body.message.chatId,
+      messageId: body.message.messageId,
       config: {
         llm,
         embedding: embedding,
-        sources: ['web'],
+        sources: body.sources as SearchSources[],
         mode: body.optimizationMode,
+        fileIds: body.files,
+        systemInstructions: body.systemInstructions || 'None',
       },
     });
 
-    /*  handleHistorySave(message, humanMessageId, body.focusMode, body.files); */
+    ensureChatExists({
+      id: body.message.chatId,
+      sources: body.sources as SearchSources[],
+      fileIds: body.files,
+      query: body.message.content,
+    });
+
+    req.signal.addEventListener('abort', () => {
+      disconnect();
+      writer.close();
+    });
 
     return new Response(responseStream.readable, {
       headers: {

src/app/api/reconnect/[id]/route.ts

@@ -0,0 +1,93 @@
+import SessionManager from '@/lib/session';
+
+export const POST = async (
+  req: Request,
+  { params }: { params: Promise<{ id: string }> },
+) => {
+  try {
+    const { id } = await params;
+
+    const session = SessionManager.getSession(id);
+
+    if (!session) {
+      return Response.json({ message: 'Session not found' }, { status: 404 });
+    }
+
+    const responseStream = new TransformStream();
+    const writer = responseStream.writable.getWriter();
+    const encoder = new TextEncoder();
+
+    const disconnect = session.subscribe((event, data) => {
+      if (event === 'data') {
+        if (data.type === 'block') {
+          writer.write(
+            encoder.encode(
+              JSON.stringify({
+                type: 'block',
+                block: data.block,
+              }) + '\n',
+            ),
+          );
+        } else if (data.type === 'updateBlock') {
+          writer.write(
+            encoder.encode(
+              JSON.stringify({
+                type: 'updateBlock',
+                blockId: data.blockId,
+                patch: data.patch,
+              }) + '\n',
+            ),
+          );
+        } else if (data.type === 'researchComplete') {
+          writer.write(
+            encoder.encode(
+              JSON.stringify({
+                type: 'researchComplete',
+              }) + '\n',
+            ),
+          );
+        }
+      } else if (event === 'end') {
+        writer.write(
+          encoder.encode(
+            JSON.stringify({
+              type: 'messageEnd',
+            }) + '\n',
+          ),
+        );
+        writer.close();
+        disconnect();
+      } else if (event === 'error') {
+        writer.write(
+          encoder.encode(
+            JSON.stringify({
+              type: 'error',
+              data: data.data,
+            }) + '\n',
+          ),
+        );
+        writer.close();
+        disconnect();
+      }
+    });
+
+    req.signal.addEventListener('abort', () => {
+      disconnect();
+      writer.close();
+    });
+
+    return new Response(responseStream.readable, {
+      headers: {
+        'Content-Type': 'text/event-stream',
+        Connection: 'keep-alive',
+        'Cache-Control': 'no-cache, no-transform',
+      },
+    });
+  } catch (err) {
+    console.error('Error in reconnecting to session stream: ', err);
+    return Response.json(
+      { message: 'An error has occurred.' },
+      { status: 500 },
+    );
+  }
+};

src/app/api/search/route.ts

@@ -1,12 +1,13 @@
 import ModelRegistry from '@/lib/models/registry';
 import { ModelWithProvider } from '@/lib/models/types';
 import SessionManager from '@/lib/session';
-import SearchAgent from '@/lib/agents/search';
 import { ChatTurnMessage } from '@/lib/types';
+import { SearchSources } from '@/lib/agents/search/types';
+import APISearchAgent from '@/lib/agents/search/api';
 
 interface ChatRequestBody {
-  optimizationMode: 'speed' | 'balanced';
-  focusMode: string;
+  optimizationMode: 'speed' | 'balanced' | 'quality';
+  sources: SearchSources[];
   chatModel: ModelWithProvider;
   embeddingModel: ModelWithProvider;
   query: string;
@@ -19,15 +20,15 @@ export const POST = async (req: Request) => {
   try {
     const body: ChatRequestBody = await req.json();
 
-    if (!body.focusMode || !body.query) {
+    if (!body.sources || !body.query) {
       return Response.json(
-        { message: 'Missing focus mode or query' },
+        { message: 'Missing sources or query' },
         { status: 400 },
       );
     }
 
     body.history = body.history || [];
-    body.optimizationMode = body.optimizationMode || 'balanced';
+    body.optimizationMode = body.optimizationMode || 'speed';
     body.stream = body.stream || false;
 
     const registry = new ModelRegistry();
@@ -48,17 +49,21 @@ export const POST = async (req: Request) => {
 
     const session = SessionManager.createSession();
 
-    const agent = new SearchAgent();
+    const agent = new APISearchAgent();
 
     agent.searchAsync(session, {
       chatHistory: history,
       config: {
         embedding: embeddings,
         llm: llm,
-        sources: ['web', 'discussions', 'academic'],
-        mode: 'balanced',
+        sources: body.sources,
+        mode: body.optimizationMode,
+        fileIds: [],
+        systemInstructions: body.systemInstructions || '',
       },
       followUp: body.query,
+      chatId: crypto.randomUUID(),
+      messageId: crypto.randomUUID(),
     });
 
     if (!body.stream) {
@@ -70,36 +75,37 @@ export const POST = async (req: Request) => {
           let message = '';
           let sources: any[] = [];
 
-          session.addListener('data', (data: string) => {
-            try {
-              const parsedData = JSON.parse(data);
-              if (parsedData.type === 'response') {
-                message += parsedData.data;
-              } else if (parsedData.type === 'sources') {
-                sources = parsedData.data;
+          session.subscribe((event: string, data: Record<string, any>) => {
+            if (event === 'data') {
+              try {
+                if (data.type === 'response') {
+                  message += data.data;
+                } else if (data.type === 'searchResults') {
+                  sources = data.data;
+                }
+              } catch (error) {
+                reject(
+                  Response.json(
+                    { message: 'Error parsing data' },
+                    { status: 500 },
+                  ),
+                );
               }
-            } catch (error) {
+            }
+
+            if (event === 'end') {
+              resolve(Response.json({ message, sources }, { status: 200 }));
+            }
+
+            if (event === 'error') {
               reject(
                 Response.json(
-                  { message: 'Error parsing data' },
+                  { message: 'Search error', error: data },
                   { status: 500 },
                 ),
               );
             }
           });
-
-          session.addListener('end', () => {
-            resolve(Response.json({ message, sources }, { status: 200 }));
-          });
-
-          session.addListener('error', (error: any) => {
-            reject(
-              Response.json(
-                { message: 'Search error', error },
-                { status: 500 },
-              ),
-            );
-          });
         },
       );
     }
@@ -130,54 +136,54 @@ export const POST = async (req: Request) => {
           } catch (error) {}
         });
 
-        session.addListener('data', (data: string) => {
-          if (signal.aborted) return;
+        session.subscribe((event: string, data: Record<string, any>) => {
+          if (event === 'data') {
+            if (signal.aborted) return;
 
-          try {
-            const parsedData = JSON.parse(data);
-
-            if (parsedData.type === 'response') {
-              controller.enqueue(
-                encoder.encode(
-                  JSON.stringify({
-                    type: 'response',
-                    data: parsedData.data,
-                  }) + '\n',
-                ),
-              );
-            } else if (parsedData.type === 'sources') {
-              sources = parsedData.data;
-              controller.enqueue(
-                encoder.encode(
-                  JSON.stringify({
-                    type: 'sources',
-                    data: sources,
-                  }) + '\n',
-                ),
-              );
+            try {
+              if (data.type === 'response') {
+                controller.enqueue(
+                  encoder.encode(
+                    JSON.stringify({
+                      type: 'response',
+                      data: data.data,
+                    }) + '\n',
+                  ),
+                );
+              } else if (data.type === 'searchResults') {
+                sources = data.data;
+                controller.enqueue(
+                  encoder.encode(
+                    JSON.stringify({
+                      type: 'sources',
+                      data: sources,
+                    }) + '\n',
+                  ),
+                );
+              }
+            } catch (error) {
+              controller.error(error);
             }
-          } catch (error) {
-            controller.error(error);
           }
-        });
 
-        session.addListener('end', () => {
-          if (signal.aborted) return;
+          if (event === 'end') {
+            if (signal.aborted) return;
 
-          controller.enqueue(
-            encoder.encode(
-              JSON.stringify({
-                type: 'done',
-              }) + '\n',
-            ),
-          );
-          controller.close();
-        });
+            controller.enqueue(
+              encoder.encode(
+                JSON.stringify({
+                  type: 'done',
+                }) + '\n',
+              ),
+            );
+            controller.close();
+          }
 
-        session.addListener('error', (error: any) => {
-          if (signal.aborted) return;
+          if (event === 'error') {
+            if (signal.aborted) return;
 
-          controller.error(error);
+            controller.error(data);
+          }
         });
       },
       cancel() {

src/app/api/suggestions/route.ts

@@ -1,7 +1,6 @@
 import generateSuggestions from '@/lib/agents/suggestions';
 import ModelRegistry from '@/lib/models/registry';
 import { ModelWithProvider } from '@/lib/models/types';
-import { AIMessage, BaseMessage, HumanMessage } from '@langchain/core/messages';
 
 interface SuggestionsGenerationBody {
   chatHistory: any[];

src/app/api/uploads/route.ts

@@ -1,40 +1,16 @@
 import { NextResponse } from 'next/server';
-import fs from 'fs';
-import path from 'path';
-import crypto from 'crypto';
-import { PDFLoader } from '@langchain/community/document_loaders/fs/pdf';
-import { DocxLoader } from '@langchain/community/document_loaders/fs/docx';
-import { RecursiveCharacterTextSplitter } from '@langchain/textsplitters';
-import { Document } from '@langchain/core/documents';
 import ModelRegistry from '@/lib/models/registry';
-import { Chunk } from '@/lib/types';
-
-interface FileRes {
-  fileName: string;
-  fileExtension: string;
-  fileId: string;
-}
-
-const uploadDir = path.join(process.cwd(), 'uploads');
-
-if (!fs.existsSync(uploadDir)) {
-  fs.mkdirSync(uploadDir, { recursive: true });
-}
-
-const splitter = new RecursiveCharacterTextSplitter({
-  chunkSize: 500,
-  chunkOverlap: 100,
-});
+import UploadManager from '@/lib/uploads/manager';
 
 export async function POST(req: Request) {
   try {
     const formData = await req.formData();
 
     const files = formData.getAll('files') as File[];
-    const embedding_model = formData.get('embedding_model_key') as string;
-    const embedding_model_provider = formData.get('embedding_model_provider_id') as string;
+    const embeddingModel = formData.get('embedding_model_key') as string;
+    const embeddingModelProvider = formData.get('embedding_model_provider_id') as string;
 
-    if (!embedding_model || !embedding_model_provider) {
+    if (!embeddingModel || !embeddingModelProvider) {
       return NextResponse.json(
         { message: 'Missing embedding model or provider' },
         { status: 400 },
@@ -43,81 +19,13 @@ export async function POST(req: Request) {
 
     const registry = new ModelRegistry();
 
-    const model = await registry.loadEmbeddingModel(embedding_model_provider, embedding_model);
+    const model = await registry.loadEmbeddingModel(embeddingModelProvider, embeddingModel);
+    
+    const uploadManager = new UploadManager({
+      embeddingModel: model,
+    })
 
-    const processedFiles: FileRes[] = [];
-
-    await Promise.all(
-      files.map(async (file: any) => {
-        const fileExtension = file.name.split('.').pop();
-        if (!['pdf', 'docx', 'txt'].includes(fileExtension!)) {
-          return NextResponse.json(
-            { message: 'File type not supported' },
-            { status: 400 },
-          );
-        }
-
-        const uniqueFileName = `${crypto.randomBytes(16).toString('hex')}.${fileExtension}`;
-        const filePath = path.join(uploadDir, uniqueFileName);
-
-        const buffer = Buffer.from(await file.arrayBuffer());
-        fs.writeFileSync(filePath, new Uint8Array(buffer));
-
-        let docs: any[] = [];
-        if (fileExtension === 'pdf') {
-          const loader = new PDFLoader(filePath);
-          docs = await loader.load();
-        } else if (fileExtension === 'docx') {
-          const loader = new DocxLoader(filePath);
-          docs = await loader.load();
-        } else if (fileExtension === 'txt') {
-          const text = fs.readFileSync(filePath, 'utf-8');
-          docs = [
-            new Document({ pageContent: text, metadata: { title: file.name } }),
-          ];
-        }
-
-        const splitted = await splitter.splitDocuments(docs);
-
-        const extractedDataPath = filePath.replace(/\.\w+$/, '-extracted.json');
-        fs.writeFileSync(
-          extractedDataPath,
-          JSON.stringify({
-            title: file.name,
-            contents: splitted.map((doc) => doc.pageContent),
-          }),
-        );
-
-        const chunks: Chunk[] = splitted.map((doc) => {
-          return {
-            content: doc.pageContent,
-            metadata: doc.metadata,
-          }
-        });
-
-        const embeddings = await model.embedChunks(
-          chunks
-        );
-        
-        const embeddingsDataPath = filePath.replace(
-          /\.\w+$/,
-          '-embeddings.json',
-        );
-        fs.writeFileSync(
-          embeddingsDataPath,
-          JSON.stringify({
-            title: file.name,
-            embeddings,
-          }),
-        );
-
-        processedFiles.push({
-          fileName: file.name,
-          fileExtension: fileExtension,
-          fileId: uniqueFileName.replace(/\.\w+$/, ''),
-        });
-      }),
-    );
+    const processedFiles = await uploadManager.processFiles(files);
 
     return NextResponse.json({
       files: processedFiles,

src/app/c/[chatId]/page.tsx

@@ -1,10 +1,5 @@
 'use client';
 
 import ChatWindow from '@/components/ChatWindow';
-import React from 'react';
 
-const Page = () => {
-  return <ChatWindow />;
-};
-
-export default Page;
+export default ChatWindow;

src/app/layout.tsx

@@ -34,7 +34,7 @@ export default function RootLayout({
 
   return (
     <html className="h-full" lang="en" suppressHydrationWarning>
-      <body className={cn('h-full', montserrat.className)}>
+      <body className={cn('h-full antialiased', montserrat.className)}>
         <ThemeProvider>
           {setupComplete ? (
             <ChatProvider>

src/app/library/page.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import DeleteChat from '@/components/DeleteChat';
-import { cn, formatTimeDifference } from '@/lib/utils';
-import { BookOpenText, ClockIcon, Delete, ScanEye } from 'lucide-react';
+import { formatTimeDifference } from '@/lib/utils';
+import { BookOpenText, ClockIcon, FileText, Globe2Icon } from 'lucide-react';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
@@ -10,7 +10,8 @@ export interface Chat {
   id: string;
   title: string;
   createdAt: string;
-  focusMode: string;
+  sources: string[];
+  files: { fileId: string; name: string }[];
 }
 
 const Page = () => {
@@ -37,74 +38,137 @@ const Page = () => {
     fetchChats();
   }, []);
 
-  return loading ? (
-    <div className="flex flex-row items-center justify-center min-h-screen">
-      <svg
-        aria-hidden="true"
-        className="w-8 h-8 text-light-200 fill-light-secondary dark:text-[#202020] animate-spin dark:fill-[#ffffff3b]"
-        viewBox="0 0 100 101"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M100 50.5908C100.003 78.2051 78.1951 100.003 50.5908 100C22.9765 99.9972 0.997224 78.018 1 50.4037C1.00281 22.7993 22.8108 0.997224 50.4251 1C78.0395 1.00281 100.018 22.8108 100 50.4251ZM9.08164 50.594C9.06312 73.3997 27.7909 92.1272 50.5966 92.1457C73.4023 92.1642 92.1298 73.4365 92.1483 50.6308C92.1669 27.8251 73.4392 9.0973 50.6335 9.07878C27.8278 9.06026 9.10003 27.787 9.08164 50.594Z"
-          fill="currentColor"
-        />
-        <path
-          d="M93.9676 39.0409C96.393 38.4037 97.8624 35.9116 96.9801 33.5533C95.1945 28.8227 92.871 24.3692 90.0681 20.348C85.6237 14.1775 79.4473 9.36872 72.0454 6.45794C64.6435 3.54717 56.3134 2.65431 48.3133 3.89319C45.869 4.27179 44.3768 6.77534 45.014 9.20079C45.6512 11.6262 48.1343 13.0956 50.5786 12.717C56.5073 11.8281 62.5542 12.5399 68.0406 14.7911C73.527 17.0422 78.2187 20.7487 81.5841 25.4923C83.7976 28.5886 85.4467 32.059 86.4416 35.7474C87.1273 38.1189 89.5423 39.6781 91.9676 39.0409Z"
-          fill="currentFill"
-        />
-      </svg>
-    </div>
-  ) : (
+  return (
     <div>
-      <div className="flex flex-col pt-4">
-        <div className="flex items-center">
-          <BookOpenText />
-          <h1 className="text-3xl font-medium p-2">Library</h1>
-        </div>
-        <hr className="border-t border-[#2B2C2C] my-4 w-full" />
-      </div>
-      {chats.length === 0 && (
-        <div className="flex flex-row items-center justify-center min-h-screen">
-          <p className="text-black/70 dark:text-white/70 text-sm">
-            No chats found.
-          </p>
-        </div>
-      )}
-      {chats.length > 0 && (
-        <div className="flex flex-col pb-20 lg:pb-2">
-          {chats.map((chat, i) => (
-            <div
-              className={cn(
-                'flex flex-col space-y-4 py-6',
-                i !== chats.length - 1
-                  ? 'border-b border-white-200 dark:border-dark-200'
-                  : '',
-              )}
-              key={i}
-            >
-              <Link
-                href={`/c/${chat.id}`}
-                className="text-black dark:text-white lg:text-xl font-medium truncate transition duration-200 hover:text-[#24A0ED] dark:hover:text-[#24A0ED] cursor-pointer"
+      <div className="flex flex-col pt-10 border-b border-light-200/20 dark:border-dark-200/20 pb-6 px-2">
+        <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-3">
+          <div className="flex items-center justify-center">
+            <BookOpenText size={45} className="mb-2.5" />
+            <div className="flex flex-col">
+              <h1
+                className="text-5xl font-normal p-2 pb-0"
+                style={{ fontFamily: 'PP Editorial, serif' }}
               >
-                {chat.title}
-              </Link>
-              <div className="flex flex-row items-center justify-between w-full">
-                <div className="flex flex-row items-center space-x-1 lg:space-x-1.5 text-black/70 dark:text-white/70">
-                  <ClockIcon size={15} />
-                  <p className="text-xs">
-                    {formatTimeDifference(new Date(), chat.createdAt)} Ago
-                  </p>
-                </div>
-                <DeleteChat
-                  chatId={chat.id}
-                  chats={chats}
-                  setChats={setChats}
-                />
+                Library
+              </h1>
+              <div className="px-2 text-sm text-black/60 dark:text-white/60 text-center lg:text-left">
+                Past chats, sources, and uploads.
               </div>
             </div>
-          ))}
+          </div>
+
+          <div className="flex items-center justify-center lg:justify-end gap-2 text-xs text-black/60 dark:text-white/60">
+            <span className="inline-flex items-center gap-1 rounded-full border border-black/20 dark:border-white/20 px-2 py-0.5">
+              <BookOpenText size={14} />
+              {loading
+                ? 'Loading…'
+                : `${chats.length} ${chats.length === 1 ? 'chat' : 'chats'}`}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="flex flex-row items-center justify-center min-h-[60vh]">
+          <svg
+            aria-hidden="true"
+            className="w-8 h-8 text-light-200 fill-light-secondary dark:text-[#202020] animate-spin dark:fill-[#ffffff3b]"
+            viewBox="0 0 100 101"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M100 50.5908C100.003 78.2051 78.1951 100.003 50.5908 100C22.9765 99.9972 0.997224 78.018 1 50.4037C1.00281 22.7993 22.8108 0.997224 50.4251 1C78.0395 1.00281 100.018 22.8108 100 50.4251ZM9.08164 50.594C9.06312 73.3997 27.7909 92.1272 50.5966 92.1457C73.4023 92.1642 92.1298 73.4365 92.1483 50.6308C92.1669 27.8251 73.4392 9.0973 50.6335 9.07878C27.8278 9.06026 9.10003 27.787 9.08164 50.594Z"
+              fill="currentColor"
+            />
+            <path
+              d="M93.9676 39.0409C96.393 38.4037 97.8624 35.9116 96.9801 33.5533C95.1945 28.8227 92.871 24.3692 90.0681 20.348C85.6237 14.1775 79.4473 9.36872 72.0454 6.45794C64.6435 3.54717 56.3134 2.65431 48.3133 3.89319C45.869 4.27179 44.3768 6.77534 45.014 9.20079C45.6512 11.6262 48.1343 13.0956 50.5786 12.717C56.5073 11.8281 62.5542 12.5399 68.0406 14.7911C73.527 17.0422 78.2187 20.7487 81.5841 25.4923C83.7976 28.5886 85.4467 32.059 86.4416 35.7474C87.1273 38.1189 89.5423 39.6781 91.9676 39.0409Z"
+              fill="currentFill"
+            />
+          </svg>
+        </div>
+      ) : chats.length === 0 ? (
+        <div className="flex flex-col items-center justify-center min-h-[70vh] px-2 text-center">
+          <div className="flex items-center justify-center w-12 h-12 rounded-2xl border border-light-200 dark:border-dark-200 bg-light-secondary dark:bg-dark-secondary">
+            <BookOpenText className="text-black/70 dark:text-white/70" />
+          </div>
+          <p className="mt-2 text-black/70 dark:text-white/70 text-sm">
+            No chats found.
+          </p>
+          <p className="mt-1 text-black/70 dark:text-white/70 text-sm">
+            <Link href="/" className="text-sky-400">
+              Start a new chat
+            </Link>{' '}
+            to see it listed here.
+          </p>
+        </div>
+      ) : (
+        <div className="pt-6 pb-28 px-2">
+          <div className="rounded-2xl border border-light-200 dark:border-dark-200 overflow-hidden bg-light-primary dark:bg-dark-primary">
+            {chats.map((chat, index) => {
+              const sourcesLabel =
+                chat.sources.length === 0
+                  ? null
+                  : chat.sources.length <= 2
+                    ? chat.sources
+                        .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+                        .join(', ')
+                    : `${chat.sources
+                        .slice(0, 2)
+                        .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+                        .join(', ')} + ${chat.sources.length - 2}`;
+
+              return (
+                <div
+                  key={chat.id}
+                  className={
+                    'group flex flex-col gap-2 p-4 hover:bg-light-secondary dark:hover:bg-dark-secondary transition-colors duration-200 ' +
+                    (index !== chats.length - 1
+                      ? 'border-b border-light-200 dark:border-dark-200'
+                      : '')
+                  }
+                >
+                  <div className="flex items-start justify-between gap-3">
+                    <Link
+                      href={`/c/${chat.id}`}
+                      className="flex-1 text-black dark:text-white text-base lg:text-lg font-medium leading-snug line-clamp-2 group-hover:text-[#24A0ED] transition duration-200"
+                      title={chat.title}
+                    >
+                      {chat.title}
+                    </Link>
+                    <div className="pt-0.5 shrink-0">
+                      <DeleteChat
+                        chatId={chat.id}
+                        chats={chats}
+                        setChats={setChats}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="flex flex-wrap items-center gap-2 text-black/70 dark:text-white/70">
+                    <span className="inline-flex items-center gap-1 text-xs">
+                      <ClockIcon size={14} />
+                      {formatTimeDifference(new Date(), chat.createdAt)} Ago
+                    </span>
+
+                    {sourcesLabel && (
+                      <span className="inline-flex items-center gap-1 text-xs border border-black/20 dark:border-white/20 rounded-full px-2 py-0.5">
+                        <Globe2Icon size={14} />
+                        {sourcesLabel}
+                      </span>
+                    )}
+                    {chat.files.length > 0 && (
+                      <span className="inline-flex items-center gap-1 text-xs border border-black/20 dark:border-white/20 rounded-full px-2 py-0.5">
+                        <FileText size={14} />
+                        {chat.files.length}{' '}
+                        {chat.files.length === 1 ? 'file' : 'files'}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
         </div>
       )}
     </div>

src/components/AssistantSteps.tsx

@@ -1,6 +1,13 @@
 'use client';
 
-import { Brain, Search, FileText, ChevronDown, ChevronUp } from 'lucide-react';
+import {
+  Brain,
+  Search,
+  FileText,
+  ChevronDown,
+  ChevronUp,
+  BookSearch,
+} from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import { ResearchBlock, ResearchBlockSubStep } from '@/lib/types';
@@ -9,11 +16,17 @@ import { useChat } from '@/lib/hooks/useChat';
 const getStepIcon = (step: ResearchBlockSubStep) => {
   if (step.type === 'reasoning') {
     return <Brain className="w-4 h-4" />;
-  } else if (step.type === 'searching') {
+  } else if (step.type === 'searching' || step.type === 'upload_searching') {
     return <Search className="w-4 h-4" />;
-  } else if (step.type === 'reading') {
+  } else if (
+    step.type === 'search_results' ||
+    step.type === 'upload_search_results'
+  ) {
     return <FileText className="w-4 h-4" />;
+  } else if (step.type === 'reading') {
+    return <BookSearch className="w-4 h-4" />;
   }
+
   return null;
 };
 
@@ -25,26 +38,37 @@ const getStepTitle = (
     return isStreaming && !step.reasoning ? 'Thinking...' : 'Thinking';
   } else if (step.type === 'searching') {
     return `Searching ${step.searching.length} ${step.searching.length === 1 ? 'query' : 'queries'}`;
-  } else if (step.type === 'reading') {
+  } else if (step.type === 'search_results') {
     return `Found ${step.reading.length} ${step.reading.length === 1 ? 'result' : 'results'}`;
+  } else if (step.type === 'reading') {
+    return `Reading ${step.reading.length} ${step.reading.length === 1 ? 'source' : 'sources'}`;
+  } else if (step.type === 'upload_searching') {
+    return 'Scanning your uploaded documents';
+  } else if (step.type === 'upload_search_results') {
+    return `Reading ${step.results.length} ${step.results.length === 1 ? 'document' : 'documents'}`;
   }
+
   return 'Processing';
 };
 
 const AssistantSteps = ({
   block,
   status,
+  isLast,
 }: {
   block: ResearchBlock;
   status: 'answering' | 'completed' | 'error';
+  isLast: boolean;
 }) => {
-  const [isExpanded, setIsExpanded] = useState(true);
+  const [isExpanded, setIsExpanded] = useState(
+    isLast && status === 'answering' ? true : false,
+  );
   const { researchEnded, loading } = useChat();
 
   useEffect(() => {
-    if (researchEnded) {
+    if (researchEnded && isLast) {
       setIsExpanded(false);
-    } else if (status === 'answering') {
+    } else if (status === 'answering' && isLast) {
       setIsExpanded(true);
     }
   }, [researchEnded, status]);
@@ -91,10 +115,9 @@ const AssistantSteps = ({
                     initial={{ opacity: 0, x: -10 }}
                     animate={{ opacity: 1, x: 0 }}
                     transition={{ duration: 0.2, delay: 0 }}
-                    className="flex gap-3"
+                    className="flex gap-2"
                   >
-                    {/* Timeline connector */}
-                    <div className="flex flex-col items-center pt-0.5">
+                    <div className="flex flex-col items-center -mt-0.5">
                       <div
                         className={`rounded-full p-1.5 bg-light-100 dark:bg-dark-100 text-black/70 dark:text-white/70 ${isStreaming ? 'animate-pulse' : ''}`}
                       >
@@ -105,7 +128,6 @@ const AssistantSteps = ({
                       )}
                     </div>
 
-                    {/* Step content */}
                     <div className="flex-1 pb-1">
                       <span className="text-sm font-medium text-black dark:text-white">
                         {getStepTitle(step, isStreaming)}
@@ -151,37 +173,84 @@ const AssistantSteps = ({
                           </div>
                         )}
 
-                      {step.type === 'reading' && step.reading.length > 0 && (
-                        <div className="flex flex-wrap gap-1.5 mt-1.5">
-                          {step.reading.slice(0, 4).map((result, idx) => {
-                            const url = result.metadata.url || '';
-                            const title = result.metadata.title || 'Untitled';
-                            const domain = url ? new URL(url).hostname : '';
-                            const faviconUrl = domain
-                              ? `https://s2.googleusercontent.com/s2/favicons?domain=${domain}&sz=128`
-                              : '';
+                      {(step.type === 'search_results' ||
+                        step.type === 'reading') &&
+                        step.reading.length > 0 && (
+                          <div className="flex flex-wrap gap-1.5 mt-1.5">
+                            {step.reading.slice(0, 4).map((result, idx) => {
+                              const url = result.metadata.url || '';
+                              const title = result.metadata.title || 'Untitled';
+                              const domain = url ? new URL(url).hostname : '';
+                              const faviconUrl = domain
+                                ? `https://s2.googleusercontent.com/s2/favicons?domain=${domain}&sz=128`
+                                : '';
 
-                            return (
+                              return (
+                                <a
+                                  key={idx}
+                                  href={url}
+                                  target="_blank"
+                                  className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-xs font-medium bg-light-100 dark:bg-dark-100 text-black/70 dark:text-white/70 border border-light-200 dark:border-dark-200"
+                                >
+                                  {faviconUrl && (
+                                    <img
+                                      src={faviconUrl}
+                                      alt=""
+                                      className="w-3 h-3 rounded-sm flex-shrink-0"
+                                      onError={(e) => {
+                                        e.currentTarget.style.display = 'none';
+                                      }}
+                                    />
+                                  )}
+                                  <span className="line-clamp-1">{title}</span>
+                                </a>
+                              );
+                            })}
+                          </div>
+                        )}
+
+                      {step.type === 'upload_searching' &&
+                        step.queries.length > 0 && (
+                          <div className="flex flex-wrap gap-1.5 mt-1.5">
+                            {step.queries.map((query, idx) => (
                               <span
                                 key={idx}
-                                className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-xs font-medium bg-light-100 dark:bg-dark-100 text-black/70 dark:text-white/70 border border-light-200 dark:border-dark-200"
+                                className="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-light-100 dark:bg-dark-100 text-black/70 dark:text-white/70 border border-light-200 dark:border-dark-200"
                               >
-                                {faviconUrl && (
-                                  <img
-                                    src={faviconUrl}
-                                    alt=""
-                                    className="w-3 h-3 rounded-sm flex-shrink-0"
-                                    onError={(e) => {
-                                      e.currentTarget.style.display = 'none';
-                                    }}
-                                  />
-                                )}
-                                <span className="line-clamp-1">{title}</span>
+                                {query}
                               </span>
-                            );
-                          })}
-                        </div>
-                      )}
+                            ))}
+                          </div>
+                        )}
+
+                      {step.type === 'upload_search_results' &&
+                        step.results.length > 0 && (
+                          <div className="mt-1.5 grid gap-3 lg:grid-cols-3">
+                            {step.results.slice(0, 4).map((result, idx) => {
+                              const title =
+                                (result.metadata &&
+                                  (result.metadata.title ||
+                                    result.metadata.fileName)) ||
+                                'Untitled document';
+
+                              return (
+                                <div
+                                  key={idx}
+                                  className="flex flex-row space-x-3 rounded-lg border border-light-200 dark:border-dark-200 bg-light-100 dark:bg-dark-100 p-2 cursor-pointer"
+                                >
+                                  <div className="mt-0.5 h-10 w-10 rounded-md bg-cyan-100 text-cyan-800 dark:bg-sky-500 dark:text-cyan-50 flex items-center justify-center">
+                                    <FileText className="w-5 h-5" />
+                                  </div>
+                                  <div className="flex flex-col justify-center">
+                                    <p className="text-[13px] text-black dark:text-white line-clamp-1">
+                                      {title}
+                                    </p>
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
                     </div>
                   </motion.div>
                 );

src/components/Chat.tsx

@@ -59,7 +59,7 @@ const Chat = () => {
   }, [messages]);
 
   return (
-    <div className="flex flex-col space-y-6 pt-8 pb-44 lg:pb-32 sm:mx-4 md:mx-8">
+    <div className="flex flex-col space-y-6 pt-8 pb-44 lg:pb-28 sm:mx-4 md:mx-8">
       {sections.map((section, i) => {
         const isLast = i === sections.length - 1;
 
@@ -80,10 +80,21 @@ const Chat = () => {
       {loading && !messageAppeared && <MessageBoxLoading />}
       <div ref={messageEnd} className="h-0" />
       {dividerWidth > 0 && (
-        <div
-          className="bottom-24 lg:bottom-10 fixed z-40"
-          style={{ width: dividerWidth }}
-        >
+        <div className="fixed z-40 bottom-24 lg:bottom-6" style={{ width: dividerWidth }}>
+          <div
+            className="pointer-events-none absolute -bottom-6 left-0 right-0 h-[calc(100%+24px+24px)] dark:hidden"
+            style={{
+              background:
+                'linear-gradient(to top, #ffffff 0%, #ffffff 35%, rgba(255,255,255,0.95) 45%, rgba(255,255,255,0.85) 55%, rgba(255,255,255,0.7) 65%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0.3) 85%, rgba(255,255,255,0.1) 92%, transparent 100%)',
+            }}
+          />
+          <div
+            className="pointer-events-none absolute -bottom-6 left-0 right-0 h-[calc(100%+24px+24px)] hidden dark:block"
+            style={{
+              background:
+                'linear-gradient(to top, #0d1117 0%, #0d1117 35%, rgba(13,17,23,0.95) 45%, rgba(13,17,23,0.85) 55%, rgba(13,17,23,0.7) 65%, rgba(13,17,23,0.5) 75%, rgba(13,17,23,0.3) 85%, rgba(13,17,23,0.1) 92%, transparent 100%)',
+            }}
+          />
           <MessageInput />
         </div>
       )}

src/components/ChatWindow.tsx

@@ -6,7 +6,8 @@ import EmptyChat from './EmptyChat';
 import NextError from 'next/error';
 import { useChat } from '@/lib/hooks/useChat';
 import SettingsButtonMobile from './Settings/SettingsButtonMobile';
-import { Block, Chunk } from '@/lib/types';
+import { Block } from '@/lib/types';
+import Loader from './ui/Loader';
 
 export interface BaseMessage {
   chatId: string;
@@ -21,35 +22,6 @@ export interface Message extends BaseMessage {
   status: 'answering' | 'completed' | 'error';
 }
 
-export interface UserMessage extends BaseMessage {
-  role: 'user';
-  content: string;
-}
-
-export interface AssistantMessage extends BaseMessage {
-  role: 'assistant';
-  content: string;
-  suggestions?: string[];
-}
-
-export interface SourceMessage extends BaseMessage {
-  role: 'source';
-  sources: Chunk[];
-}
-
-export interface SuggestionMessage extends BaseMessage {
-  role: 'suggestion';
-  suggestions: string[];
-}
-
-export type LegacyMessage =
-  | AssistantMessage
-  | UserMessage
-  | SourceMessage
-  | SuggestionMessage;
-
-export type ChatTurn = UserMessage | AssistantMessage;
-
 export interface File {
   fileName: string;
   fileExtension: string;
@@ -62,7 +34,8 @@ export interface Widget {
 }
 
 const ChatWindow = () => {
-  const { hasError, notFound, messages } = useChat();
+  const { hasError, notFound, messages, isReady } = useChat();
+
   if (hasError) {
     return (
       <div className="relative">
@@ -78,18 +51,24 @@ const ChatWindow = () => {
     );
   }
 
-  return notFound ? (
-    <NextError statusCode={404} />
+  return isReady ? (
+    notFound ? (
+      <NextError statusCode={404} />
+    ) : (
+      <div>
+        {messages.length > 0 ? (
+          <>
+            <Navbar />
+            <Chat />
+          </>
+        ) : (
+          <EmptyChat />
+        )}
+      </div>
+    )
   ) : (
-    <div>
-      {messages.length > 0 ? (
-        <>
-          <Navbar />
-          <Chat />
-        </>
-      ) : (
-        <EmptyChat />
-      )}
+    <div className="flex items-center justify-center min-h-screen w-full">
+      <Loader />
     </div>
   );
 };

src/components/EmptyChat.tsx

@@ -1,3 +1,6 @@
+'use client';
+
+import { useEffect, useState } from 'react';
 import { Settings } from 'lucide-react';
 import EmptyChatMessageInput from './EmptyChatMessageInput';
 import { File } from './ChatWindow';
@@ -5,8 +8,39 @@ import Link from 'next/link';
 import WeatherWidget from './WeatherWidget';
 import NewsArticleWidget from './NewsArticleWidget';
 import SettingsButtonMobile from '@/components/Settings/SettingsButtonMobile';
+import {
+  getShowNewsWidget,
+  getShowWeatherWidget,
+} from '@/lib/config/clientRegistry';
 
 const EmptyChat = () => {
+  const [showWeather, setShowWeather] = useState(() =>
+    typeof window !== 'undefined' ? getShowWeatherWidget() : true,
+  );
+  const [showNews, setShowNews] = useState(() =>
+    typeof window !== 'undefined' ? getShowNewsWidget() : true,
+  );
+
+  useEffect(() => {
+    const updateWidgetVisibility = () => {
+      setShowWeather(getShowWeatherWidget());
+      setShowNews(getShowNewsWidget());
+    };
+
+    updateWidgetVisibility();
+
+    window.addEventListener('client-config-changed', updateWidgetVisibility);
+    window.addEventListener('storage', updateWidgetVisibility);
+
+    return () => {
+      window.removeEventListener(
+        'client-config-changed',
+        updateWidgetVisibility,
+      );
+      window.removeEventListener('storage', updateWidgetVisibility);
+    };
+  }, []);
+
   return (
     <div className="relative">
       <div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
@@ -19,14 +53,20 @@ const EmptyChat = () => {
           </h2>
           <EmptyChatMessageInput />
         </div>
-        <div className="flex flex-col w-full gap-4 mt-2 sm:flex-row sm:justify-center">
-          <div className="flex-1 w-full">
-            <WeatherWidget />
+        {(showWeather || showNews) && (
+          <div className="flex flex-col w-full gap-4 mt-2 sm:flex-row sm:justify-center">
+            {showWeather && (
+              <div className="flex-1 w-full">
+                <WeatherWidget />
+              </div>
+            )}
+            {showNews && (
+              <div className="flex-1 w-full">
+                <NewsArticleWidget />
+              </div>
+            )}
           </div>
-          <div className="flex-1 w-full">
-            <NewsArticleWidget />
-          </div>
-        </div>
+        )}
       </div>
     </div>
   );

src/components/EmptyChatMessageInput.tsx

@@ -1,7 +1,7 @@
 import { ArrowRight } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
-import Focus from './MessageInputActions/Focus';
+import Sources from './MessageInputActions/Sources';
 import Optimization from './MessageInputActions/Optimization';
 import Attach from './MessageInputActions/Attach';
 import { useChat } from '@/lib/hooks/useChat';
@@ -68,8 +68,8 @@ const EmptyChatMessageInput = () => {
           <Optimization />
           <div className="flex flex-row items-center space-x-2">
             <div className="flex flex-row items-center space-x-1">
+              <Sources />
               <ModelSelector />
-              <Focus />
               <Attach />
             </div>
             <button

src/components/MessageActions/Copy.tsx

@@ -2,6 +2,7 @@ import { Check, ClipboardList } from 'lucide-react';
 import { Message } from '../ChatWindow';
 import { useState } from 'react';
 import { Section } from '@/lib/hooks/useChat';
+import { SourceBlock } from '@/lib/types';
 
 const Copy = ({
   section,
@@ -15,15 +16,25 @@ const Copy = ({
   return (
     <button
       onClick={() => {
+        const sources = section.message.responseBlocks.filter(
+          (b) => b.type === 'source' && b.data.length > 0,
+        ) as SourceBlock[];
+
         const contentToCopy = `${initialMessage}${
-          section?.message.responseBlocks.filter((b) => b.type === 'source')
-            ?.length > 0 &&
-          `\n\nCitations:\n${section.message.responseBlocks
-            .filter((b) => b.type === 'source')
-            ?.map((source: any, i: any) => `[${i + 1}] ${source.metadata.url}`)
-            .join(`\n`)}`
+          sources.length > 0
+            ? `\n\nCitations:\n${sources
+                .map((source) => source.data)
+                .flat()
+                .map(
+                  (s, i) =>
+                    `[${i + 1}] ${s.metadata.url.startsWith('file_id://') ? s.metadata.fileName || 'Uploaded File' : s.metadata.url}`,
+                )
+                .join(`\n`)}`
+            : ''
         }`;
+
         navigator.clipboard.writeText(contentToCopy);
+
         setCopied(true);
         setTimeout(() => setCopied(false), 1000);
       }}

src/components/MessageBox.tsx

@@ -12,7 +12,7 @@ import {
   Plus,
   CornerDownRight,
 } from 'lucide-react';
-import Markdown, { MarkdownToJSX } from 'markdown-to-jsx';
+import Markdown, { MarkdownToJSX, RuleType } from 'markdown-to-jsx';
 import Copy from './MessageActions/Copy';
 import Rewrite from './MessageActions/Rewrite';
 import MessageSources from './MessageSources';
@@ -21,10 +21,11 @@ import SearchVideos from './SearchVideos';
 import { useSpeech } from 'react-text-to-speech';
 import ThinkBox from './ThinkBox';
 import { useChat, Section } from '@/lib/hooks/useChat';
-import Citation from './Citation';
+import Citation from './MessageRenderer/Citation';
 import AssistantSteps from './AssistantSteps';
 import { ResearchBlock } from '@/lib/types';
 import Renderer from './Widgets/Renderer';
+import CodeBlock from './MessageRenderer/CodeBlock';
 
 const ThinkTagProcessor = ({
   children,
@@ -67,6 +68,21 @@ const MessageBox = ({
   const { speechStatus, start, stop } = useSpeech({ text: speechMessage });
 
   const markdownOverrides: MarkdownToJSX.Options = {
+    renderRule(next, node, renderChildren, state) {
+      if (node.type === RuleType.codeInline) {
+        return `\`${node.text}\``;
+      }
+
+      if (node.type === RuleType.codeBlock) {
+        return (
+          <CodeBlock key={state.key} language={node.lang || ''}>
+            {node.text}
+          </CodeBlock>
+        );
+      }
+
+      return next();
+    },
     overrides: {
       think: {
         component: ThinkTagProcessor,
@@ -115,12 +131,11 @@ const MessageBox = ({
                 <AssistantSteps
                   block={researchBlock}
                   status={section.message.status}
+                  isLast={isLast}
                 />
               </div>
             ))}
 
-          {section.widgets.length > 0 && <Renderer widgets={section.widgets} />}
-
           {isLast &&
             loading &&
             !researchEnded &&
@@ -135,6 +150,8 @@ const MessageBox = ({
               </div>
             )}
 
+          {section.widgets.length > 0 && <Renderer widgets={section.widgets} />}
+
           <div className="flex flex-col space-y-2">
             {sources.length > 0 && (
               <div className="flex flex-row items-center space-x-2">
@@ -218,10 +235,10 @@ const MessageBox = ({
                                 className="group w-full py-4 text-left transition-colors duration-200"
                               >
                                 <div className="flex items-center justify-between gap-3">
-                                  <div className="flex flex-row space-x-3 items-center ">
+                                  <div className="flex flex-row space-x-3 items-center">
                                     <CornerDownRight
-                                      size={17}
-                                      className="group-hover:text-sky-400 transition-colors duration-200"
+                                      size={15}
+                                      className="group-hover:text-sky-400 transition-colors duration-200 flex-shrink-0"
                                     />
                                     <p className="text-sm text-black/70 dark:text-white/70 group-hover:text-sky-400 transition-colors duration-200 leading-relaxed">
                                       {suggestion}

src/components/MessageInput.tsx

@@ -2,9 +2,6 @@ import { cn } from '@/lib/utils';
 import { ArrowUp } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
-import Attach from './MessageInputActions/Attach';
-import CopilotToggle from './MessageInputActions/Copilot';
-import { File } from './ChatWindow';
 import AttachSmall from './MessageInputActions/AttachSmall';
 import { useChat } from '@/lib/hooks/useChat';
 
@@ -64,7 +61,7 @@ const MessageInput = () => {
         }
       }}
       className={cn(
-        'bg-light-secondary dark:bg-dark-secondary p-4 flex items-center overflow-hidden border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/20 transition-all duration-200 focus-within:border-light-300 dark:focus-within:border-dark-300',
+        'relative bg-light-secondary dark:bg-dark-secondary p-4 flex items-center overflow-visible border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/20 transition-all duration-200 focus-within:border-light-300 dark:focus-within:border-dark-300',
         mode === 'multi' ? 'flex-col rounded-2xl' : 'flex-row rounded-full',
       )}
     >
@@ -80,11 +77,16 @@ const MessageInput = () => {
         placeholder="Ask a follow-up"
       />
       {mode === 'single' && (
-        <div className="flex flex-row items-center space-x-4">
-          <CopilotToggle
-            copilotEnabled={copilotEnabled}
-            setCopilotEnabled={setCopilotEnabled}
-          />
+        <button
+          disabled={message.trim().length === 0 || loading}
+          className="bg-[#24A0ED] text-white disabled:text-black/50 dark:disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#e0e0dc79] dark:disabled:bg-[#ececec21] rounded-full p-2"
+        >
+          <ArrowUp className="bg-background" size={17} />
+        </button>
+      )}
+      {mode === 'multi' && (
+        <div className="flex flex-row items-center justify-between w-full pt-2">
+          <AttachSmall />
           <button
             disabled={message.trim().length === 0 || loading}
             className="bg-[#24A0ED] text-white disabled:text-black/50 dark:disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#e0e0dc79] dark:disabled:bg-[#ececec21] rounded-full p-2"
@@ -93,23 +95,6 @@ const MessageInput = () => {
           </button>
         </div>
       )}
-      {mode === 'multi' && (
-        <div className="flex flex-row items-center justify-between w-full pt-2">
-          <AttachSmall />
-          <div className="flex flex-row items-center space-x-4">
-            <CopilotToggle
-              copilotEnabled={copilotEnabled}
-              setCopilotEnabled={setCopilotEnabled}
-            />
-            <button
-              disabled={message.trim().length === 0 || loading}
-              className="bg-[#24A0ED] text-white text-black/50 dark:disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#e0e0dc79] dark:disabled:bg-[#ececec21] rounded-full p-2"
-            >
-              <ArrowUp className="bg-background" size={17} />
-            </button>
-          </div>
-        </div>
-      )}
     </form>
   );
 };

src/components/MessageInputActions/Attach.tsx

@@ -16,6 +16,8 @@ import {
 } from 'lucide-react';
 import { Fragment, useRef, useState } from 'react';
 import { useChat } from '@/lib/hooks/useChat';
+import { AnimatePresence } from 'motion/react';
+import { motion } from 'framer-motion';
 
 const Attach = () => {
   const { files, setFiles, setFileIds, fileIds } = useChat();
@@ -53,86 +55,95 @@ const Attach = () => {
 
   return loading ? (
     <div className="active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none text-black/50 dark:text-white/50 transition duration-200">
-      <LoaderCircle size={16} className="text-sky-400 animate-spin" />
+      <LoaderCircle size={16} className="text-sky-500 animate-spin" />
     </div>
   ) : files.length > 0 ? (
     <Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
-      <PopoverButton
-        type="button"
-        className="active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none headless-open:text-black dark:headless-open:text-white text-black/50 dark:text-white/50 active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
-      >
-        <File size={16} className="text-sky-400" />
-      </PopoverButton>
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-150"
-        enterFrom="opacity-0 translate-y-1"
-        enterTo="opacity-100 translate-y-0"
-        leave="transition ease-in duration-150"
-        leaveFrom="opacity-100 translate-y-0"
-        leaveTo="opacity-0 translate-y-1"
-      >
-        <PopoverPanel className="absolute z-10 w-64 md:w-[350px] right-0">
-          <div className="bg-light-primary dark:bg-dark-primary border rounded-md border-light-200 dark:border-dark-200 w-full max-h-[200px] md:max-h-none overflow-y-auto flex flex-col">
-            <div className="flex flex-row items-center justify-between px-3 py-2">
-              <h4 className="text-black dark:text-white font-medium text-sm">
-                Attached files
-              </h4>
-              <div className="flex flex-row items-center space-x-4">
-                <button
-                  type="button"
-                  onClick={() => fileInputRef.current.click()}
-                  className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200 focus:outline-none"
+      {({ open }) => (
+        <>
+          <PopoverButton
+            type="button"
+            className="active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none headless-open:text-black dark:headless-open:text-white text-black/50 dark:text-white/50 active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
+          >
+            <File size={16} className="text-sky-500" />
+          </PopoverButton>
+          <AnimatePresence>
+            {open && (
+              <PopoverPanel
+                className="absolute z-10 w-64 md:w-[350px] right-0"
+                static
+              >
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.9 }}
+                  transition={{ duration: 0.1, ease: 'easeOut' }}
+                  className="origin-top-right bg-light-primary dark:bg-dark-primary border rounded-md border-light-200 dark:border-dark-200 w-full max-h-[200px] md:max-h-none overflow-y-auto flex flex-col"
                 >
-                  <input
-                    type="file"
-                    onChange={handleChange}
-                    ref={fileInputRef}
-                    accept=".pdf,.docx,.txt"
-                    multiple
-                    hidden
-                  />
-                  <Plus size={16} />
-                  <p className="text-xs">Add</p>
-                </button>
-                <button
-                  onClick={() => {
-                    setFiles([]);
-                    setFileIds([]);
-                  }}
-                  className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200 focus:outline-none"
-                >
-                  <Trash size={14} />
-                  <p className="text-xs">Clear</p>
-                </button>
-              </div>
-            </div>
-            <div className="h-[0.5px] mx-2 bg-white/10" />
-            <div className="flex flex-col items-center">
-              {files.map((file, i) => (
-                <div
-                  key={i}
-                  className="flex flex-row items-center justify-start w-full space-x-3 p-3"
-                >
-                  <div className="bg-light-100 dark:bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
-                    <File
-                      size={16}
-                      className="text-black/70 dark:text-white/70"
-                    />
+                  <div className="flex flex-row items-center justify-between px-3 py-2">
+                    <h4 className="text-black/70 dark:text-white/70 text-sm">
+                      Attached files
+                    </h4>
+                    <div className="flex flex-row items-center space-x-4">
+                      <button
+                        type="button"
+                        onClick={() => fileInputRef.current.click()}
+                        className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200 focus:outline-none"
+                      >
+                        <input
+                          type="file"
+                          onChange={handleChange}
+                          ref={fileInputRef}
+                          accept=".pdf,.docx,.txt"
+                          multiple
+                          hidden
+                        />
+                        <Plus size={16} />
+                        <p className="text-xs">Add</p>
+                      </button>
+                      <button
+                        onClick={() => {
+                          setFiles([]);
+                          setFileIds([]);
+                        }}
+                        className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200 focus:outline-none"
+                      >
+                        <Trash size={13} />
+                        <p className="text-xs">Clear</p>
+                      </button>
+                    </div>
                   </div>
-                  <p className="text-black/70 dark:text-white/70 text-sm">
-                    {file.fileName.length > 25
-                      ? file.fileName.replace(/\.\w+$/, '').substring(0, 25) +
-                        '...' +
-                        file.fileExtension
-                      : file.fileName}
-                  </p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </PopoverPanel>
-      </Transition>
+                  <div className="h-[0.5px] mx-2 bg-white/10" />
+                  <div className="flex flex-col items-center">
+                    {files.map((file, i) => (
+                      <div
+                        key={i}
+                        className="flex flex-row items-center justify-start w-full space-x-3 p-3"
+                      >
+                        <div className="bg-light-100 dark:bg-dark-100 flex items-center justify-center w-9 h-9 rounded-md">
+                          <File
+                            size={16}
+                            className="text-black/70 dark:text-white/70"
+                          />
+                        </div>
+                        <p className="text-black/70 dark:text-white/70 text-xs">
+                          {file.fileName.length > 25
+                            ? file.fileName
+                                .replace(/\.\w+$/, '')
+                                .substring(0, 25) +
+                              '...' +
+                              file.fileExtension
+                            : file.fileName}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                </motion.div>
+              </PopoverPanel>
+            )}
+          </AnimatePresence>
+        </>
+      )}
     </Popover>
   ) : (
     <button

src/components/MessageInputActions/AttachSmall.tsx

@@ -1,21 +1,14 @@
-import { cn } from '@/lib/utils';
 import {
   Popover,
   PopoverButton,
   PopoverPanel,
   Transition,
 } from '@headlessui/react';
-import {
-  CopyPlus,
-  File,
-  LoaderCircle,
-  Paperclip,
-  Plus,
-  Trash,
-} from 'lucide-react';
+import { File, LoaderCircle, Paperclip, Plus, Trash } from 'lucide-react';
 import { Fragment, useRef, useState } from 'react';
-import { File as FileType } from '../ChatWindow';
 import { useChat } from '@/lib/hooks/useChat';
+import { AnimatePresence } from 'motion/react';
+import { motion } from 'framer-motion';
 
 const AttachSmall = () => {
   const { files, setFiles, setFileIds, fileIds } = useChat();
@@ -53,86 +46,95 @@ const AttachSmall = () => {
 
   return loading ? (
     <div className="flex flex-row items-center justify-between space-x-1 p-1 ">
-      <LoaderCircle size={20} className="text-sky-400 animate-spin" />
+      <LoaderCircle size={20} className="text-sky-500 animate-spin" />
     </div>
   ) : files.length > 0 ? (
     <Popover className="max-w-[15rem] md:max-w-md lg:max-w-lg">
-      <PopoverButton
-        type="button"
-        className="flex flex-row items-center justify-between space-x-1 p-1 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
-      >
-        <File size={20} className="text-sky-400" />
-      </PopoverButton>
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-150"
-        enterFrom="opacity-0 translate-y-1"
-        enterTo="opacity-100 translate-y-0"
-        leave="transition ease-in duration-150"
-        leaveFrom="opacity-100 translate-y-0"
-        leaveTo="opacity-0 translate-y-1"
-      >
-        <PopoverPanel className="absolute z-10 w-64 md:w-[350px] bottom-14 -ml-3">
-          <div className="bg-light-primary dark:bg-dark-primary border rounded-md border-light-200 dark:border-dark-200 w-full max-h-[200px] md:max-h-none overflow-y-auto flex flex-col">
-            <div className="flex flex-row items-center justify-between px-3 py-2">
-              <h4 className="text-black dark:text-white font-medium text-sm">
-                Attached files
-              </h4>
-              <div className="flex flex-row items-center space-x-4">
-                <button
-                  type="button"
-                  onClick={() => fileInputRef.current.click()}
-                  className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
+      {({ open }) => (
+        <>
+          <PopoverButton
+            type="button"
+            className="flex flex-row items-center justify-between space-x-1 p-1 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
+          >
+            <File size={20} className="text-sky-500" />
+          </PopoverButton>
+          <AnimatePresence>
+            {open && (
+              <PopoverPanel
+                className="absolute z-10 w-64 md:w-[350px] bottom-14"
+                static
+              >
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.9 }}
+                  transition={{ duration: 0.1, ease: 'easeOut' }}
+                  className="origin-bottom-left bg-light-primary dark:bg-dark-primary border rounded-md border-light-200 dark:border-dark-200 w-full max-h-[200px] md:max-h-none overflow-y-auto flex flex-col"
                 >
-                  <input
-                    type="file"
-                    onChange={handleChange}
-                    ref={fileInputRef}
-                    accept=".pdf,.docx,.txt"
-                    multiple
-                    hidden
-                  />
-                  <Plus size={18} />
-                  <p className="text-xs">Add</p>
-                </button>
-                <button
-                  onClick={() => {
-                    setFiles([]);
-                    setFileIds([]);
-                  }}
-                  className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
-                >
-                  <Trash size={14} />
-                  <p className="text-xs">Clear</p>
-                </button>
-              </div>
-            </div>
-            <div className="h-[0.5px] mx-2 bg-white/10" />
-            <div className="flex flex-col items-center">
-              {files.map((file, i) => (
-                <div
-                  key={i}
-                  className="flex flex-row items-center justify-start w-full space-x-3 p-3"
-                >
-                  <div className="bg-light-100 dark:bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
-                    <File
-                      size={16}
-                      className="text-black/70 dark:text-white/70"
-                    />
+                  <div className="flex flex-row items-center justify-between px-3 py-2">
+                    <h4 className="text-black/70 dark:text-white/70 font-medium text-sm">
+                      Attached files
+                    </h4>
+                    <div className="flex flex-row items-center space-x-4">
+                      <button
+                        type="button"
+                        onClick={() => fileInputRef.current.click()}
+                        className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
+                      >
+                        <input
+                          type="file"
+                          onChange={handleChange}
+                          ref={fileInputRef}
+                          accept=".pdf,.docx,.txt"
+                          multiple
+                          hidden
+                        />
+                        <Plus size={16} />
+                        <p className="text-xs">Add</p>
+                      </button>
+                      <button
+                        onClick={() => {
+                          setFiles([]);
+                          setFileIds([]);
+                        }}
+                        className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
+                      >
+                        <Trash size={13} />
+                        <p className="text-xs">Clear</p>
+                      </button>
+                    </div>
                   </div>
-                  <p className="text-black/70 dark:text-white/70 text-sm">
-                    {file.fileName.length > 25
-                      ? file.fileName.replace(/\.\w+$/, '').substring(0, 25) +
-                        '...' +
-                        file.fileExtension
-                      : file.fileName}
-                  </p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </PopoverPanel>
-      </Transition>
+                  <div className="h-[0.5px] mx-2 bg-white/10" />
+                  <div className="flex flex-col items-center">
+                    {files.map((file, i) => (
+                      <div
+                        key={i}
+                        className="flex flex-row items-center justify-start w-full space-x-3 p-3"
+                      >
+                        <div className="bg-light-100 dark:bg-dark-100 flex items-center justify-center w-9 h-9 rounded-md">
+                          <File
+                            size={16}
+                            className="text-black/70 dark:text-white/70"
+                          />
+                        </div>
+                        <p className="text-black/70 dark:text-white/70 text-xs">
+                          {file.fileName.length > 25
+                            ? file.fileName
+                                .replace(/\.\w+$/, '')
+                                .substring(0, 25) +
+                              '...' +
+                              file.fileExtension
+                            : file.fileName}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                </motion.div>
+              </PopoverPanel>
+            )}
+          </AnimatePresence>
+        </>
+      )}
     </Popover>
   ) : (
     <button

src/components/MessageInputActions/ChatModelSelector.tsx

@@ -2,15 +2,11 @@
 
 import { Cpu, Loader2, Search } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import {
-  Popover,
-  PopoverButton,
-  PopoverPanel,
-  Transition,
-} from '@headlessui/react';
-import { Fragment, useEffect, useMemo, useState } from 'react';
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react';
+import { useEffect, useMemo, useState } from 'react';
 import { MinimalProvider } from '@/lib/models/types';
 import { useChat } from '@/lib/hooks/useChat';
+import { AnimatePresence, motion } from 'motion/react';
 
 const ModelSelector = () => {
   const [providers, setProviders] = useState<MinimalProvider[]>([]);
@@ -79,119 +75,127 @@ const ModelSelector = () => {
 
   return (
     <Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
-      <PopoverButton
-        type="button"
-        className="active:border-none hover:bg-light-200  hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none headless-open:text-black dark:headless-open:text-white text-black/50 dark:text-white/50 active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
-      >
-        <Cpu size={16} className="text-sky-500" />
-      </PopoverButton>
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="opacity-0 translate-y-1"
-        enterTo="opacity-100 translate-y-0"
-        leave="transition ease-in duration-100"
-        leaveFrom="opacity-100 translate-y-0"
-        leaveTo="opacity-0 translate-y-1"
-      >
-        <PopoverPanel className="absolute z-10 w-[230px] sm:w-[270px] md:w-[300px] -right-4">
-          <div className="bg-light-primary dark:bg-dark-primary max-h-[300px] sm:max-w-none border rounded-lg border-light-200 dark:border-dark-200 w-full flex flex-col shadow-lg overflow-hidden">
-            <div className="p-4 border-b border-light-200 dark:border-dark-200">
-              <div className="relative">
-                <Search
-                  size={16}
-                  className="absolute left-3 top-1/2 -translate-y-1/2 text-black/40 dark:text-white/40"
-                />
-                <input
-                  type="text"
-                  placeholder="Search models..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full pl-9 pr-3 py-2 bg-light-secondary dark:bg-dark-secondary rounded-lg placeholder:text-sm text-sm text-black dark:text-white placeholder:text-black/40 dark:placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-sky-500/20 border border-transparent focus:border-sky-500/30 transition duration-200"
-                />
-              </div>
-            </div>
+      {({ open }) => (
+        <>
+          <PopoverButton
+            type="button"
+            className="active:border-none hover:bg-light-200  hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none headless-open:text-black dark:headless-open:text-white text-black/50 dark:text-white/50 active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
+          >
+            <Cpu size={16} className="text-sky-500" />
+          </PopoverButton>
+          <AnimatePresence>
+            {open && (
+              <PopoverPanel
+                className="absolute z-10 w-[230px] sm:w-[270px] md:w-[300px] right-0"
+                static
+              >
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.9 }}
+                  transition={{ duration: 0.1, ease: 'easeOut' }}
+                  className="origin-top-right bg-light-primary dark:bg-dark-primary max-h-[300px] sm:max-w-none border rounded-lg border-light-200 dark:border-dark-200 w-full flex flex-col shadow-lg overflow-hidden"
+                >
+                  <div className="p-2 border-b border-light-200 dark:border-dark-200">
+                    <div className="relative">
+                      <Search
+                        size={16}
+                        className="absolute left-3 top-1/2 -translate-y-1/2 text-black/40 dark:text-white/40"
+                      />
+                      <input
+                        type="text"
+                        placeholder="Search models..."
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        className="w-full pl-8 pr-3 py-2 bg-light-secondary dark:bg-dark-secondary rounded-lg placeholder:text-xs placeholder:-translate-y-[1.5px] text-xs text-black dark:text-white placeholder:text-black/40 dark:placeholder:text-white/40 focus:outline-none border border-transparent transition duration-200"
+                      />
+                    </div>
+                  </div>
 
-            <div className="max-h-[320px] overflow-y-auto">
-              {isLoading ? (
-                <div className="flex items-center justify-center py-16">
-                  <Loader2
-                    className="animate-spin text-black/40 dark:text-white/40"
-                    size={24}
-                  />
-                </div>
-              ) : filteredProviders.length === 0 ? (
-                <div className="text-center py-16 px-4 text-black/60 dark:text-white/60 text-sm">
-                  {searchQuery
-                    ? 'No models found'
-                    : 'No chat models configured'}
-                </div>
-              ) : (
-                <div className="flex flex-col">
-                  {filteredProviders.map((provider, providerIndex) => (
-                    <div key={provider.id}>
-                      <div className="px-4 py-2.5 sticky top-0 bg-light-primary dark:bg-dark-primary border-b border-light-200/50 dark:border-dark-200/50">
-                        <p className="text-xs text-black/50 dark:text-white/50 uppercase tracking-wider">
-                          {provider.name}
-                        </p>
+                  <div className="max-h-[320px] overflow-y-auto">
+                    {isLoading ? (
+                      <div className="flex items-center justify-center py-16">
+                        <Loader2
+                          className="animate-spin text-black/40 dark:text-white/40"
+                          size={24}
+                        />
                       </div>
-
-                      <div className="flex flex-col px-2 py-2 space-y-0.5">
-                        {provider.chatModels.map((model) => (
-                          <button
-                            key={model.key}
-                            onClick={() =>
-                              handleModelSelect(provider.id, model.key)
-                            }
-                            type="button"
-                            className={cn(
-                              'px-3 py-2 flex items-center justify-between text-start duration-200 cursor-pointer transition rounded-lg group',
-                              chatModelProvider?.providerId === provider.id &&
-                                chatModelProvider?.key === model.key
-                                ? 'bg-light-secondary dark:bg-dark-secondary'
-                                : 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
-                            )}
-                          >
-                            <div className="flex items-center space-x-2.5 min-w-0 flex-1">
-                              <Cpu
-                                size={15}
-                                className={cn(
-                                  'shrink-0',
-                                  chatModelProvider?.providerId ===
-                                    provider.id &&
-                                    chatModelProvider?.key === model.key
-                                    ? 'text-sky-500'
-                                    : 'text-black/50 dark:text-white/50 group-hover:text-black/70 group-hover:dark:text-white/70',
-                                )}
-                              />
-                              <p
-                                className={cn(
-                                  'text-sm truncate',
-                                  chatModelProvider?.providerId ===
-                                    provider.id &&
-                                    chatModelProvider?.key === model.key
-                                    ? 'text-sky-500 font-medium'
-                                    : 'text-black/70 dark:text-white/70 group-hover:text-black dark:group-hover:text-white',
-                                )}
-                              >
-                                {model.name}
+                    ) : filteredProviders.length === 0 ? (
+                      <div className="text-center py-16 px-4 text-black/60 dark:text-white/60 text-sm">
+                        {searchQuery
+                          ? 'No models found'
+                          : 'No chat models configured'}
+                      </div>
+                    ) : (
+                      <div className="flex flex-col">
+                        {filteredProviders.map((provider, providerIndex) => (
+                          <div key={provider.id}>
+                            <div className="px-4 py-2.5 sticky top-0 bg-light-primary dark:bg-dark-primary border-b border-light-200/50 dark:border-dark-200/50">
+                              <p className="text-xs text-black/50 dark:text-white/50 uppercase tracking-wider">
+                                {provider.name}
                               </p>
                             </div>
-                          </button>
+
+                            <div className="flex flex-col px-2 py-2 space-y-0.5">
+                              {provider.chatModels.map((model) => (
+                                <button
+                                  key={model.key}
+                                  onClick={() =>
+                                    handleModelSelect(provider.id, model.key)
+                                  }
+                                  type="button"
+                                  className={cn(
+                                    'px-3 py-2 flex items-center justify-between text-start duration-200 cursor-pointer transition rounded-lg group',
+                                    chatModelProvider?.providerId ===
+                                      provider.id &&
+                                      chatModelProvider?.key === model.key
+                                      ? 'bg-light-secondary dark:bg-dark-secondary'
+                                      : 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
+                                  )}
+                                >
+                                  <div className="flex items-center space-x-2.5 min-w-0 flex-1">
+                                    <Cpu
+                                      size={15}
+                                      className={cn(
+                                        'shrink-0',
+                                        chatModelProvider?.providerId ===
+                                          provider.id &&
+                                          chatModelProvider?.key === model.key
+                                          ? 'text-sky-500'
+                                          : 'text-black/50 dark:text-white/50 group-hover:text-black/70 group-hover:dark:text-white/70',
+                                      )}
+                                    />
+                                    <p
+                                      className={cn(
+                                        'text-xs truncate',
+                                        chatModelProvider?.providerId ===
+                                          provider.id &&
+                                          chatModelProvider?.key === model.key
+                                          ? 'text-sky-500 font-medium'
+                                          : 'text-black/70 dark:text-white/70 group-hover:text-black dark:group-hover:text-white',
+                                      )}
+                                    >
+                                      {model.name}
+                                    </p>
+                                  </div>
+                                </button>
+                              ))}
+                            </div>
+
+                            {providerIndex < filteredProviders.length - 1 && (
+                              <div className="h-px bg-light-200 dark:bg-dark-200" />
+                            )}
+                          </div>
                         ))}
                       </div>
-
-                      {providerIndex < filteredProviders.length - 1 && (
-                        <div className="h-px bg-light-200 dark:bg-dark-200" />
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        </PopoverPanel>
-      </Transition>
+                    )}
+                  </div>
+                </motion.div>
+              </PopoverPanel>
+            )}
+          </AnimatePresence>
+        </>
+      )}
     </Popover>
   );
 };

src/components/MessageInputActions/Copilot.tsx

@@ -1,43 +0,0 @@
-import { cn } from '@/lib/utils';
-import { Switch } from '@headlessui/react';
-
-const CopilotToggle = ({
-  copilotEnabled,
-  setCopilotEnabled,
-}: {
-  copilotEnabled: boolean;
-  setCopilotEnabled: (enabled: boolean) => void;
-}) => {
-  return (
-    <div className="group flex flex-row items-center space-x-1 active:scale-95 duration-200 transition cursor-pointer">
-      <Switch
-        checked={copilotEnabled}
-        onChange={setCopilotEnabled}
-        className="bg-light-secondary dark:bg-dark-secondary border border-light-200/70 dark:border-dark-200 relative inline-flex h-5 w-10 sm:h-6 sm:w-11 items-center rounded-full"
-      >
-        <span className="sr-only">Copilot</span>
-        <span
-          className={cn(
-            copilotEnabled
-              ? 'translate-x-6 bg-[#24A0ED]'
-              : 'translate-x-1 bg-black/50 dark:bg-white/50',
-            'inline-block h-3 w-3 sm:h-4 sm:w-4 transform rounded-full transition-all duration-200',
-          )}
-        />
-      </Switch>
-      <p
-        onClick={() => setCopilotEnabled(!copilotEnabled)}
-        className={cn(
-          'text-xs font-medium transition-colors duration-150 ease-in-out',
-          copilotEnabled
-            ? 'text-[#24A0ED]'
-            : 'text-black/50 dark:text-white/50 group-hover:text-black dark:group-hover:text-white',
-        )}
-      >
-        Copilot
-      </p>
-    </div>
-  );
-};
-
-export default CopilotToggle;

src/components/MessageInputActions/Focus.tsx

@@ -1,123 +0,0 @@
-import {
-  BadgePercent,
-  ChevronDown,
-  Globe,
-  Pencil,
-  ScanEye,
-  SwatchBook,
-} from 'lucide-react';
-import { cn } from '@/lib/utils';
-import {
-  Popover,
-  PopoverButton,
-  PopoverPanel,
-  Transition,
-} from '@headlessui/react';
-import { SiReddit, SiYoutube } from '@icons-pack/react-simple-icons';
-import { Fragment } from 'react';
-import { useChat } from '@/lib/hooks/useChat';
-
-const focusModes = [
-  {
-    key: 'webSearch',
-    title: 'All',
-    description: 'Searches across all of the internet',
-    icon: <Globe size={16} />,
-  },
-  {
-    key: 'academicSearch',
-    title: 'Academic',
-    description: 'Search in published academic papers',
-    icon: <SwatchBook size={16} />,
-  },
-  {
-    key: 'writingAssistant',
-    title: 'Writing',
-    description: 'Chat without searching the web',
-    icon: <Pencil size={16} />,
-  },
-  {
-    key: 'wolframAlphaSearch',
-    title: 'Wolfram Alpha',
-    description: 'Computational knowledge engine',
-    icon: <BadgePercent size={16} />,
-  },
-  {
-    key: 'youtubeSearch',
-    title: 'Youtube',
-    description: 'Search and watch videos',
-    icon: <SiYoutube className="h-[16px] w-auto mr-0.5" />,
-  },
-  {
-    key: 'redditSearch',
-    title: 'Reddit',
-    description: 'Search for discussions and opinions',
-    icon: <SiReddit className="h-[16px] w-auto mr-0.5" />,
-  },
-];
-
-const Focus = () => {
-  const { focusMode, setFocusMode } = useChat();
-
-  return (
-    <Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
-      <PopoverButton
-        type="button"
-        className="active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none headless-open:text-black dark:headless-open:text-white text-black/50 dark:text-white/50 active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
-      >
-        {focusMode !== 'webSearch' ? (
-          <div className="flex flex-row items-center space-x-1">
-            {focusModes.find((mode) => mode.key === focusMode)?.icon}
-          </div>
-        ) : (
-          <div className="flex flex-row items-center space-x-1">
-            <Globe size={16} />
-          </div>
-        )}
-      </PopoverButton>
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-150"
-        enterFrom="opacity-0 translate-y-1"
-        enterTo="opacity-100 translate-y-0"
-        leave="transition ease-in duration-150"
-        leaveFrom="opacity-100 translate-y-0"
-        leaveTo="opacity-0 translate-y-1"
-      >
-        <PopoverPanel className="absolute z-10 w-64 md:w-[500px] -right-4">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 w-full p-4 max-h-[200px] md:max-h-none overflow-y-auto">
-            {focusModes.map((mode, i) => (
-              <PopoverButton
-                onClick={() => setFocusMode(mode.key)}
-                key={i}
-                className={cn(
-                  'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-2 duration-200 cursor-pointer transition focus:outline-none',
-                  focusMode === mode.key
-                    ? 'bg-light-secondary dark:bg-dark-secondary'
-                    : 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
-                )}
-              >
-                <div
-                  className={cn(
-                    'flex flex-row items-center space-x-1',
-                    focusMode === mode.key
-                      ? 'text-[#24A0ED]'
-                      : 'text-black dark:text-white',
-                  )}
-                >
-                  {mode.icon}
-                  <p className="text-sm font-medium">{mode.title}</p>
-                </div>
-                <p className="text-black/70 dark:text-white/70 text-xs">
-                  {mode.description}
-                </p>
-              </PopoverButton>
-            ))}
-          </div>
-        </PopoverPanel>
-      </Transition>
-    </Popover>
-  );
-};
-
-export default Focus;

src/components/MessageInputActions/Optimization.tsx

@@ -8,6 +8,7 @@ import {
 } from '@headlessui/react';
 import { Fragment } from 'react';
 import { useChat } from '@/lib/hooks/useChat';
+import { AnimatePresence, motion } from 'motion/react';
 
 const OptimizationModes = [
   {
@@ -60,40 +61,50 @@ const Optimization = () => {
               />
             </div>
           </PopoverButton>
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-150"
-            enterFrom="opacity-0 translate-y-1"
-            enterTo="opacity-100 translate-y-0"
-            leave="transition ease-in duration-150"
-            leaveFrom="opacity-100 translate-y-0"
-            leaveTo="opacity-0 translate-y-1"
-          >
-            <PopoverPanel className="absolute z-10 w-64 md:w-[250px] left-0">
-              <div className="flex flex-col gap-2 bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 w-full p-4 max-h-[200px] md:max-h-none overflow-y-auto">
-                {OptimizationModes.map((mode, i) => (
-                  <PopoverButton
-                    onClick={() => setOptimizationMode(mode.key)}
-                    key={i}
-                    className={cn(
-                      'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-1 duration-200 cursor-pointer transition focus:outline-none',
-                      optimizationMode === mode.key
-                        ? 'bg-light-secondary dark:bg-dark-secondary'
-                        : 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
-                    )}
-                  >
-                    <div className="flex flex-row items-center space-x-1 text-black dark:text-white">
-                      {mode.icon}
-                      <p className="text-sm font-medium">{mode.title}</p>
-                    </div>
-                    <p className="text-black/70 dark:text-white/70 text-xs">
-                      {mode.description}
-                    </p>
-                  </PopoverButton>
-                ))}
-              </div>
-            </PopoverPanel>
-          </Transition>
+          <AnimatePresence>
+            {open && (
+              <PopoverPanel
+                className="absolute z-10 w-64 md:w-[250px] left-0"
+                static
+              >
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.9 }}
+                  transition={{ duration: 0.1, ease: 'easeOut' }}
+                  className="origin-top-left flex flex-col space-y-2 bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 w-full p-2 max-h-[200px] md:max-h-none overflow-y-auto"
+                >
+                  {OptimizationModes.map((mode, i) => (
+                    <PopoverButton
+                      onClick={() => setOptimizationMode(mode.key)}
+                      key={i}
+                      className={cn(
+                        'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-1 duration-200 cursor-pointer transition focus:outline-none',
+                        optimizationMode === mode.key
+                          ? 'bg-light-secondary dark:bg-dark-secondary'
+                          : 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
+                      )}
+                    >
+                      <div className="flex flex-row justify-between w-full text-black dark:text-white">
+                        <div className="flex flex-row space-x-1">
+                          {mode.icon}
+                          <p className="text-xs font-medium">{mode.title}</p>
+                        </div>
+                        {mode.key === 'quality' && (
+                          <span className="bg-sky-500/70 dark:bg-sky-500/40 border border-sky-600 px-1 rounded-full text-[10px] text-white">
+                            Beta
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-black/70 dark:text-white/70 text-xs">
+                        {mode.description}
+                      </p>
+                    </PopoverButton>
+                  ))}
+                </motion.div>
+              </PopoverPanel>
+            )}
+          </AnimatePresence>
         </>
       )}
     </Popover>

src/components/MessageInputActions/Sources.tsx

@@ -0,0 +1,93 @@
+import { useChat } from '@/lib/hooks/useChat';
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  Switch,
+} from '@headlessui/react';
+import {
+  GlobeIcon,
+  GraduationCapIcon,
+  NetworkIcon,
+} from '@phosphor-icons/react';
+import { AnimatePresence, motion } from 'motion/react';
+
+const sourcesList = [
+  {
+    name: 'Web',
+    key: 'web',
+    icon: <GlobeIcon className="h-[16px] w-auto" />,
+  },
+  {
+    name: 'Academic',
+    key: 'academic',
+    icon: <GraduationCapIcon className="h-[16px] w-auto" />,
+  },
+  {
+    name: 'Social',
+    key: 'discussions',
+    icon: <NetworkIcon className="h-[16px] w-auto" />,
+  },
+];
+
+const Sources = () => {
+  const { sources, setSources } = useChat();
+
+  return (
+    <Popover className="relative">
+      {({ open }) => (
+        <>
+          <PopoverButton className="flex items-center justify-center active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none text-black/50 dark:text-white/50 active:scale-95 transition duration-200 hover:text-black dark:hover:text-white">
+            <GlobeIcon className="h-[18px] w-auto" />
+          </PopoverButton>
+          <AnimatePresence>
+            {open && (
+              <PopoverPanel
+                static
+                className="absolute z-10 w-64 md:w-[225px] right-0"
+              >
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.9 }}
+                  transition={{ duration: 0.1, ease: 'easeOut' }}
+                  className="origin-top-right flex flex-col bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 w-full p-1 max-h-[200px] md:max-h-none overflow-y-auto shadow-lg"
+                >
+                  {sourcesList.map((source, i) => (
+                    <div
+                      key={i}
+                      className="flex flex-row justify-between hover:bg-light-100 hover:dark:bg-dark-100 rounded-md py-3 px-2 cursor-pointer"
+                      onClick={() => {
+                        if (!sources.includes(source.key)) {
+                          setSources([...sources, source.key]);
+                        } else {
+                          setSources(sources.filter((s) => s !== source.key));
+                        }
+                      }}
+                    >
+                      <div className="flex flex-row space-x-1.5 text-black/80 dark:text-white/80">
+                        {source.icon}
+                        <p className="text-xs">{source.name}</p>
+                      </div>
+                      <Switch
+                        checked={sources.includes(source.key)}
+                        className="group relative flex h-4 w-7 shrink-0 cursor-pointer rounded-full bg-light-200 dark:bg-white/10 p-0.5 duration-200 ease-in-out focus:outline-none transition-colors disabled:opacity-60 disabled:cursor-not-allowed data-[checked]:bg-sky-500 dark:data-[checked]:bg-sky-500"
+                      >
+                        <span
+                          aria-hidden="true"
+                          className="pointer-events-none inline-block size-3 translate-x-[1px] group-data-[checked]:translate-x-3 rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
+                        />
+                      </Switch>
+                    </div>
+                  ))}
+                </motion.div>
+              </PopoverPanel>
+            )}
+          </AnimatePresence>
+        </>
+      )}
+    </Popover>
+  );
+};
+
+export default Sources;

src/components/MessageRenderer/CodeBlock/CodeBlockDarkTheme.ts

@@ -0,0 +1,102 @@
+import type { CSSProperties } from 'react';
+
+const darkTheme = {
+  'hljs-comment': {
+    color: '#8b949e',
+  },
+  'hljs-quote': {
+    color: '#8b949e',
+  },
+  'hljs-variable': {
+    color: '#ff7b72',
+  },
+  'hljs-template-variable': {
+    color: '#ff7b72',
+  },
+  'hljs-tag': {
+    color: '#ff7b72',
+  },
+  'hljs-name': {
+    color: '#ff7b72',
+  },
+  'hljs-selector-id': {
+    color: '#ff7b72',
+  },
+  'hljs-selector-class': {
+    color: '#ff7b72',
+  },
+  'hljs-regexp': {
+    color: '#ff7b72',
+  },
+  'hljs-deletion': {
+    color: '#ff7b72',
+  },
+  'hljs-number': {
+    color: '#f2cc60',
+  },
+  'hljs-built_in': {
+    color: '#f2cc60',
+  },
+  'hljs-builtin-name': {
+    color: '#f2cc60',
+  },
+  'hljs-literal': {
+    color: '#f2cc60',
+  },
+  'hljs-type': {
+    color: '#f2cc60',
+  },
+  'hljs-params': {
+    color: '#f2cc60',
+  },
+  'hljs-meta': {
+    color: '#f2cc60',
+  },
+  'hljs-link': {
+    color: '#f2cc60',
+  },
+  'hljs-attribute': {
+    color: '#58a6ff',
+  },
+  'hljs-string': {
+    color: '#7ee787',
+  },
+  'hljs-symbol': {
+    color: '#7ee787',
+  },
+  'hljs-bullet': {
+    color: '#7ee787',
+  },
+  'hljs-addition': {
+    color: '#7ee787',
+  },
+  'hljs-title': {
+    color: '#79c0ff',
+  },
+  'hljs-section': {
+    color: '#79c0ff',
+  },
+  'hljs-keyword': {
+    color: '#c297ff',
+  },
+  'hljs-selector-tag': {
+    color: '#c297ff',
+  },
+  hljs: {
+    display: 'block',
+    overflowX: 'auto',
+    background: '#0d1117',
+    color: '#c9d1d9',
+    padding: '0.75em',
+    border: '1px solid #21262d',
+    borderRadius: '10px',
+  },
+  'hljs-emphasis': {
+    fontStyle: 'italic',
+  },
+  'hljs-strong': {
+    fontWeight: 'bold',
+  },
+} satisfies Record<string, CSSProperties>;
+
+export default darkTheme;

src/components/MessageRenderer/CodeBlock/CodeBlockLightTheme.ts

@@ -0,0 +1,102 @@
+import type { CSSProperties } from 'react';
+
+const lightTheme = {
+  'hljs-comment': {
+    color: '#6e7781',
+  },
+  'hljs-quote': {
+    color: '#6e7781',
+  },
+  'hljs-variable': {
+    color: '#d73a49',
+  },
+  'hljs-template-variable': {
+    color: '#d73a49',
+  },
+  'hljs-tag': {
+    color: '#d73a49',
+  },
+  'hljs-name': {
+    color: '#d73a49',
+  },
+  'hljs-selector-id': {
+    color: '#d73a49',
+  },
+  'hljs-selector-class': {
+    color: '#d73a49',
+  },
+  'hljs-regexp': {
+    color: '#d73a49',
+  },
+  'hljs-deletion': {
+    color: '#d73a49',
+  },
+  'hljs-number': {
+    color: '#b08800',
+  },
+  'hljs-built_in': {
+    color: '#b08800',
+  },
+  'hljs-builtin-name': {
+    color: '#b08800',
+  },
+  'hljs-literal': {
+    color: '#b08800',
+  },
+  'hljs-type': {
+    color: '#b08800',
+  },
+  'hljs-params': {
+    color: '#b08800',
+  },
+  'hljs-meta': {
+    color: '#b08800',
+  },
+  'hljs-link': {
+    color: '#b08800',
+  },
+  'hljs-attribute': {
+    color: '#0a64ae',
+  },
+  'hljs-string': {
+    color: '#22863a',
+  },
+  'hljs-symbol': {
+    color: '#22863a',
+  },
+  'hljs-bullet': {
+    color: '#22863a',
+  },
+  'hljs-addition': {
+    color: '#22863a',
+  },
+  'hljs-title': {
+    color: '#005cc5',
+  },
+  'hljs-section': {
+    color: '#005cc5',
+  },
+  'hljs-keyword': {
+    color: '#6f42c1',
+  },
+  'hljs-selector-tag': {
+    color: '#6f42c1',
+  },
+  hljs: {
+    display: 'block',
+    overflowX: 'auto',
+    background: '#ffffff',
+    color: '#24292f',
+    padding: '0.75em',
+    border: '1px solid #e8edf1',
+    borderRadius: '10px',
+  },
+  'hljs-emphasis': {
+    fontStyle: 'italic',
+  },
+  'hljs-strong': {
+    fontWeight: 'bold',
+  },
+} satisfies Record<string, CSSProperties>;
+
+export default lightTheme;

src/components/MessageRenderer/CodeBlock/index.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { CheckIcon, CopyIcon } from '@phosphor-icons/react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTheme } from 'next-themes';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import darkTheme from './CodeBlockDarkTheme';
+import lightTheme from './CodeBlockLightTheme';
+
+const CodeBlock = ({
+  language,
+  children,
+}: {
+  language: string;
+  children: React.ReactNode;
+}) => {
+  const { resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const syntaxTheme = useMemo(() => {
+    if (!mounted) return lightTheme;
+    return resolvedTheme === 'dark' ? darkTheme : lightTheme;
+  }, [mounted, resolvedTheme]);
+
+  return (
+    <div className="relative">
+      <button
+        className="absolute top-2 right-2 p-1"
+        onClick={() => {
+          navigator.clipboard.writeText(children as string);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2000);
+        }}
+      >
+        {copied ? (
+          <CheckIcon
+            size={16}
+            className="absolute top-2 right-2 text-black/70 dark:text-white/70"
+          />
+        ) : (
+          <CopyIcon
+            size={16}
+            className="absolute top-2 right-2 transition duration-200 text-black/70 dark:text-white/70 hover:text-gray-800/70 hover:dark:text-gray-300/70"
+          />
+        )}
+      </button>
+      <SyntaxHighlighter
+        language={language}
+        style={syntaxTheme}
+        showInlineLineNumbers
+      >
+        {children as string}
+      </SyntaxHighlighter>
+    </div>
+  );
+};
+
+export default CodeBlock;

src/components/MessageSources.tsx

@@ -37,7 +37,7 @@ const MessageSources = ({ sources }: { sources: Chunk[] }) => {
           </p>
           <div className="flex flex-row items-center justify-between">
             <div className="flex flex-row items-center space-x-1">
-              {source.metadata.url === 'File' ? (
+              {source.metadata.url.includes('file_id://') ? (
                 <div className="bg-dark-200 hover:bg-dark-100 transition duration-200 flex items-center justify-center w-6 h-6 rounded-full">
                   <File size={12} className="text-white/70" />
                 </div>
@@ -51,7 +51,9 @@ const MessageSources = ({ sources }: { sources: Chunk[] }) => {
                 />
               )}
               <p className="text-xs text-black/50 dark:text-white/50 overflow-hidden whitespace-nowrap text-ellipsis">
-                {source.metadata.url.replace(/.+\/\/|www.|\..+/g, '')}
+                {source.metadata.url.includes('file_id://')
+                  ? 'Uploaded File'
+                  : source.metadata.url.replace(/.+\/\/|www.|\..+/g, '')}
               </p>
             </div>
             <div className="flex flex-row items-center space-x-1 text-black/50 dark:text-white/50 text-xs">
@@ -68,7 +70,7 @@ const MessageSources = ({ sources }: { sources: Chunk[] }) => {
         >
           <div className="flex flex-row items-center space-x-1">
             {sources.slice(3, 6).map((source, i) => {
-              return source.metadata.url === 'File' ? (
+              return source.metadata.includes('file_id://') ? (
                 <div
                   key={i}
                   className="bg-dark-200 hover:bg-dark-100 transition duration-200 flex items-center justify-center w-6 h-6 rounded-full"
@@ -122,7 +124,7 @@ const MessageSources = ({ sources }: { sources: Chunk[] }) => {
                         </p>
                         <div className="flex flex-row items-center justify-between">
                           <div className="flex flex-row items-center space-x-1">
-                            {source.metadata.url === 'File' ? (
+                            {source.metadata.url.includes('file_id://') ? (
                               <div className="bg-dark-200 hover:bg-dark-100 transition duration-200 flex items-center justify-center w-6 h-6 rounded-full">
                                 <File size={12} className="text-white/70" />
                               </div>

src/components/Navbar.tsx

@@ -205,8 +205,9 @@ const Navbar = () => {
   useEffect(() => {
     if (sections.length > 0 && sections[0].message) {
       const newTitle =
-        sections[0].message.query.substring(0, 30) + '...' ||
-        'New Conversation';
+        sections[0].message.query.length > 30
+          ? `${sections[0].message.query.substring(0, 30).trim()}...`
+          : sections[0].message.query || 'New Conversation';
 
       setTitle(newTitle);
       const newTimeAgo = formatTimeDifference(

src/components/Settings/SettingsDialogue.tsx

@@ -3,6 +3,7 @@ import {
   ArrowLeft,
   BrainCog,
   ChevronLeft,
+  ExternalLink,
   Search,
   Sliders,
   ToggleRight,
@@ -115,35 +116,52 @@ const SettingsDialogue = ({
             </div>
           ) : (
             <div className="flex flex-1 inset-0 h-full overflow-hidden">
-              <div className="hidden lg:flex flex-col w-[240px] border-r border-white-200 dark:border-dark-200 h-full px-3 pt-3 overflow-y-auto">
-                <button
-                  onClick={() => setIsOpen(false)}
-                  className="group flex flex-row items-center hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg"
-                >
-                  <ChevronLeft
-                    size={18}
-                    className="text-black/50 dark:text-white/50 group-hover:text-black/70 group-hover:dark:text-white/70"
-                  />
-                  <p className="text-black/50 dark:text-white/50 group-hover:text-black/70 group-hover:dark:text-white/70 text-[14px]">
-                    Back
+              <div className="hidden lg:flex flex-col justify-between w-[240px] border-r border-white-200 dark:border-dark-200 h-full px-3 pt-3 overflow-y-auto">
+                <div className="flex flex-col">
+                  <button
+                    onClick={() => setIsOpen(false)}
+                    className="group flex flex-row items-center hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg"
+                  >
+                    <ChevronLeft
+                      size={18}
+                      className="text-black/50 dark:text-white/50 group-hover:text-black/70 group-hover:dark:text-white/70"
+                    />
+                    <p className="text-black/50 dark:text-white/50 group-hover:text-black/70 group-hover:dark:text-white/70 text-[14px]">
+                      Back
+                    </p>
+                  </button>
+
+                  <div className="flex flex-col items-start space-y-1 mt-8">
+                    {sections.map((section) => (
+                      <button
+                        key={section.dataAdd}
+                        className={cn(
+                          `flex flex-row items-center space-x-2 px-2 py-1.5 rounded-lg w-full text-sm hover:bg-light-200 hover:dark:bg-dark-200 transition duration-200 active:scale-95`,
+                          activeSection === section.key
+                            ? 'bg-light-200 dark:bg-dark-200 text-black/90 dark:text-white/90'
+                            : ' text-black/70 dark:text-white/70',
+                        )}
+                        onClick={() => setActiveSection(section.key)}
+                      >
+                        <section.icon size={17} />
+                        <p>{section.name}</p>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                <div className="flex flex-col space-y-1 py-[18px] px-2">
+                  <p className="text-xs text-black/70 dark:text-white/70">
+                    Version: {process.env.NEXT_PUBLIC_VERSION}
                   </p>
-                </button>
-                <div className="flex flex-col items-start space-y-1 mt-8">
-                  {sections.map((section) => (
-                    <button
-                      key={section.dataAdd}
-                      className={cn(
-                        `flex flex-row items-center space-x-2 px-2 py-1.5 rounded-lg w-full text-sm hover:bg-light-200 hover:dark:bg-dark-200 transition duration-200 active:scale-95`,
-                        activeSection === section.key
-                          ? 'bg-light-200 dark:bg-dark-200 text-black/90 dark:text-white/90'
-                          : ' text-black/70 dark:text-white/70',
-                      )}
-                      onClick={() => setActiveSection(section.key)}
-                    >
-                      <section.icon size={17} />
-                      <p>{section.name}</p>
-                    </button>
-                  ))}
+                  <a
+                    href="https://github.com/itzcrazykns/perplexica"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs text-black/70 dark:text-white/70 flex flex-row space-x-1 items-center transition duration-200 hover:text-black/90 hover:dark:text-white/90"
+                  >
+                    <span>GitHub</span>
+                    <ExternalLink size={12} />
+                  </a>
                 </div>
               </div>
               <div className="w-full flex flex-col overflow-hidden">

src/components/Settings/SettingsField.tsx

@@ -12,6 +12,12 @@ import { useTheme } from 'next-themes';
 import { Loader2 } from 'lucide-react';
 import { Switch } from '@headlessui/react';
 
+const emitClientConfigChanged = () => {
+  if (typeof window !== 'undefined') {
+    window.dispatchEvent(new Event('client-config-changed'));
+  }
+};
+
 const SettingsSelect = ({
   field,
   value,
@@ -35,6 +41,7 @@ const SettingsSelect = ({
         if (field.key === 'theme') {
           setTheme(newValue);
         }
+        emitClientConfigChanged();
       } else {
         const res = await fetch('/api/config', {
           method: 'POST',
@@ -106,6 +113,7 @@ const SettingsInput = ({
     try {
       if (field.scope === 'client') {
         localStorage.setItem(field.key, newValue);
+        emitClientConfigChanged();
       } else {
         const res = await fetch('/api/config', {
           method: 'POST',
@@ -182,6 +190,7 @@ const SettingsTextarea = ({
     try {
       if (field.scope === 'client') {
         localStorage.setItem(field.key, newValue);
+        emitClientConfigChanged();
       } else {
         const res = await fetch('/api/config', {
           method: 'POST',
@@ -258,6 +267,7 @@ const SettingsSwitch = ({
     try {
       if (field.scope === 'client') {
         localStorage.setItem(field.key, String(newValue));
+        emitClientConfigChanged();
       } else {
         const res = await fetch('/api/config', {
           method: 'POST',
@@ -300,7 +310,7 @@ const SettingsSwitch = ({
           checked={isChecked}
           onChange={handleSave}
           disabled={loading}
-          className="group relative flex h-6 w-12 shrink-0 cursor-pointer rounded-full bg-white/10 p-1 duration-200 ease-in-out focus:outline-none transition-colors disabled:opacity-60 disabled:cursor-not-allowed data-[checked]:bg-sky-500"
+          className="group relative flex h-6 w-12 shrink-0 cursor-pointer rounded-full bg-light-200 dark:bg-white/10 p-1 duration-200 ease-in-out focus:outline-none transition-colors disabled:opacity-60 disabled:cursor-not-allowed data-[checked]:bg-sky-500 dark:data-[checked]:bg-sky-500"
         >
           <span
             aria-hidden="true"

src/components/WeatherWidget.tsx

@@ -91,7 +91,7 @@ const WeatherWidget = () => {
       setData({
         temperature: data.temperature,
         condition: data.condition,
-        location: 'Mars',
+        location: location.city,
         humidity: data.humidity,
         windSpeed: data.windSpeed,
         icon: data.icon,

src/components/Widgets/Calculation.tsx

@@ -9,38 +9,30 @@ type CalculationWidgetProps = {
 
 const Calculation = ({ expression, result }: CalculationWidgetProps) => {
   return (
-    <div className="rounded-lg bg-light-secondary dark:bg-dark-secondary border border-light-200 dark:border-dark-200 overflow-hidden shadow-sm">
-      <div className="flex items-center gap-2 p-3 bg-light-100/50 dark:bg-dark-100/50 border-b border-light-200 dark:border-dark-200">
-        <div className="rounded-full p-1.5 bg-light-100 dark:bg-dark-100">
-          <Calculator className="w-4 h-4 text-black/70 dark:text-white/70" />
-        </div>
-        <span className="text-sm font-medium text-black dark:text-white">
-          Calculation
-        </span>
-      </div>
-
-      <div className="p-4 space-y-3">
-        <div>
-          <div className="flex items-center gap-1.5 mb-1.5">
-            <span className="text-xs text-black/50 dark:text-white/50 font-medium">
+    <div className="rounded-lg border border-light-200 dark:border-dark-200">
+      <div className="p-4 space-y-4">
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 text-black/60 dark:text-white/70">
+            <Calculator className="w-4 h-4" />
+            <span className="text-xs uppercase font-semibold tracking-wide">
               Expression
             </span>
           </div>
-          <div className="bg-light-100 dark:bg-dark-100 rounded-md p-2.5 border border-light-200 dark:border-dark-200">
+          <div className="rounded-lg border border-light-200 dark:border-dark-200 bg-light-secondary dark:bg-dark-secondary p-3">
             <code className="text-sm text-black dark:text-white font-mono break-all">
               {expression}
             </code>
           </div>
         </div>
 
-        <div>
-          <div className="flex items-center gap-1.5 mb-1.5">
-            <Equal className="w-3.5 h-3.5 text-black/50 dark:text-white/50" />
-            <span className="text-xs text-black/50 dark:text-white/50 font-medium">
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 text-black/60 dark:text-white/70">
+            <Equal className="w-4 h-4" />
+            <span className="text-xs uppercase font-semibold tracking-wide">
               Result
             </span>
           </div>
-          <div className="bg-gradient-to-br from-light-100 to-light-secondary dark:from-dark-100 dark:to-dark-secondary rounded-md p-4 border-2 border-light-200 dark:border-dark-200">
+          <div className="rounded-xl border border-light-200 dark:border-dark-200 bg-light-secondary dark:bg-dark-secondary p-5">
             <div className="text-4xl font-bold text-black dark:text-white font-mono tabular-nums">
               {result.toLocaleString()}
             </div>

src/components/Widgets/Weather.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { getMeasurementUnit } from '@/lib/config/clientRegistry';
 import { Wind, Droplets, Gauge } from 'lucide-react';
 import { useMemo, useEffect, useState } from 'react';
 
@@ -226,6 +227,20 @@ const Weather = ({
   timezone,
 }: WeatherWidgetProps) => {
   const [isDarkMode, setIsDarkMode] = useState(false);
+  const unit = getMeasurementUnit();
+  const isImperial = unit === 'imperial';
+  const tempUnitLabel = isImperial ? '°F' : '°C';
+  const windUnitLabel = isImperial ? 'mph' : 'km/h';
+
+  const formatTemp = (celsius: number) => {
+    if (!Number.isFinite(celsius)) return 0;
+    return Math.round(isImperial ? (celsius * 9) / 5 + 32 : celsius);
+  };
+
+  const formatWind = (speedKmh: number) => {
+    if (!Number.isFinite(speedKmh)) return 0;
+    return Math.round(isImperial ? speedKmh * 0.621371 : speedKmh);
+  };
 
   useEffect(() => {
     const checkDarkMode = () => {
@@ -266,14 +281,12 @@ const Weather = ({
       return {
         day: dayName,
         icon: info.icon,
-        high: Math.round(daily.temperature_2m_max[idx + 1]),
-        low: Math.round(daily.temperature_2m_min[idx + 1]),
-        highF: Math.round((daily.temperature_2m_max[idx + 1] * 9) / 5 + 32),
-        lowF: Math.round((daily.temperature_2m_min[idx + 1] * 9) / 5 + 32),
+        high: formatTemp(daily.temperature_2m_max[idx + 1]),
+        low: formatTemp(daily.temperature_2m_min[idx + 1]),
         precipitation: daily.precipitation_probability_max[idx + 1] || 0,
       };
     });
-  }, [daily, isDarkMode]);
+  }, [daily, isDarkMode, isImperial]);
 
   if (!current || !daily || !daily.time || daily.time.length === 0) {
     return (
@@ -305,9 +318,9 @@ const Weather = ({
             <div>
               <div className="flex items-baseline gap-1">
                 <span className="text-4xl font-bold drop-shadow-md">
-                  {Math.round(current.temperature_2m)}°
+                  {formatTemp(current.temperature_2m)}°
                 </span>
-                <span className="text-lg">F C</span>
+                <span className="text-lg">{tempUnitLabel}</span>
               </div>
               <p className="text-sm font-medium drop-shadow mt-0.5">
                 {weatherInfo.description}
@@ -316,8 +329,8 @@ const Weather = ({
           </div>
           <div className="text-right">
             <p className="text-xs font-medium opacity-90">
-              {Math.round(daily.temperature_2m_max[0])}°{' '}
-              {Math.round(daily.temperature_2m_min[0])}°
+              {formatTemp(daily.temperature_2m_max[0])}°{' '}
+              {formatTemp(daily.temperature_2m_min[0])}°
             </p>
           </div>
         </div>
@@ -371,7 +384,7 @@ const Weather = ({
                 Wind
               </p>
               <p className="font-semibold">
-                {Math.round(current.wind_speed_10m)} km/h
+                {formatWind(current.wind_speed_10m)} {windUnitLabel}
               </p>
             </div>
           </div>
@@ -395,7 +408,8 @@ const Weather = ({
                 Feels Like
               </p>
               <p className="font-semibold">
-                {Math.round(current.apparent_temperature)}°C
+                {formatTemp(current.apparent_temperature)}
+                {tempUnitLabel}
               </p>
             </div>
           </div>

src/lib/actions.ts

@@ -1,5 +1,3 @@
-import { Message } from '@/components/ChatWindow';
-
 export const getSuggestions = async (chatHistory: [string, string][]) => {
   const chatTurns = chatHistory.map(([role, content]) => {
     if (role === 'human') {

src/lib/agents/media/image.ts

@@ -29,7 +29,7 @@ const searchImages = async (
     query: z.string().describe('The image search query.'),
   });
 
-  const res = await llm.generateObject<z.infer<typeof schema>>({
+  const res = await llm.generateObject<typeof schema>({
     messages: [
       {
         role: 'system',

src/lib/agents/media/video.ts

@@ -28,7 +28,7 @@ const searchVideos = async (
     query: z.string().describe('The video search query.'),
   });
 
-  const res = await llm.generateObject<z.infer<typeof schema>>({
+  const res = await llm.generateObject<typeof schema>({
     messages: [
       {
         role: 'system',

src/lib/agents/search/api.ts

@@ -0,0 +1,99 @@
+import { ResearcherOutput, SearchAgentInput } from './types';
+import SessionManager from '@/lib/session';
+import { classify } from './classifier';
+import Researcher from './researcher';
+import { getWriterPrompt } from '@/lib/prompts/search/writer';
+import { WidgetExecutor } from './widgets';
+
+class APISearchAgent {
+  async searchAsync(session: SessionManager, input: SearchAgentInput) {
+    const classification = await classify({
+      chatHistory: input.chatHistory,
+      enabledSources: input.config.sources,
+      query: input.followUp,
+      llm: input.config.llm,
+    });
+
+    const widgetPromise = WidgetExecutor.executeAll({
+      classification,
+      chatHistory: input.chatHistory,
+      followUp: input.followUp,
+      llm: input.config.llm,
+    });
+
+    let searchPromise: Promise<ResearcherOutput> | null = null;
+
+    if (!classification.classification.skipSearch) {
+      const researcher = new Researcher();
+      searchPromise = researcher.research(SessionManager.createSession(), {
+        chatHistory: input.chatHistory,
+        followUp: input.followUp,
+        classification: classification,
+        config: input.config,
+      });
+    }
+
+    const [widgetOutputs, searchResults] = await Promise.all([
+      widgetPromise,
+      searchPromise,
+    ]);
+
+    if (searchResults) {
+      session.emit('data', {
+        type: 'searchResults',
+        data: searchResults.searchFindings,
+      });
+    }
+
+    session.emit('data', {
+      type: 'researchComplete',
+    });
+
+    const finalContext =
+      searchResults?.searchFindings
+        .map(
+          (f, index) =>
+            `<result index=${index + 1} title=${f.metadata.title}>${f.content}</result>`,
+        )
+        .join('\n') || '';
+
+    const widgetContext = widgetOutputs
+      .map((o) => {
+        return `<result>${o.llmContext}</result>`;
+      })
+      .join('\n-------------\n');
+
+    const finalContextWithWidgets = `<search_results note="These are the search results and assistant can cite these">\n${finalContext}\n</search_results>\n<widgets_result noteForAssistant="Its output is already showed to the user, assistant can use this information to answer the query but do not CITE this as a souce">\n${widgetContext}\n</widgets_result>`;
+
+    const writerPrompt = getWriterPrompt(
+      finalContextWithWidgets,
+      input.config.systemInstructions,
+      input.config.mode,
+    );
+
+    const answerStream = input.config.llm.streamText({
+      messages: [
+        {
+          role: 'system',
+          content: writerPrompt,
+        },
+        ...input.chatHistory,
+        {
+          role: 'user',
+          content: input.followUp,
+        },
+      ],
+    });
+
+    for await (const chunk of answerStream) {
+      session.emit('data', {
+        type: 'response',
+        data: chunk.contentChunk,
+      });
+    }
+
+    session.emit('end', {});
+  }
+}
+
+export default APISearchAgent;

src/lib/agents/search/classifier.ts

@@ -0,0 +1,53 @@
+import z from 'zod';
+import { ClassifierInput } from './types';
+import { classifierPrompt } from '@/lib/prompts/search/classifier';
+import formatChatHistoryAsString from '@/lib/utils/formatHistory';
+
+const schema = z.object({
+  classification: z.object({
+    skipSearch: z
+      .boolean()
+      .describe('Indicates whether to skip the search step.'),
+    personalSearch: z
+      .boolean()
+      .describe('Indicates whether to perform a personal search.'),
+    academicSearch: z
+      .boolean()
+      .describe('Indicates whether to perform an academic search.'),
+    discussionSearch: z
+      .boolean()
+      .describe('Indicates whether to perform a discussion search.'),
+    showWeatherWidget: z
+      .boolean()
+      .describe('Indicates whether to show the weather widget.'),
+    showStockWidget: z
+      .boolean()
+      .describe('Indicates whether to show the stock widget.'),
+    showCalculationWidget: z
+      .boolean()
+      .describe('Indicates whether to show the calculation widget.'),
+  }),
+  standaloneFollowUp: z
+    .string()
+    .describe(
+      "A self-contained, context-independent reformulation of the user's question.",
+    ),
+});
+
+export const classify = async (input: ClassifierInput) => {
+  const output = await input.llm.generateObject<typeof schema>({
+    messages: [
+      {
+        role: 'system',
+        content: classifierPrompt,
+      },
+      {
+        role: 'user',
+        content: `<conversation_history>\n${formatChatHistoryAsString(input.chatHistory)}\n</conversation_history>\n<user_query>\n${input.query}\n</user_query>`,
+      },
+    ],
+    schema,
+  });
+
+  return output;
+};

src/lib/agents/search/classifier/index.ts

@@ -1,73 +0,0 @@
-import z from 'zod';
-import { ClassifierInput, ClassifierOutput } from '../types';
-import { WidgetRegistry } from '../widgets';
-import { IntentRegistry } from './intents';
-import { getClassifierPrompt } from '@/lib/prompts/search/classifier';
-import formatChatHistoryAsString from '@/lib/utils/formatHistory';
-
-class Classifier {
-  async classify(input: ClassifierInput): Promise<ClassifierOutput> {
-    const availableIntents = IntentRegistry.getAvailableIntents({
-      sources: input.enabledSources,
-    });
-
-    const availableWidgets = WidgetRegistry.getAll();
-
-    const classificationSchema = z.object({
-      skipSearch: z
-        .boolean()
-        .describe(
-          'Set to true to SKIP search. Skip ONLY when: (1) widgets alone fully answer the query (e.g., weather, stocks, calculator), (2) simple greetings or writing tasks (NOT questions). Set to false for ANY question or information request.',
-        ),
-      standaloneFollowUp: z
-        .string()
-        .describe(
-          "A self-contained, context-independent reformulation of the user's question. Must include all necessary context from chat history, replace pronouns with specific nouns, and be clear enough to answer without seeing the conversation. Keep the same complexity as the original question.",
-        ),
-      intents: z
-        .array(z.enum(availableIntents.map((i) => i.name)))
-        .describe(
-          "The intent(s) that best describe how to fulfill the user's query. Can include multiple intents (e.g., ['web_search', 'widget_response'] for 'weather in NYC and recent news'). Always include at least one intent when applicable.",
-        ),
-      widgets: z
-        .array(z.union(availableWidgets.map((w) => w.schema)))
-        .describe(
-          'Widgets that can display structured data to answer (fully or partially) the query. Include all applicable widgets regardless of skipSearch value.',
-        ),
-    });
-
-    const classifierPrompt = getClassifierPrompt({
-      intentDesc: IntentRegistry.getDescriptions({
-        sources: input.enabledSources,
-      }),
-      widgetDesc: WidgetRegistry.getDescriptions(),
-    });
-
-    const res = await input.llm.generateObject<
-      z.infer<typeof classificationSchema>
-    >({
-      messages: [
-        {
-          role: 'system',
-          content: classifierPrompt,
-        },
-        {
-          role: 'user',
-          content: `<conversation>${formatChatHistoryAsString(input.chatHistory)}</conversation>\n\n<query>${input.query}</query>`,
-        },
-      ],
-      schema: classificationSchema,
-    });
-
-    res.widgets = res.widgets.map((widgetConfig) => {
-      return {
-        type: widgetConfig.type,
-        params: widgetConfig,
-      };
-    });
-
-    return res as ClassifierOutput;
-  }
-}
-
-export default Classifier;

src/lib/agents/search/classifier/intents/academicSearch.ts

@@ -1,52 +0,0 @@
-import { Intent } from '../../types';
-
-const description = `Use this intent to search for scholarly articles, research papers, scientific studies, and academic resources when the user explicitly requests credible, peer-reviewed, or authoritative information from academic sources.
-
-#### When to use:
-1. User explicitly mentions academic keywords: research papers, scientific studies, scholarly articles, peer-reviewed, journal articles.
-2. User asks for scientific evidence or academic research on a topic.
-3. User needs authoritative, citation-worthy sources for research or academic purposes.
-
-#### When NOT to use:
-1. General questions that don't specifically request academic sources - use 'web_search' instead.
-2. User just wants general information without specifying academic sources.
-3. Casual queries about facts or current events.
-
-#### Example use cases:
-1. "Find scientific papers on climate change effects"
-   - User explicitly wants scientific papers.
-   - Intent: ['academic_search'] with skipSearch: false
-
-2. "What does the research say about meditation benefits?"
-   - User is asking for research-based information.
-   - Intent: ['academic_search', 'web_search'] with skipSearch: false
-
-3. "Show me peer-reviewed articles on CRISPR technology"
-   - User specifically wants peer-reviewed academic content.
-   - Intent: ['academic_search'] with skipSearch: false
-
-4. "I need scholarly sources about renewable energy for my thesis"
-   - User explicitly needs scholarly/academic sources.
-   - Intent: ['academic_search'] with skipSearch: false
-
-5. "Explain quantum computing" (WRONG to use academic_search alone)
-   - This is a general question, not specifically requesting academic papers.
-   - Correct intent: ['web_search'] with skipSearch: false
-   - Could combine: ['web_search', 'academic_search'] if you want both general and academic sources
-
-6. "What's the latest study on sleep patterns?"
-   - User mentions "study" - combine academic and web search for comprehensive results.
-   - Intent: ['academic_search', 'web_search'] with skipSearch: false
-
-**IMPORTANT**: This intent can be combined with 'web_search' to provide both academic papers and general web information. Always set skipSearch to false when using this intent.
-
-**NOTE**: This intent is only available if academic search sources are enabled in the configuration.`;
-
-const academicSearchIntent: Intent = {
-  name: 'academic_search',
-  description,
-  requiresSearch: true,
-  enabled: (config) => config.sources.includes('academic'),
-};
-
-export default academicSearchIntent;

src/lib/agents/search/classifier/intents/discussionSearch.ts

@@ -1,55 +0,0 @@
-import { Intent } from '../../types';
-
-const description = `Use this intent to search through discussion forums, community boards, and social platforms (Reddit, forums, etc.) when the user explicitly wants opinions, personal experiences, community discussions, or crowd-sourced information.
-
-#### When to use:
-1. User explicitly mentions: Reddit, forums, discussion boards, community opinions, "what do people think", "user experiences".
-2. User is asking for opinions, reviews, or personal experiences about a product, service, or topic.
-3. User wants to know what communities or people are saying about something.
-
-#### When NOT to use:
-1. General questions that don't specifically ask for opinions or discussions - use 'web_search' instead.
-2. User wants factual information or official sources.
-3. Casual queries about facts, news, or current events without requesting community input.
-
-#### Example use cases:
-1. "What do people on Reddit think about the new iPhone?"
-   - User explicitly wants Reddit/community opinions.
-   - Intent: ['discussions_search'] with skipSearch: false
-
-2. "User experiences with Tesla Model 3"
-   - User is asking for personal experiences from users.
-   - Intent: ['discussions_search'] with skipSearch: false
-
-3. "Best gaming laptop according to forums"
-   - User wants forum/community recommendations.
-   - Intent: ['discussions_search'] with skipSearch: false
-
-4. "What are people saying about the new AI regulations?"
-   - User wants community discussions/opinions.
-   - Intent: ['discussions_search', 'web_search'] with skipSearch: false
-
-5. "Reviews and user opinions on the Framework laptop"
-   - Combines user opinions with general reviews.
-   - Intent: ['discussions_search', 'web_search'] with skipSearch: false
-
-6. "What's the price of iPhone 15?" (WRONG to use discussions_search)
-   - This is a factual question, not asking for opinions.
-   - Correct intent: ['web_search'] with skipSearch: false
-
-7. "Explain how OAuth works" (WRONG to use discussions_search)
-   - This is asking for information, not community opinions.
-   - Correct intent: ['web_search'] with skipSearch: false
-
-**IMPORTANT**: This intent can be combined with 'web_search' to provide both community discussions and official/factual information. Always set skipSearch to false when using this intent.
-
-**NOTE**: This intent is only available if discussion search sources are enabled in the configuration.`;
-
-const discussionSearchIntent: Intent = {
-  name: 'discussions_search',
-  description,
-  requiresSearch: true,
-  enabled: (config) => config.sources.includes('discussions'),
-};
-
-export default discussionSearchIntent;

src/lib/agents/search/classifier/intents/index.ts

@@ -1,16 +0,0 @@
-import academicSearchIntent from './academicSearch';
-import discussionSearchIntent from './discussionSearch';
-import privateSearchIntent from './privateSearch';
-import IntentRegistry from './registry';
-import webSearchIntent from './webSearch';
-import widgetResponseIntent from './widgetResponse';
-import writingTaskIntent from './writingTask';
-
-IntentRegistry.register(webSearchIntent);
-IntentRegistry.register(academicSearchIntent);
-IntentRegistry.register(discussionSearchIntent);
-IntentRegistry.register(widgetResponseIntent);
-IntentRegistry.register(writingTaskIntent);
-IntentRegistry.register(privateSearchIntent);
-
-export { IntentRegistry };

src/lib/agents/search/classifier/intents/privateSearch.ts

@@ -1,47 +0,0 @@
-import { Intent } from '../../types';
-
-const description = `Use this intent to search through the user's uploaded documents or provided web page links when they ask questions about their personal files or specific URLs.
-
-#### When to use:
-1. User explicitly asks about uploaded documents ("tell me about the document I uploaded", "summarize this file").
-2. User provides specific URLs/links and asks questions about them ("tell me about example.com", "what's on this page: url.com").
-3. User references "my documents", "the file I shared", "this link" when files or URLs are available.
-
-#### When NOT to use:
-1. User asks generic questions like "summarize" without providing context or files (later the system will ask what they want summarized).
-2. No files have been uploaded and no URLs provided - use web_search or other intents instead.
-3. User is asking general questions unrelated to their uploaded content.
-
-#### Example use cases:
-1. "Tell me about the PDF I uploaded"
-   - Files are uploaded, user wants information from them.
-   - Intent: ['private_search'] with skipSearch: false
-
-2. "What's the main point from example.com?"
-   - User provided a specific URL to analyze.
-   - Intent: ['private_search'] with skipSearch: false
-
-3. "Summarize the research paper I shared"
-   - User references a shared document.
-   - Intent: ['private_search'] with skipSearch: false
-
-4. "Summarize" (WRONG to use private_search if no files/URLs)
-   - No context provided, no files uploaded.
-   - Correct: Skip this intent, let the answer agent ask what to summarize
-
-5. "What does my document say about climate change and also search the web for recent updates?"
-   - Combine private document search with web search.
-   - Intent: ['private_search', 'web_search'] with skipSearch: false
-
-**IMPORTANT**: Only use this intent if files are actually uploaded or URLs are explicitly provided in the query. Check the context for uploaded files before selecting this intent. Always set skipSearch to false when using this intent.
-
-**NOTE**: This intent can be combined with other search intents when the user wants both personal document information and external sources.`;
-
-const privateSearchIntent: Intent = {
-  name: 'private_search',
-  description,
-  enabled: (config) => true,
-  requiresSearch: true,
-};
-
-export default privateSearchIntent;

src/lib/agents/search/classifier/intents/registry.ts

@@ -1,31 +0,0 @@
-import { Intent, SearchAgentConfig, SearchSources } from '../../types';
-
-class IntentRegistry {
-  private static intents = new Map<string, Intent>();
-
-  static register(intent: Intent) {
-    this.intents.set(intent.name, intent);
-  }
-
-  static get(name: string): Intent | undefined {
-    return this.intents.get(name);
-  }
-
-  static getAvailableIntents(config: { sources: SearchSources[] }): Intent[] {
-    return Array.from(
-      this.intents.values().filter((intent) => intent.enabled(config)),
-    );
-  }
-
-  static getDescriptions(config: { sources: SearchSources[] }): string {
-    const availableintents = this.getAvailableIntents(config);
-
-    return availableintents
-      .map(
-        (intent) => `-------\n\n###${intent.name}: ${intent.description}\n\n`,
-      )
-      .join('\n\n');
-  }
-}
-
-export default IntentRegistry;

src/lib/agents/search/classifier/intents/webSearch.ts

@@ -1,31 +0,0 @@
-import { Intent } from '../../types';
-
-const description = `
-Use this intent to find current information from the web when the user is asking a question or needs up-to-date information that cannot be provided by widgets or other intents. 
-
-#### When to use:
-1. Simple user questions about current events, news, weather, or general knowledge that require the latest information and there is no specific better intent to use.
-2. When the user explicitly requests information from the web or indicates they want the most recent data (and still there's no other better intent).
-3. When no widgets can fully satisfy the user's request for information nor any other specialized search intent applies.
-
-#### Examples use cases:
-1. "What is the weather in San Francisco today? ALso tell me some popular events happening there this weekend."
-    - In this case, the weather widget can provide the current weather, but for popular events, a web search is needed. So the intent should include a 'web_search' & a 'widget_response'.
-
-2. "Who won the Oscar for Best Picture in 2024?"
-    - This is a straightforward question that requires current information from the web.
-
-3. "Give me the latest news on AI regulations."
-    - The user is asking for up-to-date news, which necessitates a web search.
-
-**IMPORTANT**: If this intent is given then skip search should be false.
-`;
-
-const webSearchIntent: Intent = {
-  name: 'web_search',
-  description: description,
-  requiresSearch: true,
-  enabled: (config) => config.sources.includes('web'),
-};
-
-export default webSearchIntent;

src/lib/agents/search/classifier/intents/widgetResponse.ts

@@ -1,47 +0,0 @@
-import { Intent } from '../../types';
-
-const description = `Use this intent when the user's query can be fully or partially answered using specialized widgets that provide structured, real-time data (weather, stocks, calculations, and more).
-
-#### When to use:
-1. The user is asking for specific information that a widget can provide (current weather, stock prices, mathematical calculations, unit conversions, etc.).
-2. A widget can completely answer the query without needing additional web search (use this intent alone and set skipSearch to true).
-3. A widget can provide part of the answer, but additional information from web search or other sources is needed (combine with other intents like 'web_search' and set skipSearch to false).
-
-#### Example use cases:
-Note: These are just examples - there are several other widgets available for use depending on the user's query.
-
-1. "What is the weather in New York?"
-   - The weather widget can fully answer this query.
-   - Intent: ['widget_response'] with skipSearch: true
-   - Widget: [{ type: 'weather', location: 'New York', lat: 0, lon: 0 }]
-
-2. "What's the weather in San Francisco today? Also tell me some popular events happening there this weekend."
-   - Weather widget provides current conditions, but events require web search.
-   - Intent: ['web_search', 'widget_response'] with skipSearch: false
-   - Widget: [{ type: 'weather', location: 'San Francisco', lat: 0, lon: 0 }]
-
-3. "Calculate 25% of 480"
-   - The calculator widget can fully answer this.
-   - Intent: ['widget_response'] with skipSearch: true
-    - Widget: [{ type: 'calculator', expression: '25% of 480' }] 
-
-4. "AAPL stock price and recent Apple news"
-   - Stock widget provides price, but news requires web search.
-   - Intent: ['web_search', 'widget_response'] with skipSearch: false
-    - Widget: [{ type: 'stock', symbol: 'AAPL' }]
-
-5. "What's Tesla's stock doing and how does it compare to competitors?"
-   - Stock widget provides Tesla's price, but comparison analysis requires web search.
-   - Intent: ['web_search', 'widget_response'] with skipSearch: false
-  - Widget: [{ type: 'stock', symbol: 'TSLA' }]
-
-**IMPORTANT**: Set skipSearch to true ONLY if the widget(s) can completely answer the user's query without any additional information. If the user asks for anything beyond what the widget provides (context, explanations, comparisons, related information), combine this intent with 'web_search' and set skipSearch to false.`;
-
-const widgetResponseIntent: Intent = {
-  name: 'widget_response',
-  description,
-  requiresSearch: false,
-  enabled: (config) => true,
-};
-
-export default widgetResponseIntent;

src/lib/agents/search/classifier/intents/writingTask.ts

@@ -1,53 +0,0 @@
-import { Intent } from '../../types';
-
-const description = `Use this intent for simple writing or greeting tasks that do not require any external information or facts. This is ONLY for greetings and straightforward creative writing that needs no factual verification.
-
-#### When to use:
-1. User greetings or simple social interactions (hello, hi, thanks, goodbye).
-2. Creative writing tasks that require NO factual information (poems, birthday messages, thank you notes).
-3. Simple drafting tasks where the user provides all necessary information.
-
-#### When NOT to use:
-1. ANY question that starts with "what", "how", "why", "when", "where", "who" - these need web_search.
-2. Requests for explanations, definitions, or information about anything.
-3. Code-related questions or technical help - these need web_search.
-4. Writing tasks that require facts, data, or current information.
-5. When you're uncertain about any information needed - default to web_search.
-
-#### Example use cases:
-1. "Hello" or "Hi there"
-   - Simple greeting, no information needed.
-   - Intent: ['writing_task'] with skipSearch: true
-
-2. "Write me a birthday message for my friend"
-   - Creative writing, no facts needed.
-   - Intent: ['writing_task'] with skipSearch: true
-
-3. "Draft a thank you email for a job interview"
-   - Simple writing task, no external information required.
-   - Intent: ['writing_task'] with skipSearch: true
-
-4. "What is React?" (WRONG to use writing_task)
-   - This is a QUESTION asking for information.
-   - Correct intent: ['web_search'] with skipSearch: false
-
-5. "How do I fix this error in Python?" (WRONG to use writing_task)
-   - This is asking for technical help.
-   - Correct intent: ['web_search'] with skipSearch: false
-
-6. "Write an email about the latest AI developments" (WRONG to use writing_task alone)
-   - This requires current information about AI developments.
-   - Correct intent: ['web_search'] with skipSearch: false
-
-**CRITICAL RULE**: When in doubt, DO NOT use this intent. Default to web_search. This intent should be rare - only use it for greetings and purely creative writing tasks that need absolutely no facts or information.
-
-**IMPORTANT**: If this intent is used alone, skipSearch should be true. Never combine this with other search intents unless you're absolutely certain both are needed.`;
-
-const writingTaskIntent: Intent = {
-  name: 'writing_task',
-  description,
-  requiresSearch: false,
-  enabled: (config) => true,
-};
-
-export default writingTaskIntent;

src/lib/agents/search/index.ts

@@ -1,26 +1,68 @@
 import { ResearcherOutput, SearchAgentInput } from './types';
 import SessionManager from '@/lib/session';
-import Classifier from './classifier';
-import { WidgetRegistry } from './widgets';
+import { classify } from './classifier';
 import Researcher from './researcher';
 import { getWriterPrompt } from '@/lib/prompts/search/writer';
-import fs from 'fs';
+import { WidgetExecutor } from './widgets';
+import db from '@/lib/db';
+import { chats, messages } from '@/lib/db/schema';
+import { and, eq, gt } from 'drizzle-orm';
+import { TextBlock } from '@/lib/types';
 
 class SearchAgent {
   async searchAsync(session: SessionManager, input: SearchAgentInput) {
-    const classifier = new Classifier();
+    const exists = await db.query.messages.findFirst({
+      where: and(
+        eq(messages.chatId, input.chatId),
+        eq(messages.messageId, input.messageId),
+      ),
+    });
 
-    const classification = await classifier.classify({
+    if (!exists) {
+      await db.insert(messages).values({
+        chatId: input.chatId,
+        messageId: input.messageId,
+        backendId: session.id,
+        query: input.followUp,
+        createdAt: new Date().toISOString(),
+        status: 'answering',
+        responseBlocks: [],
+      });
+    } else {
+      await db
+        .delete(messages)
+        .where(
+          and(eq(messages.chatId, input.chatId), gt(messages.id, exists.id)),
+        )
+        .execute();
+      await db
+        .update(messages)
+        .set({
+          status: 'answering',
+          backendId: session.id,
+          responseBlocks: [],
+        })
+        .where(
+          and(
+            eq(messages.chatId, input.chatId),
+            eq(messages.messageId, input.messageId),
+          ),
+        )
+        .execute();
+    }
+
+    const classification = await classify({
       chatHistory: input.chatHistory,
       enabledSources: input.config.sources,
       query: input.followUp,
       llm: input.config.llm,
     });
 
-    const widgetPromise = WidgetRegistry.executeAll(classification.widgets, {
+    const widgetPromise = WidgetExecutor.executeAll({
+      classification,
+      chatHistory: input.chatHistory,
+      followUp: input.followUp,
       llm: input.config.llm,
-      embedding: input.config.embedding,
-      session: session,
     }).then((widgetOutputs) => {
       widgetOutputs.forEach((o) => {
         session.emitBlock({
@@ -37,7 +79,7 @@ class SearchAgent {
 
     let searchPromise: Promise<ResearcherOutput> | null = null;
 
-    if (!classification.skipSearch) {
+    if (!classification.classification.skipSearch) {
       const researcher = new Researcher();
       searchPromise = researcher.research(session, {
         chatHistory: input.chatHistory,
@@ -57,21 +99,26 @@ class SearchAgent {
     });
 
     const finalContext =
-      searchResults?.findings
-        .filter((f) => f.type === 'search_results')
-        .flatMap((f) => f.results)
-        .map((f) => `${f.metadata.title}: ${f.content}`)
+      searchResults?.searchFindings
+        .map(
+          (f, index) =>
+            `<result index=${index + 1} title=${f.metadata.title}>${f.content}</result>`,
+        )
         .join('\n') || '';
 
     const widgetContext = widgetOutputs
       .map((o) => {
-        return `${o.type}: ${o.llmContext}`;
+        return `<result>${o.llmContext}</result>`;
       })
       .join('\n-------------\n');
 
-    const finalContextWithWidgets = `<search_results note="These are the search results and you can cite these">${finalContext}</search_results>\n<widgets_result noteForAssistant="Its output is already showed to the user, you can use this information to answer the query but do not CITE this as a souce">${widgetContext}</widgets_result>`;
+    const finalContextWithWidgets = `<search_results note="These are the search results and assistant can cite these">\n${finalContext}\n</search_results>\n<widgets_result noteForAssistant="Its output is already showed to the user, assistant can use this information to answer the query but do not CITE this as a souce">\n${widgetContext}\n</widgets_result>`;
 
-    const writerPrompt = getWriterPrompt(finalContextWithWidgets);
+    const writerPrompt = getWriterPrompt(
+      finalContextWithWidgets,
+      input.config.systemInstructions,
+      input.config.mode,
+    );
     const answerStream = input.config.llm.streamText({
       messages: [
         {
@@ -86,18 +133,53 @@ class SearchAgent {
       ],
     });
 
-    let accumulatedText = '';
+    let responseBlockId = '';
 
     for await (const chunk of answerStream) {
-      accumulatedText += chunk.contentChunk;
+      if (!responseBlockId) {
+        const block: TextBlock = {
+          id: crypto.randomUUID(),
+          type: 'text',
+          data: chunk.contentChunk,
+        };
 
-      session.emit('data', {
-        type: 'response',
-        data: chunk.contentChunk,
-      });
+        session.emitBlock(block);
+
+        responseBlockId = block.id;
+      } else {
+        const block = session.getBlock(responseBlockId) as TextBlock | null;
+
+        if (!block) {
+          continue;
+        }
+
+        block.data += chunk.contentChunk;
+
+        session.updateBlock(block.id, [
+          {
+            op: 'replace',
+            path: '/data',
+            value: block.data,
+          },
+        ]);
+      }
     }
 
     session.emit('end', {});
+
+    await db
+      .update(messages)
+      .set({
+        status: 'completed',
+        responseBlocks: session.getAllBlocks(),
+      })
+      .where(
+        and(
+          eq(messages.chatId, input.chatId),
+          eq(messages.messageId, input.messageId),
+        ),
+      )
+      .execute();
   }
 }
 

src/lib/agents/search/researcher/actions/academicSearch.ts

@@ -0,0 +1,129 @@
+import z from 'zod';
+import { ResearchAction } from '../../types';
+import { Chunk, SearchResultsResearchBlock } from '@/lib/types';
+import { searchSearxng } from '@/lib/searxng';
+
+const schema = z.object({
+  queries: z.array(z.string()).describe('List of academic search queries'),
+});
+
+const academicSearchDescription = `
+Use this tool to perform academic searches for scholarly articles, papers, and research studies relevant to the user's query. Provide a list of concise search queries that will help gather comprehensive academic information on the topic at hand.
+You can provide up to 3 queries at a time. Make sure the queries are specific and relevant to the user's needs.
+
+For example, if the user is interested in recent advancements in renewable energy, your queries could be:
+1. "Recent advancements in renewable energy 2024"
+2. "Cutting-edge research on solar power technologies"
+3. "Innovations in wind energy systems"
+
+If this tool is present and no other tools are more relevant, you MUST use this tool to get the needed academic information.
+`;
+
+const academicSearchAction: ResearchAction<typeof schema> = {
+  name: 'academic_search',
+  schema: schema,
+  getDescription: () => academicSearchDescription,
+  getToolDescription: () =>
+    "Use this tool to perform academic searches for scholarly articles, papers, and research studies relevant to the user's query. Provide a list of concise search queries that will help gather comprehensive academic information on the topic at hand.",
+  enabled: (config) =>
+    config.sources.includes('academic') &&
+    config.classification.classification.skipSearch === false &&
+    config.classification.classification.academicSearch === true,
+  execute: async (input, additionalConfig) => {
+    input.queries = input.queries.slice(0, 3);
+
+    const researchBlock = additionalConfig.session.getBlock(
+      additionalConfig.researchBlockId,
+    );
+
+    if (researchBlock && researchBlock.type === 'research') {
+      researchBlock.data.subSteps.push({
+        type: 'searching',
+        id: crypto.randomUUID(),
+        searching: input.queries,
+      });
+
+      additionalConfig.session.updateBlock(additionalConfig.researchBlockId, [
+        {
+          op: 'replace',
+          path: '/data/subSteps',
+          value: researchBlock.data.subSteps,
+        },
+      ]);
+    }
+
+    const searchResultsBlockId = crypto.randomUUID();
+    let searchResultsEmitted = false;
+
+    let results: Chunk[] = [];
+
+    const search = async (q: string) => {
+      const res = await searchSearxng(q, {
+        engines: ['arxiv', 'google scholar', 'pubmed'],
+      });
+
+      const resultChunks: Chunk[] = res.results.map((r) => ({
+        content: r.content || r.title,
+        metadata: {
+          title: r.title,
+          url: r.url,
+        },
+      }));
+
+      results.push(...resultChunks);
+
+      if (
+        !searchResultsEmitted &&
+        researchBlock &&
+        researchBlock.type === 'research'
+      ) {
+        searchResultsEmitted = true;
+
+        researchBlock.data.subSteps.push({
+          id: searchResultsBlockId,
+          type: 'search_results',
+          reading: resultChunks,
+        });
+
+        additionalConfig.session.updateBlock(additionalConfig.researchBlockId, [
+          {
+            op: 'replace',
+            path: '/data/subSteps',
+            value: researchBlock.data.subSteps,
+          },
+        ]);
+      } else if (
+        searchResultsEmitted &&
+        researchBlock &&
+        researchBlock.type === 'research'
+      ) {
+        const subStepIndex = researchBlock.data.subSteps.findIndex(
+          (step) => step.id === searchResultsBlockId,
+        );
+
+        const subStep = researchBlock.data.subSteps[
+          subStepIndex
+        ] as SearchResultsResearchBlock;
+
+        subStep.reading.push(...resultChunks);
+
+        additionalConfig.session.updateBlock(additionalConfig.researchBlockId, [
+          {
+            op: 'replace',
+            path: '/data/subSteps',
+            value: researchBlock.data.subSteps,
+          },
+        ]);
+      }
+    };
+
+    await Promise.all(input.queries.map(search));
+
+    return {
+      type: 'search_results',
+      results,
+    };
+  },
+};
+
+export default academicSearchAction;

src/lib/agents/search/researcher/actions/done.ts

@@ -1,14 +1,19 @@
 import z from 'zod';
 import { ResearchAction } from '../../types';
 
+const actionDescription = `
+Use this action ONLY when you have completed all necessary research and are ready to provide a final answer to the user. This indicates that you have gathered sufficient information from previous steps and are concluding the research process.
+YOU MUST CALL THIS ACTION TO SIGNAL COMPLETION; DO NOT OUTPUT FINAL ANSWERS DIRECTLY TO THE USER.
+IT WILL BE AUTOMATICALLY TRIGGERED IF MAXIMUM ITERATIONS ARE REACHED SO IF YOU'RE LOW ON ITERATIONS, DON'T CALL IT AND INSTEAD FOCUS ON GATHERING ESSENTIAL INFO FIRST.
+`;
+
 const doneAction: ResearchAction<any> = {
   name: 'done',
-  description:
-    "Indicates that the research process is complete and no further actions are needed. Use this action when you have gathered sufficient information to answer the user's query.",
+  schema: z.object({}),
+  getToolDescription: () =>
+    'Only call this after __reasoning_preamble AND after any other needed tool calls when you truly have enough to answer. Do not call if information is still missing.',
+  getDescription: () => actionDescription,
   enabled: (_) => true,
-  schema: z.object({
-    type: z.literal('done'),
-  }),
   execute: async (params, additionalConfig) => {
     return {
       type: 'done',

src/lib/agents/search/researcher/actions/index.ts

@@ -1,8 +1,18 @@
+import academicSearchAction from './academicSearch';
 import doneAction from './done';
+import planAction from './plan';
 import ActionRegistry from './registry';
+import scrapeURLAction from './scrapeURL';
+import socialSearchAction from './socialSearch';
+import uploadsSearchAction from './uploadsSearch';
 import webSearchAction from './webSearch';
 
 ActionRegistry.register(webSearchAction);
 ActionRegistry.register(doneAction);
+ActionRegistry.register(planAction);
+ActionRegistry.register(scrapeURLAction);
+ActionRegistry.register(uploadsSearchAction);
+ActionRegistry.register(academicSearchAction);
+ActionRegistry.register(socialSearchAction);
 
 export { ActionRegistry };

src/lib/agents/search/researcher/actions/plan.ts

@@ -0,0 +1,40 @@
+import z from 'zod';
+import { ResearchAction } from '../../types';
+
+const schema = z.object({
+  plan: z
+    .string()
+    .describe(
+      'A concise natural-language plan in one short paragraph. Open with a short intent phrase (e.g., "Okay, the user wants to...", "Searching for...", "Looking into...") and lay out the steps you will take.',
+    ),
+});
+
+const actionDescription = `
+Use this tool FIRST on every turn to state your plan in natural language before any other action. Keep it short, action-focused, and tailored to the current query.
+Make sure to not include reference to any tools or actions you might take, just the plan itself. The user isn't aware about tools, but they love to see your thought process.
+
+Here are some examples of good plans:
+<examples>
+- "Okay, the user wants to know the latest advancements in renewable energy. I will start by looking for recent articles and studies on this topic, then summarize the key points." -> "I have gathered enough information to provide a comprehensive answer."
+- "The user is asking about the health benefits of a Mediterranean diet. I will search for scientific studies and expert opinions on this diet, then compile the findings into a clear summary." -> "I have gathered information about the Mediterranean diet and its health benefits, I will now look up for any recent studies to ensure the information is current."
+</examples>
+
+YOU CAN NEVER CALL ANY OTHER TOOL BEFORE CALLING THIS ONE FIRST, IF YOU DO, THAT CALL WOULD BE IGNORED.
+`;
+
+const planAction: ResearchAction<typeof schema> = {
+  name: '__reasoning_preamble',
+  schema: schema,
+  getToolDescription: () =>
+    'Use this FIRST on every turn to state your plan in natural language before any other action. Keep it short, action-focused, and tailored to the current query.',
+  getDescription: () => actionDescription,
+  enabled: (config) => config.mode !== 'speed',
+  execute: async (input, _) => {
+    return {
+      type: 'reasoning',
+      reasoning: input.plan,
+    };
+  },
+};
+
+export default planAction;

src/lib/agents/search/researcher/actions/registry.ts

@@ -1,9 +1,11 @@
+import { Tool, ToolCall } from '@/lib/models/types';
 import {
-  ActionConfig,
   ActionOutput,
   AdditionalConfig,
   ClassifierOutput,
   ResearchAction,
+  SearchAgentConfig,
+  SearchSources,
 } from '../../types';
 
 class ActionRegistry {
@@ -19,26 +21,53 @@ class ActionRegistry {
 
   static getAvailableActions(config: {
     classification: ClassifierOutput;
+    fileIds: string[];
+    mode: SearchAgentConfig['mode'];
+    sources: SearchSources[];
   }): ResearchAction[] {
     return Array.from(
       this.actions.values().filter((action) => action.enabled(config)),
     );
   }
 
+  static getAvailableActionTools(config: {
+    classification: ClassifierOutput;
+    fileIds: string[];
+    mode: SearchAgentConfig['mode'];
+    sources: SearchSources[];
+  }): Tool[] {
+    const availableActions = this.getAvailableActions(config);
+
+    return availableActions.map((action) => ({
+      name: action.name,
+      description: action.getToolDescription({ mode: config.mode }),
+      schema: action.schema,
+    }));
+  }
+
   static getAvailableActionsDescriptions(config: {
     classification: ClassifierOutput;
+    fileIds: string[];
+    mode: SearchAgentConfig['mode'];
+    sources: SearchSources[];
   }): string {
     const availableActions = this.getAvailableActions(config);
 
     return availableActions
-      .map((action) => `------------\n##${action.name}\n${action.description}`)
+      .map(
+        (action) =>
+          `<tool name="${action.name}">\n${action.getDescription({ mode: config.mode })}\n</tool>`,
+      )
       .join('\n\n');
   }
 
   static async execute(
     name: string,
     params: any,
-    additionalConfig: AdditionalConfig,
+    additionalConfig: AdditionalConfig & {
+      researchBlockId: string;
+      fileIds: string[];
+    },
   ) {
     const action = this.actions.get(name);
 
@@ -50,16 +79,19 @@ class ActionRegistry {
   }
 
   static async executeAll(
-    actions: ActionConfig[],
-    additionalConfig: AdditionalConfig,
+    actions: ToolCall[],
+    additionalConfig: AdditionalConfig & {
+      researchBlockId: string;
+      fileIds: string[];
+    },
   ): Promise<ActionOutput[]> {
     const results: ActionOutput[] = [];
 
     await Promise.all(
       actions.map(async (actionConfig) => {
         const output = await this.execute(
-          actionConfig.type,
-          actionConfig.params,
+          actionConfig.name,
+          actionConfig.arguments,
           additionalConfig,
         );
         results.push(output);

src/lib/agents/search/researcher/actions/scrapeURL.ts

@@ -0,0 +1,139 @@
+import z from 'zod';
+import { ResearchAction } from '../../types';
+import { Chunk, ReadingResearchBlock } from '@/lib/types';
+import TurnDown from 'turndown';
+import path from 'path';
+
+const turndownService = new TurnDown();
+
+const schema = z.object({
+  urls: z.array(z.string()).describe('A list of URLs to scrape content from.'),
+});
+
+const actionDescription = `
+Use this tool to scrape and extract content from the provided URLs. This is useful when you the user has asked you to extract or summarize information from specific web pages. You can provide up to 3 URLs at a time. NEVER CALL THIS TOOL EXPLICITLY YOURSELF UNLESS INSTRUCTED TO DO SO BY THE USER.
+You should only call this tool when the user has specifically requested information from certain web pages, never call this yourself to get extra information without user instruction.
+
+For example, if the user says "Please summarize the content of https://example.com/article", you can call this tool with that URL to get the content and then provide the summary or "What does X mean according to https://example.com/page", you can call this tool with that URL to get the content and provide the explanation.
+`;
+
+const scrapeURLAction: ResearchAction<typeof schema> = {
+  name: 'scrape_url',
+  schema: schema,
+  getToolDescription: () =>
+    'Use this tool to scrape and extract content from the provided URLs. This is useful when you the user has asked you to extract or summarize information from specific web pages. You can provide up to 3 URLs at a time. NEVER CALL THIS TOOL EXPLICITLY YOURSELF UNLESS INSTRUCTED TO DO SO BY THE USER.',
+  getDescription: () => actionDescription,
+  enabled: (_) => true,
+  execute: async (params, additionalConfig) => {
+    params.urls = params.urls.slice(0, 3);
+
+    let readingBlockId = crypto.randomUUID();
+    let readingEmitted = false;
+
+    const researchBlock = additionalConfig.session.getBlock(
+      additionalConfig.researchBlockId,
+    );
+
+    const results: Chunk[] = [];
+
+    await Promise.all(
+      params.urls.map(async (url) => {
+        try {
+          const res = await fetch(url);
+          const text = await res.text();
+
+          const title =
+            text.match(/<title>(.*?)<\/title>/i)?.[1] || `Content from ${url}`;
+
+          if (
+            !readingEmitted &&
+            researchBlock &&
+            researchBlock.type === 'research'
+          ) {
+            readingEmitted = true;
+            researchBlock.data.subSteps.push({
+              id: readingBlockId,
+              type: 'reading',
+              reading: [
+                {
+                  content: '',
+                  metadata: {
+                    url,
+                    title: title,
+                  },
+                },
+              ],
+            });
+
+            additionalConfig.session.updateBlock(
+              additionalConfig.researchBlockId,
+              [
+                {
+                  op: 'replace',
+                  path: '/data/subSteps',
+                  value: researchBlock.data.subSteps,
+                },
+              ],
+            );
+          } else if (
+            readingEmitted &&
+            researchBlock &&
+            researchBlock.type === 'research'
+          ) {
+            const subStepIndex = researchBlock.data.subSteps.findIndex(
+              (step: any) => step.id === readingBlockId,
+            );
+
+            const subStep = researchBlock.data.subSteps[
+              subStepIndex
+            ] as ReadingResearchBlock;
+
+            subStep.reading.push({
+              content: '',
+              metadata: {
+                url,
+                title: title,
+              },
+            });
+
+            additionalConfig.session.updateBlock(
+              additionalConfig.researchBlockId,
+              [
+                {
+                  op: 'replace',
+                  path: '/data/subSteps',
+                  value: researchBlock.data.subSteps,
+                },
+              ],
+            );
+          }
+
+          const markdown = turndownService.turndown(text);
+
+          results.push({
+            content: markdown,
+            metadata: {
+              url,
+              title: title,
+            },
+          });
+        } catch (error) {
+          results.push({
+            content: `Failed to fetch content from ${url}: ${error}`,
+            metadata: {
+              url,
+              title: `Error fetching ${url}`,
+            },
+          });
+        }
+      }),
+    );
+
+    return {
+      type: 'search_results',
+      results,
+    };
+  },
+};
+
+export default scrapeURLAction;

src/lib/agents/search/researcher/actions/socialSearch.ts

@@ -0,0 +1,129 @@
+import z from 'zod';
+import { ResearchAction } from '../../types';
+import { Chunk, SearchResultsResearchBlock } from '@/lib/types';
+import { searchSearxng } from '@/lib/searxng';
+
+const schema = z.object({
+  queries: z.array(z.string()).describe('List of social search queries'),
+});
+
+const socialSearchDescription = `
+Use this tool to perform social media searches for relevant posts, discussions, and trends related to the user's query. Provide a list of concise search queries that will help gather comprehensive social media information on the topic at hand.
+You can provide up to 3 queries at a time. Make sure the queries are specific and relevant to the user's needs.
+
+For example, if the user is interested in public opinion on electric vehicles, your queries could be:
+1. "Electric vehicles public opinion 2024"
+2. "Social media discussions on EV adoption"
+3. "Trends in electric vehicle usage"
+
+If this tool is present and no other tools are more relevant, you MUST use this tool to get the needed social media information.
+`;
+
+const socialSearchAction: ResearchAction<typeof schema> = {
+  name: 'social_search',
+  schema: schema,
+  getDescription: () => socialSearchDescription,
+  getToolDescription: () =>
+    "Use this tool to perform social media searches for relevant posts, discussions, and trends related to the user's query. Provide a list of concise search queries that will help gather comprehensive social media information on the topic at hand.",
+  enabled: (config) =>
+    config.sources.includes('discussions') &&
+    config.classification.classification.skipSearch === false &&
+    config.classification.classification.discussionSearch === true,
+  execute: async (input, additionalConfig) => {
+    input.queries = input.queries.slice(0, 3);
+
+    const researchBlock = additionalConfig.session.getBlock(
+      additionalConfig.researchBlockId,
+    );
+
+    if (researchBlock && researchBlock.type === 'research') {
+      researchBlock.data.subSteps.push({
+        type: 'searching',
+        id: crypto.randomUUID(),
+        searching: input.queries,
+      });
+
+      additionalConfig.session.updateBlock(additionalConfig.researchBlockId, [
+        {
+          op: 'replace',
+          path: '/data/subSteps',
+          value: researchBlock.data.subSteps,
+        },
+      ]);
+    }
+
+    const searchResultsBlockId = crypto.randomUUID();
+    let searchResultsEmitted = false;
+
+    let results: Chunk[] = [];
+
+    const search = async (q: string) => {
+      const res = await searchSearxng(q, {
+        engines: ['reddit'],
+      });
+
+      const resultChunks: Chunk[] = res.results.map((r) => ({
+        content: r.content || r.title,
+        metadata: {
+          title: r.title,
+          url: r.url,
+        },
+      }));
+
+      results.push(...resultChunks);
+
+      if (
+        !searchResultsEmitted &&
+        researchBlock &&
+        researchBlock.type === 'research'
+      ) {
+        searchResultsEmitted = true;
+
+        researchBlock.data.subSteps.push({
+          id: searchResultsBlockId,
+          type: 'search_results',
+          reading: resultChunks,
+        });
+
+        additionalConfig.session.updateBlock(additionalConfig.researchBlockId, [
+          {
+            op: 'replace',
+            path: '/data/subSteps',
+            value: researchBlock.data.subSteps,
+          },
+        ]);
+      } else if (
+        searchResultsEmitted &&
+        researchBlock &&
+        researchBlock.type === 'research'
+      ) {
+        const subStepIndex = researchBlock.data.subSteps.findIndex(
+          (step) => step.id === searchResultsBlockId,
+        );
+
+        const subStep = researchBlock.data.subSteps[
+          subStepIndex
+        ] as SearchResultsResearchBlock;
+
+        subStep.reading.push(...resultChunks);
+
+        additionalConfig.session.updateBlock(additionalConfig.researchBlockId, [
+          {
+            op: 'replace',
+            path: '/data/subSteps',
+            value: researchBlock.data.subSteps,
+          },
+        ]);
+      }
+    };
+
+    await Promise.all(input.queries.map(search));
+
+    return {
+      type: 'search_results',
+      results,
+    };
+  },
+};
+
+export default socialSearchAction;

src/lib/agents/search/researcher/actions/uploadsSearch.ts

@@ -0,0 +1,102 @@
+import z from 'zod';
+import { ResearchAction } from '../../types';
+import UploadStore from '@/lib/uploads/store';
+
+const schema = z.object({
+  queries: z
+    .array(z.string())
+    .describe(
+      'A list of queries to search in user uploaded files. Can be a maximum of 3 queries.',
+    ),
+});
+
+const uploadsSearchAction: ResearchAction<typeof schema> = {
+  name: 'uploads_search',
+  enabled: (config) =>
+    (config.classification.classification.personalSearch &&
+      config.fileIds.length > 0) ||
+    config.fileIds.length > 0,
+  schema,
+  getToolDescription: () =>
+    `Use this tool to perform searches over the user's uploaded files. This is useful when you need to gather information from the user's documents to answer their questions. You can provide up to 3 queries at a time. You will have to use this every single time if this is present and relevant.`,
+  getDescription: () => `
+  Use this tool to perform searches over the user's uploaded files. This is useful when you need to gather information from the user's documents to answer their questions. You can provide up to 3 queries at a time. You will have to use this every single time if this is present and relevant.
+  Always ensure that the queries you use are directly relevant to the user's request and pertain to the content of their uploaded files.
+
+  For example, if the user says "Please find information about X in my uploaded documents", you can call this tool with a query related to X to retrieve the relevant information from their files.
+  Never use this tool to search the web or for information that is not contained within the user's uploaded files.
+  `,
+  execute: async (input, additionalConfig) => {
+    input.queries = input.queries.slice(0, 3);
+
+    const researchBlock = additionalConfig.session.getBlock(
+      additionalConfig.researchBlockId,
+    );
+
+    if (researchBlock && researchBlock.type === 'research') {
+      researchBlock.data.subSteps.push({
+        id: crypto.randomUUID(),
+        type: 'upload_searching',
+        queries: input.queries,
+      });
+
+      additionalConfig.session.updateBlock(additionalConfig.researchBlockId, [
+        {
+          op: 'replace',
+          path: '/data/subSteps',
+          value: researchBlock.data.subSteps,
+        },
+      ]);
+    }
+
+    const uploadStore = new UploadStore({
+      embeddingModel: additionalConfig.embedding,
+      fileIds: additionalConfig.fileIds,
+    });
+
+    const results = await uploadStore.query(input.queries, 10);
+
+    const seenIds = new Map<string, number>();
+
+    const filteredSearchResults = results
+      .map((result, index) => {
+        if (result.metadata.url && !seenIds.has(result.metadata.url)) {
+          seenIds.set(result.metadata.url, index);
+          return result;
+        } else if (result.metadata.url && seenIds.has(result.metadata.url)) {
+          const existingIndex = seenIds.get(result.metadata.url)!;
+          const existingResult = results[existingIndex];
+
+          existingResult.content += `\n\n${result.content}`;
+
+          return undefined;
+        }
+
+        return result;
+      })
+      .filter((r) => r !== undefined);
+
+    if (researchBlock && researchBlock.type === 'research') {
+      researchBlock.data.subSteps.push({
+        id: crypto.randomUUID(),
+        type: 'upload_search_results',
+        results: filteredSearchResults,
+      });
+
+      additionalConfig.session.updateBlock(additionalConfig.researchBlockId, [
+        {
+          op: 'replace',
+          path: '/data/subSteps',
+          value: researchBlock.data.subSteps,
+        },
+      ]);
+    }
+
+    return {
+      type: 'search_results',
+      results: filteredSearchResults,
+    };
+  },
+};
+
+export default uploadsSearchAction;

src/lib/agents/search/researcher/actions/webSearch.ts

@@ -1,7 +1,7 @@
 import z from 'zod';
 import { ResearchAction } from '../../types';
 import { searchSearxng } from '@/lib/searxng';
-import { Chunk } from '@/lib/types';
+import { Chunk, SearchResultsResearchBlock } from '@/lib/types';
 
 const actionSchema = z.object({
   type: z.literal('web_search'),
@@ -10,38 +10,164 @@ const actionSchema = z.object({
     .describe('An array of search queries to perform web searches for.'),
 });
 
-const actionDescription = `
-You have to use this action aggressively to find relevant information from the web to answer user queries. You can combine this action with other actions to gather comprehensive data. Always ensure that you provide accurate and up-to-date information by leveraging web search results.
-When this action is present, you must use it to obtain current information from the web. 
+const speedModePrompt = `
+Use this tool to perform web searches based on the provided queries. This is useful when you need to gather information from the web to answer the user's questions. You can provide up to 3 queries at a time. You will have to use this every single time if this is present and relevant.
+You are currently on speed mode, meaning you would only get to call this tool once. Make sure to prioritize the most important queries that are likely to get you the needed information in one go.
 
-### How to use:
-1. For speed search mode, you can use this action once. Make sure to cover all aspects of the user's query in that single search.
-2. If you're on quality mode, you'll get to use this action up to two times. Use the first search to gather general information, and the second search to fill in any gaps or get more specific details based on the initial findings.
-3. If you're set on quality mode, then you will get to use this action multiple times to gather more information. Use your judgment to decide when additional searches are necessary to provide a thorough and accurate response.
+Your queries should be very targeted and specific to the information you need, avoid broad or generic queries.
+Your queries shouldn't be sentences but rather keywords that are SEO friendly and can be used to search the web for information.
 
-Input: An array of search queries. Make sure the queries are relevant to the user's request and cover different aspects if necessary. You can include a maximum of 3 queries. Make sure the queries are SEO friendly and not sentences rather keywords which can be used to search a search engine like Google, Bing, etc.
+For example, if the user is asking about the features of a new technology, you might use queries like "GPT-5.1 features", "GPT-5.1 release date", "GPT-5.1 improvements" rather than a broad query like "Tell me about GPT-5.1".
+
+You can search for 3 queries in one go, make sure to utilize all 3 queries to maximize the information you can gather. If a question is simple, then split your queries to cover different aspects or related topics to get a comprehensive understanding.
+If this tool is present and no other tools are more relevant, you MUST use this tool to get the needed information.
+`;
+
+const balancedModePrompt = `
+Use this tool to perform web searches based on the provided queries. This is useful when you need to gather information from the web to answer the user's questions. You can provide up to 3 queries at a time. You will have to use this every single time if this is present and relevant.
+
+You can call this tool several times if needed to gather enough information.
+Start initially with broader queries to get an overview, then narrow down with more specific queries based on the results you receive.
+
+Your queries shouldn't be sentences but rather keywords that are SEO friendly and can be used to search the web for information.
+
+For example if the user is asking about Tesla, your actions should be like:
+1. __reasoning_preamble "The user is asking about Tesla. I will start with broader queries to get an overview of Tesla, then narrow down with more specific queries based on the results I receive." then
+2. web_search ["Tesla", "Tesla latest news", "Tesla stock price"] then
+3. __reasoning_preamble "Based on the previous search results, I will now narrow down my queries to focus on Tesla's recent developments and stock performance." then
+4. web_search ["Tesla Q2 2025 earnings", "Tesla new model 2025", "Tesla stock analysis"] then done.
+5. __reasoning_preamble "I have gathered enough information to provide a comprehensive answer."
+6. done.
+
+You can search for 3 queries in one go, make sure to utilize all 3 queries to maximize the information you can gather. If a question is simple, then split your queries to cover different aspects or related topics to get a comprehensive understanding.
+If this tool is present and no other tools are more relevant, you MUST use this tool to get the needed information. You can call this tools, multiple times as needed.
+`;
+
+const qualityModePrompt = `
+Use this tool to perform web searches based on the provided queries. This is useful when you need to gather information from the web to answer the user's questions. You can provide up to 3 queries at a time. You will have to use this every single time if this is present and relevant.
+
+You have to call this tool several times to gather enough information unless the question is very simple (like greeting questions or basic facts).
+Start initially with broader queries to get an overview, then narrow down with more specific queries based on the results you receive.
+Never stop before at least 5-6 iterations of searches unless the user question is very simple.
+
+Your queries shouldn't be sentences but rather keywords that are SEO friendly and can be used to search the web for information.
+
+You can search for 3 queries in one go, make sure to utilize all 3 queries to maximize the information you can gather. If a question is simple, then split your queries to cover different aspects or related topics to get a comprehensive understanding.
+If this tool is present and no other tools are more relevant, you MUST use this tool to get the needed information. You can call this tools, multiple times as needed.
 `;
 
 const webSearchAction: ResearchAction<typeof actionSchema> = {
   name: 'web_search',
-  description: actionDescription,
   schema: actionSchema,
-  enabled: (config) => config.classification.intents.includes('web_search'),
-  execute: async (input, _) => {
+  getToolDescription: () =>
+    "Use this tool to perform web searches based on the provided queries. This is useful when you need to gather information from the web to answer the user's questions. You can provide up to 3 queries at a time. You will have to use this every single time if this is present and relevant.",
+  getDescription: (config) => {
+    let prompt = '';
+
+    switch (config.mode) {
+      case 'speed':
+        prompt = speedModePrompt;
+        break;
+      case 'balanced':
+        prompt = balancedModePrompt;
+        break;
+      case 'quality':
+        prompt = qualityModePrompt;
+        break;
+      default:
+        prompt = speedModePrompt;
+        break;
+    }
+
+    return prompt;
+  },
+  enabled: (config) =>
+    config.sources.includes('web') &&
+    config.classification.classification.skipSearch === false,
+  execute: async (input, additionalConfig) => {
+    input.queries = input.queries.slice(0, 3);
+
+    const researchBlock = additionalConfig.session.getBlock(
+      additionalConfig.researchBlockId,
+    );
+
+    if (researchBlock && researchBlock.type === 'research') {
+      researchBlock.data.subSteps.push({
+        id: crypto.randomUUID(),
+        type: 'searching',
+        searching: input.queries,
+      });
+
+      additionalConfig.session.updateBlock(additionalConfig.researchBlockId, [
+        {
+          op: 'replace',
+          path: '/data/subSteps',
+          value: researchBlock.data.subSteps,
+        },
+      ]);
+    }
+
+    const searchResultsBlockId = crypto.randomUUID();
+    let searchResultsEmitted = false;
+
     let results: Chunk[] = [];
 
     const search = async (q: string) => {
       const res = await searchSearxng(q);
 
-      res.results.forEach((r) => {
-        results.push({
-          content: r.content || r.title,
-          metadata: {
-            title: r.title,
-            url: r.url,
-          },
+      const resultChunks: Chunk[] = res.results.map((r) => ({
+        content: r.content || r.title,
+        metadata: {
+          title: r.title,
+          url: r.url,
+        },
+      }));
+
+      results.push(...resultChunks);
+
+      if (
+        !searchResultsEmitted &&
+        researchBlock &&
+        researchBlock.type === 'research'
+      ) {
+        searchResultsEmitted = true;
+
+        researchBlock.data.subSteps.push({
+          id: searchResultsBlockId,
+          type: 'search_results',
+          reading: resultChunks,
         });
-      });
+
+        additionalConfig.session.updateBlock(additionalConfig.researchBlockId, [
+          {
+            op: 'replace',
+            path: '/data/subSteps',
+            value: researchBlock.data.subSteps,
+          },
+        ]);
+      } else if (
+        searchResultsEmitted &&
+        researchBlock &&
+        researchBlock.type === 'research'
+      ) {
+        const subStepIndex = researchBlock.data.subSteps.findIndex(
+          (step) => step.id === searchResultsBlockId,
+        );
+
+        const subStep = researchBlock.data.subSteps[
+          subStepIndex
+        ] as SearchResultsResearchBlock;
+
+        subStep.reading.push(...resultChunks);
+
+        additionalConfig.session.updateBlock(additionalConfig.researchBlockId, [
+          {
+            op: 'replace',
+            path: '/data/subSteps',
+            value: researchBlock.data.subSteps,
+          },
+        ]);
+      }
     };
 
     await Promise.all(input.queries.map(search));

src/lib/agents/search/researcher/index.ts

@@ -1,46 +1,37 @@
-import z from 'zod';
-import {
-  ActionConfig,
-  ActionOutput,
-  ResearcherInput,
-  ResearcherOutput,
-} from '../types';
+import { ActionOutput, ResearcherInput, ResearcherOutput } from '../types';
 import { ActionRegistry } from './actions';
 import { getResearcherPrompt } from '@/lib/prompts/search/researcher';
 import SessionManager from '@/lib/session';
-import { ReasoningResearchBlock } from '@/lib/types';
+import { Message, ReasoningResearchBlock } from '@/lib/types';
 import formatChatHistoryAsString from '@/lib/utils/formatHistory';
+import { ToolCall } from '@/lib/models/types';
 
 class Researcher {
   async research(
     session: SessionManager,
     input: ResearcherInput,
   ): Promise<ResearcherOutput> {
-    let findings: string = '';
     let actionOutput: ActionOutput[] = [];
     let maxIteration =
       input.config.mode === 'speed'
-        ? 1
+        ? 2
         : input.config.mode === 'balanced'
-          ? 3
+          ? 6
           : 25;
 
-    const availableActions = ActionRegistry.getAvailableActions({
+    const availableTools = ActionRegistry.getAvailableActionTools({
       classification: input.classification,
-    });
-
-    const schema = z.object({
-      reasoning: z
-        .string()
-        .describe('The reasoning behind choosing the next action.'),
-      action: z
-        .union(availableActions.map((a) => a.schema))
-        .describe('The action to be performed next.'),
+      fileIds: input.config.fileIds,
+      mode: input.config.mode,
+      sources: input.config.sources,
     });
 
     const availableActionsDescription =
       ActionRegistry.getAvailableActionsDescriptions({
         classification: input.classification,
+        fileIds: input.config.fileIds,
+        mode: input.config.mode,
+        sources: input.config.sources,
       });
 
     const researchBlockId = crypto.randomUUID();
@@ -53,37 +44,36 @@ class Researcher {
       },
     });
 
+    const agentMessageHistory: Message[] = [
+      {
+        role: 'user',
+        content: `
+          <conversation>
+          ${formatChatHistoryAsString(input.chatHistory.slice(-10))}
+           User: ${input.followUp} (Standalone question: ${input.classification.standaloneFollowUp})
+           </conversation>
+        `,
+      },
+    ];
+
     for (let i = 0; i < maxIteration; i++) {
       const researcherPrompt = getResearcherPrompt(
         availableActionsDescription,
         input.config.mode,
         i,
         maxIteration,
+        input.config.fileIds,
       );
 
-      const actionStream = input.config.llm.streamObject<
-        z.infer<typeof schema>
-      >({
+      const actionStream = input.config.llm.streamText({
         messages: [
           {
             role: 'system',
             content: researcherPrompt,
           },
-          {
-            role: 'user',
-            content: `
-                    <conversation>
-                    ${formatChatHistoryAsString(input.chatHistory.slice(-10))}
-                    User: ${input.followUp} (Standalone question: ${input.classification.standaloneFollowUp})
-                    </conversation>
-
-                    <previous_actions>
-                    ${findings}
-                    </previous_actions>
-                    `,
-          },
+          ...agentMessageHistory,
         ],
-        schema,
+        tools: availableTools,
       });
 
       const block = session.getBlock(researchBlockId);
@@ -91,43 +81,26 @@ class Researcher {
       let reasoningEmitted = false;
       let reasoningId = crypto.randomUUID();
 
-      let finalActionRes: any;
+      let finalToolCalls: ToolCall[] = [];
 
       for await (const partialRes of actionStream) {
-        try {
-          if (
-            partialRes.reasoning &&
-            !reasoningEmitted &&
-            block &&
-            block.type === 'research'
-          ) {
-            reasoningEmitted = true;
-            block.data.subSteps.push({
-              id: reasoningId,
-              type: 'reasoning',
-              reasoning: partialRes.reasoning,
-            });
-            session.updateBlock(researchBlockId, [
-              {
-                op: 'replace',
-                path: '/data/subSteps',
-                value: block.data.subSteps,
-              },
-            ]);
-          } else if (
-            partialRes.reasoning &&
-            reasoningEmitted &&
-            block &&
-            block.type === 'research'
-          ) {
-            const subStepIndex = block.data.subSteps.findIndex(
-              (step: any) => step.id === reasoningId,
-            );
-            if (subStepIndex !== -1) {
-              const subStep = block.data.subSteps[
-                subStepIndex
-              ] as ReasoningResearchBlock;
-              subStep.reasoning = partialRes.reasoning;
+        if (partialRes.toolCallChunk.length > 0) {
+          partialRes.toolCallChunk.forEach((tc) => {
+            if (
+              tc.name === '__reasoning_preamble' &&
+              tc.arguments['plan'] &&
+              !reasoningEmitted &&
+              block &&
+              block.type === 'research'
+            ) {
+              reasoningEmitted = true;
+
+              block.data.subSteps.push({
+                id: reasoningId,
+                type: 'reasoning',
+                reasoning: tc.arguments['plan'],
+              });
+
               session.updateBlock(researchBlockId, [
                 {
                   op: 'replace',
@@ -135,95 +108,113 @@ class Researcher {
                   value: block.data.subSteps,
                 },
               ]);
-            }
-          }
+            } else if (
+              tc.name === '__reasoning_preamble' &&
+              tc.arguments['plan'] &&
+              reasoningEmitted &&
+              block &&
+              block.type === 'research'
+            ) {
+              const subStepIndex = block.data.subSteps.findIndex(
+                (step: any) => step.id === reasoningId,
+              );
 
-          finalActionRes = partialRes;
-        } catch (e) {
-          // nothing
+              if (subStepIndex !== -1) {
+                const subStep = block.data.subSteps[
+                  subStepIndex
+                ] as ReasoningResearchBlock;
+                subStep.reasoning = tc.arguments['plan'];
+                session.updateBlock(researchBlockId, [
+                  {
+                    op: 'replace',
+                    path: '/data/subSteps',
+                    value: block.data.subSteps,
+                  },
+                ]);
+              }
+            }
+
+            const existingIndex = finalToolCalls.findIndex(
+              (ftc) => ftc.id === tc.id,
+            );
+
+            if (existingIndex !== -1) {
+              finalToolCalls[existingIndex].arguments = tc.arguments;
+            } else {
+              finalToolCalls.push(tc);
+            }
+          });
         }
       }
 
-      if (finalActionRes.action.type === 'done') {
+      if (finalToolCalls.length === 0) {
         break;
       }
 
-      const actionConfig: ActionConfig = {
-        type: finalActionRes.action.type as string,
-        params: finalActionRes.action,
-      };
+      if (finalToolCalls[finalToolCalls.length - 1].name === 'done') {
+        break;
+      }
 
-      const queries = actionConfig.params.queries || [];
-      if (block && block.type === 'research') {
-        block.data.subSteps.push({
-          id: crypto.randomUUID(),
-          type: 'searching',
-          searching: queries,
+      agentMessageHistory.push({
+        role: 'assistant',
+        content: '',
+        tool_calls: finalToolCalls,
+      });
+
+      const actionResults = await ActionRegistry.executeAll(finalToolCalls, {
+        llm: input.config.llm,
+        embedding: input.config.embedding,
+        session: session,
+        researchBlockId: researchBlockId,
+        fileIds: input.config.fileIds,
+      });
+
+      actionOutput.push(...actionResults);
+
+      actionResults.forEach((action, i) => {
+        agentMessageHistory.push({
+          role: 'tool',
+          id: finalToolCalls[i].id,
+          name: finalToolCalls[i].name,
+          content: JSON.stringify(action),
         });
-        session.updateBlock(researchBlockId, [
-          { op: 'replace', path: '/data/subSteps', value: block.data.subSteps },
-        ]);
-      }
-
-      findings += `\n---\nIteration ${i + 1}:\n`;
-      findings += 'Reasoning: ' + finalActionRes.reasoning + '\n';
-      findings += `Executing Action: ${actionConfig.type} with params ${JSON.stringify(actionConfig.params)}\n`;
-
-      const actionResult = await ActionRegistry.execute(
-        actionConfig.type,
-        actionConfig.params,
-        {
-          llm: input.config.llm,
-          embedding: input.config.embedding,
-          session: session,
-        },
-      );
-
-      actionOutput.push(actionResult);
-
-      if (actionResult.type === 'search_results') {
-        if (block && block.type === 'research') {
-          block.data.subSteps.push({
-            id: crypto.randomUUID(),
-            type: 'reading',
-            reading: actionResult.results,
-          });
-          session.updateBlock(researchBlockId, [
-            {
-              op: 'replace',
-              path: '/data/subSteps',
-              value: block.data.subSteps,
-            },
-          ]);
-        }
-
-        findings += actionResult.results
-          .map(
-            (r) =>
-              `Title: ${r.metadata.title}\nURL: ${r.metadata.url}\nContent: ${r.content}\n`,
-          )
-          .join('\n');
-      }
-
-      findings += '\n---------\n';
+      });
     }
 
-    const searchResults = actionOutput.filter(
-      (a) => a.type === 'search_results',
-    );
+    const searchResults = actionOutput
+      .filter((a) => a.type === 'search_results')
+      .flatMap((a) => a.results);
 
-    session.emit('data', {
-      type: 'sources',
-      data: searchResults
-        .flatMap((a) => a.results)
-        .map((r) => ({
-          content: r.content,
-          metadata: r.metadata,
-        })),
+    const seenUrls = new Map<string, number>();
+
+    const filteredSearchResults = searchResults
+      .map((result, index) => {
+        if (result.metadata.url && !seenUrls.has(result.metadata.url)) {
+          seenUrls.set(result.metadata.url, index);
+          return result;
+        } else if (result.metadata.url && seenUrls.has(result.metadata.url)) {
+          const existingIndex = seenUrls.get(result.metadata.url)!;
+
+          const existingResult = searchResults[existingIndex];
+
+          existingResult.content += `\n\n${result.content}`;
+
+          return undefined;
+        }
+
+        return result;
+      })
+      .filter((r) => r !== undefined);
+
+    session.emitBlock({
+      id: crypto.randomUUID(),
+      type: 'source',
+      data: filteredSearchResults,
     });
 
     return {
       findings: actionOutput,
+      searchFindings: filteredSearchResults,
     };
   }
 }

src/lib/agents/search/types.ts

@@ -8,37 +8,32 @@ export type SearchSources = 'web' | 'discussions' | 'academic';
 
 export type SearchAgentConfig = {
   sources: SearchSources[];
+  fileIds: string[];
   llm: BaseLLM<any>;
   embedding: BaseEmbedding<any>;
   mode: 'speed' | 'balanced' | 'quality';
+  systemInstructions: string;
 };
 
 export type SearchAgentInput = {
   chatHistory: ChatTurnMessage[];
   followUp: string;
   config: SearchAgentConfig;
+  chatId: string;
+  messageId: string;
 };
 
-export interface Intent {
-  name: string;
-  description: string;
-  requiresSearch: boolean;
-  enabled: (config: { sources: SearchSources[] }) => boolean;
-}
-
-export type Widget<TSchema extends z.ZodObject<any> = z.ZodObject<any>> = {
-  name: string;
-  description: string;
-  schema: TSchema;
-  execute: (
-    params: z.infer<TSchema>,
-    additionalConfig: AdditionalConfig,
-  ) => Promise<WidgetOutput>;
+export type WidgetInput = {
+  chatHistory: ChatTurnMessage[];
+  followUp: string;
+  classification: ClassifierOutput;
+  llm: BaseLLM<any>;
 };
 
-export type WidgetConfig = {
+export type Widget = {
   type: string;
-  params: Record<string, any>;
+  shouldExecute: (classification: ClassifierOutput) => boolean;
+  execute: (input: WidgetInput) => Promise<WidgetOutput | void>;
 };
 
 export type WidgetOutput = {
@@ -55,10 +50,16 @@ export type ClassifierInput = {
 };
 
 export type ClassifierOutput = {
-  skipSearch: boolean;
+  classification: {
+    skipSearch: boolean;
+    personalSearch: boolean;
+    academicSearch: boolean;
+    discussionSearch: boolean;
+    showWeatherWidget: boolean;
+    showStockWidget: boolean;
+    showCalculationWidget: boolean;
+  };
   standaloneFollowUp: string;
-  intents: string[];
-  widgets: WidgetConfig[];
 };
 
 export type AdditionalConfig = {
@@ -76,6 +77,7 @@ export type ResearcherInput = {
 
 export type ResearcherOutput = {
   findings: ActionOutput[];
+  searchFindings: Chunk[];
 };
 
 export type SearchActionOutput = {
@@ -87,22 +89,34 @@ export type DoneActionOutput = {
   type: 'done';
 };
 
-export type ActionOutput = SearchActionOutput | DoneActionOutput;
+export type ReasoningResearchAction = {
+  type: 'reasoning';
+  reasoning: string;
+};
+
+export type ActionOutput =
+  | SearchActionOutput
+  | DoneActionOutput
+  | ReasoningResearchAction;
 
 export interface ResearchAction<
   TSchema extends z.ZodObject<any> = z.ZodObject<any>,
 > {
   name: string;
-  description: string;
   schema: z.ZodObject<any>;
-  enabled: (config: { classification: ClassifierOutput }) => boolean;
+  getToolDescription: (config: { mode: SearchAgentConfig['mode'] }) => string;
+  getDescription: (config: { mode: SearchAgentConfig['mode'] }) => string;
+  enabled: (config: {
+    classification: ClassifierOutput;
+    fileIds: string[];
+    mode: SearchAgentConfig['mode'];
+    sources: SearchSources[];
+  }) => boolean;
   execute: (
     params: z.infer<TSchema>,
-    additionalConfig: AdditionalConfig,
+    additionalConfig: AdditionalConfig & {
+      researchBlockId: string;
+      fileIds: string[];
+    },
   ) => Promise<ActionOutput>;
 }
-
-export type ActionConfig = {
-  type: string;
-  params: Record<string, any>;
-};

src/lib/agents/search/widgets/calculationWidget.ts

@@ -1,66 +1,70 @@
 import z from 'zod';
 import { Widget } from '../types';
-import { evaluate as mathEval } from 'mathjs';
+import formatChatHistoryAsString from '@/lib/utils/formatHistory';
+import { exp, evaluate as mathEval } from 'mathjs';
 
 const schema = z.object({
-  type: z.literal('calculation'),
   expression: z
     .string()
-    .describe(
-      "A valid mathematical expression to be evaluated (e.g., '2 + 2', '3 * (4 + 5)').",
-    ),
+    .describe('Mathematical expression to calculate or evaluate.'),
+  notPresent: z
+    .boolean()
+    .describe('Whether there is any need for the calculation widget.'),
 });
 
-const calculationWidget: Widget<typeof schema> = {
-  name: 'calculation',
-  description: `Performs mathematical calculations and evaluates mathematical expressions. Supports arithmetic operations, algebraic equations, functions, and complex mathematical computations.
+const system = `
+<role>
+Assistant is a calculation expression extractor. You will recieve a user follow up and a conversation history.
+Your task is to determine if there is a mathematical expression that needs to be calculated or evaluated. If there is, extract the expression and return it. If there is no need for any calculation, set notPresent to true.
+</role>
 
-**What it provides:**
-- Evaluates mathematical expressions and returns computed results
-- Handles basic arithmetic (+, -, *, /)
-- Supports functions (sqrt, sin, cos, log, etc.)
-- Can process complex expressions with parentheses and order of operations
+<instructions>
+Make sure that the extracted expression is valid and can be used to calculate the result with Math JS library (https://mathjs.org/). If the expression is not valid, set notPresent to true.
+If you feel like you cannot extract a valid expression, set notPresent to true.
+</instructions>
 
-**When to use:**
-- User asks to calculate, compute, or evaluate a mathematical expression
-- Questions like "what is X", "calculate Y", "how much is Z" where X/Y/Z are math expressions
-- Any request involving numbers and mathematical operations
-
-**Example call:**
+<output_format>
+You must respond in the following JSON format without any extra text, explanations or filler sentences:
 {
-  "type": "calculation",
-  "expression": "25% of 480"
+  "expression": string,
+  "notPresent": boolean
 }
+</output_format>
+`;
 
-{
-  "type": "calculation", 
-  "expression": "sqrt(144) + 5 * 2"
-}
-
-**Important:** The expression must be valid mathematical syntax that can be evaluated by mathjs. Format percentages as "0.25 * 480" or "25% of 480". Do not include currency symbols, units, or non-mathematical text in the expression.`,
-  schema: schema,
-  execute: async (params, _) => {
-    try {
-      const result = mathEval(params.expression);
-
-      return {
-        type: 'calculation_result',
-        llmContext: `The result of the expression "${params.expression}" is ${result}.`,
-        data: {
-          expression: params.expression,
-          result: result,
+const calculationWidget: Widget = {
+  type: 'calculationWidget',
+  shouldExecute: (classification) =>
+    classification.classification.showCalculationWidget,
+  execute: async (input) => {
+    const output = await input.llm.generateObject<typeof schema>({
+      messages: [
+        {
+          role: 'system',
+          content: system,
         },
-      };
-    } catch (error) {
-      return {
-        type: 'calculation_result',
-        llmContext: 'Failed to evaluate mathematical expression.',
-        data: {
-          expression: params.expression,
-          result: `Error evaluating expression: ${error}`,
+        {
+          role: 'user',
+          content: `<conversation_history>\n${formatChatHistoryAsString(input.chatHistory)}\n</conversation_history>\n<user_follow_up>\n${input.followUp}\n</user_follow_up>`,
         },
-      };
+      ],
+      schema,
+    });
+
+    if (output.notPresent) {
+      return;
     }
+
+    const result = mathEval(output.expression);
+
+    return {
+      type: 'calculation_result',
+      llmContext: `The result of the calculation for the expression "${output.expression}" is: ${result}`,
+      data: {
+        expression: output.expression,
+        result,
+      },
+    };
   },
 };
 

src/lib/agents/search/widgets/executor.ts

@@ -0,0 +1,36 @@
+import { Widget, WidgetInput, WidgetOutput } from '../types';
+
+class WidgetExecutor {
+  static widgets = new Map<string, Widget>();
+
+  static register(widget: Widget) {
+    this.widgets.set(widget.type, widget);
+  }
+
+  static getWidget(type: string): Widget | undefined {
+    return this.widgets.get(type);
+  }
+
+  static async executeAll(input: WidgetInput): Promise<WidgetOutput[]> {
+    const results: WidgetOutput[] = [];
+
+    await Promise.all(
+      Array.from(this.widgets.values()).map(async (widget) => {
+        try {
+          if (widget.shouldExecute(input.classification)) {
+            const output = await widget.execute(input);
+            if (output) {
+              results.push(output);
+            }
+          }
+        } catch (e) {
+          console.log(`Error executing widget ${widget.type}:`, e);
+        }
+      }),
+    );
+
+    return results;
+  }
+}
+
+export default WidgetExecutor;

src/lib/agents/search/widgets/index.ts

@@ -1,10 +1,10 @@
 import calculationWidget from './calculationWidget';
-import WidgetRegistry from './registry';
+import WidgetExecutor from './executor';
 import weatherWidget from './weatherWidget';
 import stockWidget from './stockWidget';
 
-WidgetRegistry.register(weatherWidget);
-WidgetRegistry.register(calculationWidget);
-WidgetRegistry.register(stockWidget);
+WidgetExecutor.register(weatherWidget);
+WidgetExecutor.register(calculationWidget);
+WidgetExecutor.register(stockWidget);
 
-export { WidgetRegistry };
+export { WidgetExecutor };

src/lib/agents/search/widgets/registry.ts

@@ -1,65 +0,0 @@
-import {
-  AdditionalConfig,
-  SearchAgentConfig,
-  Widget,
-  WidgetConfig,
-  WidgetOutput,
-} from '../types';
-
-class WidgetRegistry {
-  private static widgets = new Map<string, Widget>();
-
-  static register(widget: Widget<any>) {
-    this.widgets.set(widget.name, widget);
-  }
-
-  static get(name: string): Widget | undefined {
-    return this.widgets.get(name);
-  }
-
-  static getAll(): Widget[] {
-    return Array.from(this.widgets.values());
-  }
-
-  static getDescriptions(): string {
-    return Array.from(this.widgets.values())
-      .map((widget) => `${widget.name}: ${widget.description}`)
-      .join('\n\n');
-  }
-
-  static async execute(
-    name: string,
-    params: any,
-    config: AdditionalConfig,
-  ): Promise<WidgetOutput> {
-    const widget = this.get(name);
-
-    if (!widget) {
-      throw new Error(`Widget with name ${name} not found`);
-    }
-
-    return widget.execute(params, config);
-  }
-
-  static async executeAll(
-    widgets: WidgetConfig[],
-    additionalConfig: AdditionalConfig,
-  ): Promise<WidgetOutput[]> {
-    const results: WidgetOutput[] = [];
-
-    await Promise.all(
-      widgets.map(async (widgetConfig) => {
-        const output = await this.execute(
-          widgetConfig.type,
-          widgetConfig.params,
-          additionalConfig,
-        );
-        results.push(output);
-      }),
-    );
-
-    return results;
-  }
-}
-
-export default WidgetRegistry;

src/lib/agents/search/widgets/stockWidget.ts

@@ -1,80 +1,86 @@
 import z from 'zod';
 import { Widget } from '../types';
 import YahooFinance from 'yahoo-finance2';
+import formatChatHistoryAsString from '@/lib/utils/formatHistory';
 
 const yf = new YahooFinance({
   suppressNotices: ['yahooSurvey'],
 });
 
 const schema = z.object({
-  type: z.literal('stock'),
-  ticker: z
+  name: z
     .string()
     .describe(
-      "The stock ticker symbol in uppercase (e.g., 'AAPL' for Apple Inc., 'TSLA' for Tesla, 'GOOGL' for Google). Use the primary exchange ticker.",
+      "The stock name for example Nvidia, Google, Apple, Microsoft etc. You can also return ticker if you're aware of it otherwise just use the name.",
     ),
-  comparisonTickers: z
+  comparisonNames: z
     .array(z.string())
     .max(3)
     .describe(
-      "Optional array of up to 3 ticker symbols to compare against the base ticker (e.g., ['MSFT', 'GOOGL', 'META']). Charts will show percentage change comparison.",
+      "Optional array of up to 3 stock names to compare against the base name (e.g., ['Microsoft', 'GOOGL', 'Meta']). Charts will show percentage change comparison.",
     ),
+  notPresent: z
+    .boolean()
+    .describe('Whether there is no need for the stock widget.'),
 });
 
-const stockWidget: Widget<typeof schema> = {
-  name: 'stock',
-  description: `Provides comprehensive real-time stock market data and financial information for any publicly traded company. Returns detailed quote data, market status, trading metrics, and company fundamentals.
+const systemPrompt = `
+<role>
+You are a stock ticker/name extractor. You will receive a user follow up and a conversation history.
+Your task is to determine if the user is asking about stock information and extract the stock name(s) they want data for.
+</role>
 
-You can set skipSearch to true if the stock widget can fully answer the user's query without needing additional web search.
+<instructions>
+- If the user is asking about a stock, extract the primary stock name or ticker.
+- If the user wants to compare stocks, extract up to 3 comparison stock names in comparisonNames.
+- You can use either stock names (e.g., "Nvidia", "Apple") or tickers (e.g., "NVDA", "AAPL").
+- If you cannot determine a valid stock or the query is not stock-related, set notPresent to true.
+- If no comparison is needed, set comparisonNames to an empty array.
+</instructions>
 
-**What it provides:**
-- **Real-time Price Data**: Current price, previous close, open price, day's range (high/low)
-- **Market Status**: Whether market is currently open or closed, trading sessions
-- **Trading Metrics**: Volume, average volume, bid/ask prices and sizes
-- **Performance**: Price changes (absolute and percentage), 52-week high/low range
-- **Valuation**: Market capitalization, P/E ratio, earnings per share (EPS)
-- **Dividends**: Dividend rate, dividend yield, ex-dividend date
-- **Company Info**: Full company name, exchange, currency, sector/industry (when available)
-- **Advanced Metrics**: Beta, trailing/forward P/E, book value, price-to-book ratio
-- **Charts Data**: Historical price movements for visualization
-- **Comparison**: Compare up to 3 stocks side-by-side with percentage-based performance visualization
-
-**When to use:**
-- User asks about a stock price ("What's AAPL stock price?", "How is Tesla doing?")
-- Questions about company market performance ("Is Microsoft up or down today?")
-- Requests for stock market data, trading info, or company valuation
-- Queries about dividends, P/E ratio, market cap, or other financial metrics
-- Any stock/equity-related question for a specific company
-- Stock comparisons ("Compare AAPL vs MSFT", "How is TSLA doing vs RIVN and LCID?")
-
-**Example calls:**
+<output_format>
+You must respond in the following JSON format without any extra text, explanations or filler sentences:
 {
-  "type": "stock",
-  "ticker": "AAPL"
+  "name": string,
+  "comparisonNames": string[],
+  "notPresent": boolean
 }
+</output_format>
+`;
 
-{
-  "type": "stock",
-  "ticker": "TSLA",
-  "comparisonTickers": ["RIVN", "LCID"]
-}
+const stockWidget: Widget = {
+  type: 'stockWidget',
+  shouldExecute: (classification) =>
+    classification.classification.showStockWidget,
+  execute: async (input) => {
+    const output = await input.llm.generateObject<typeof schema>({
+      messages: [
+        {
+          role: 'system',
+          content: systemPrompt,
+        },
+        {
+          role: 'user',
+          content: `<conversation_history>\n${formatChatHistoryAsString(input.chatHistory)}\n</conversation_history>\n<user_follow_up>\n${input.followUp}\n</user_follow_up>`,
+        },
+      ],
+      schema,
+    });
 
-{
-  "type": "stock",
-  "ticker": "GOOGL",
-  "comparisonTickers": ["MSFT", "META", "AMZN"]
-}
+    if (output.notPresent) {
+      return;
+    }
 
-**Important:** 
-- Use the correct ticker symbol (uppercase preferred: AAPL not aapl)
-- For companies with multiple share classes, use the most common one (e.g., GOOGL for Google Class A shares)
-- The widget works for stocks listed on major exchanges (NYSE, NASDAQ, etc.)
-- Returns comprehensive data; the UI will display relevant metrics based on availability
-- Market data may be delayed by 15-20 minutes for free data sources during trading hours`,
-  schema: schema,
-  execute: async (params, _) => {
+    const params = output;
     try {
-      const ticker = params.ticker.toUpperCase();
+      const name = params.name;
+
+      const findings = await yf.search(name);
+
+      if (findings.quotes.length === 0)
+        throw new Error(`Failed to find quote for name/symbol: ${name}`);
+
+      const ticker = findings.quotes[0].symbol as string;
 
       const quote: any = await yf.quote(ticker);
 
@@ -143,11 +149,16 @@ You can set skipSearch to true if the stock widget can fully answer the user's q
       }
 
       let comparisonData: any = null;
-      if (params.comparisonTickers.length > 0) {
-        const comparisonPromises = params.comparisonTickers
+      if (params.comparisonNames.length > 0) {
+        const comparisonPromises = params.comparisonNames
           .slice(0, 3)
-          .map(async (compTicker) => {
+          .map(async (compName) => {
             try {
+              const compFindings = await yf.search(compName);
+
+              if (compFindings.quotes.length === 0) return null;
+
+              const compTicker = compFindings.quotes[0].symbol as string;
               const compQuote = await yf.quote(compTicker);
               const compCharts = await Promise.all([
                 yf
@@ -204,7 +215,7 @@ You can set skipSearch to true if the stock widget can fully answer the user's q
               };
             } catch (error) {
               console.error(
-                `Failed to fetch comparison ticker ${compTicker}:`,
+                `Failed to fetch comparison ticker ${compName}:`,
                 error,
               );
               return null;
@@ -286,123 +297,125 @@ You can set skipSearch to true if the stock widget can fully answer the user's q
         chartData: {
           '1D': chart1D
             ? {
-              timestamps: chart1D.quotes.map((q: any) => q.date.getTime()),
-              prices: chart1D.quotes.map((q: any) => q.close),
-            }
+                timestamps: chart1D.quotes.map((q: any) => q.date.getTime()),
+                prices: chart1D.quotes.map((q: any) => q.close),
+              }
             : null,
           '5D': chart5D
             ? {
-              timestamps: chart5D.quotes.map((q: any) => q.date.getTime()),
-              prices: chart5D.quotes.map((q: any) => q.close),
-            }
+                timestamps: chart5D.quotes.map((q: any) => q.date.getTime()),
+                prices: chart5D.quotes.map((q: any) => q.close),
+              }
             : null,
           '1M': chart1M
             ? {
-              timestamps: chart1M.quotes.map((q: any) => q.date.getTime()),
-              prices: chart1M.quotes.map((q: any) => q.close),
-            }
+                timestamps: chart1M.quotes.map((q: any) => q.date.getTime()),
+                prices: chart1M.quotes.map((q: any) => q.close),
+              }
             : null,
           '3M': chart3M
             ? {
-              timestamps: chart3M.quotes.map((q: any) => q.date.getTime()),
-              prices: chart3M.quotes.map((q: any) => q.close),
-            }
+                timestamps: chart3M.quotes.map((q: any) => q.date.getTime()),
+                prices: chart3M.quotes.map((q: any) => q.close),
+              }
             : null,
           '6M': chart6M
             ? {
-              timestamps: chart6M.quotes.map((q: any) => q.date.getTime()),
-              prices: chart6M.quotes.map((q: any) => q.close),
-            }
+                timestamps: chart6M.quotes.map((q: any) => q.date.getTime()),
+                prices: chart6M.quotes.map((q: any) => q.close),
+              }
             : null,
           '1Y': chart1Y
             ? {
-              timestamps: chart1Y.quotes.map((q: any) => q.date.getTime()),
-              prices: chart1Y.quotes.map((q: any) => q.close),
-            }
+                timestamps: chart1Y.quotes.map((q: any) => q.date.getTime()),
+                prices: chart1Y.quotes.map((q: any) => q.close),
+              }
             : null,
           MAX: chartMAX
             ? {
-              timestamps: chartMAX.quotes.map((q: any) => q.date.getTime()),
-              prices: chartMAX.quotes.map((q: any) => q.close),
-            }
+                timestamps: chartMAX.quotes.map((q: any) => q.date.getTime()),
+                prices: chartMAX.quotes.map((q: any) => q.close),
+              }
             : null,
         },
         comparisonData: comparisonData
           ? comparisonData.map((comp: any) => ({
-            ticker: comp.ticker,
-            name: comp.name,
-            chartData: {
-              '1D': comp.charts[0]
-                ? {
-                  timestamps: comp.charts[0].quotes.map((q: any) =>
-                    q.date.getTime(),
-                  ),
-                  prices: comp.charts[0].quotes.map((q: any) => q.close),
-                }
-                : null,
-              '5D': comp.charts[1]
-                ? {
-                  timestamps: comp.charts[1].quotes.map((q: any) =>
-                    q.date.getTime(),
-                  ),
-                  prices: comp.charts[1].quotes.map((q: any) => q.close),
-                }
-                : null,
-              '1M': comp.charts[2]
-                ? {
-                  timestamps: comp.charts[2].quotes.map((q: any) =>
-                    q.date.getTime(),
-                  ),
-                  prices: comp.charts[2].quotes.map((q: any) => q.close),
-                }
-                : null,
-              '3M': comp.charts[3]
-                ? {
-                  timestamps: comp.charts[3].quotes.map((q: any) =>
-                    q.date.getTime(),
-                  ),
-                  prices: comp.charts[3].quotes.map((q: any) => q.close),
-                }
-                : null,
-              '6M': comp.charts[4]
-                ? {
-                  timestamps: comp.charts[4].quotes.map((q: any) =>
-                    q.date.getTime(),
-                  ),
-                  prices: comp.charts[4].quotes.map((q: any) => q.close),
-                }
-                : null,
-              '1Y': comp.charts[5]
-                ? {
-                  timestamps: comp.charts[5].quotes.map((q: any) =>
-                    q.date.getTime(),
-                  ),
-                  prices: comp.charts[5].quotes.map((q: any) => q.close),
-                }
-                : null,
-              MAX: comp.charts[6]
-                ? {
-                  timestamps: comp.charts[6].quotes.map((q: any) =>
-                    q.date.getTime(),
-                  ),
-                  prices: comp.charts[6].quotes.map((q: any) => q.close),
-                }
-                : null,
-            },
-          }))
+              ticker: comp.ticker,
+              name: comp.name,
+              chartData: {
+                '1D': comp.charts[0]
+                  ? {
+                      timestamps: comp.charts[0].quotes.map((q: any) =>
+                        q.date.getTime(),
+                      ),
+                      prices: comp.charts[0].quotes.map((q: any) => q.close),
+                    }
+                  : null,
+                '5D': comp.charts[1]
+                  ? {
+                      timestamps: comp.charts[1].quotes.map((q: any) =>
+                        q.date.getTime(),
+                      ),
+                      prices: comp.charts[1].quotes.map((q: any) => q.close),
+                    }
+                  : null,
+                '1M': comp.charts[2]
+                  ? {
+                      timestamps: comp.charts[2].quotes.map((q: any) =>
+                        q.date.getTime(),
+                      ),
+                      prices: comp.charts[2].quotes.map((q: any) => q.close),
+                    }
+                  : null,
+                '3M': comp.charts[3]
+                  ? {
+                      timestamps: comp.charts[3].quotes.map((q: any) =>
+                        q.date.getTime(),
+                      ),
+                      prices: comp.charts[3].quotes.map((q: any) => q.close),
+                    }
+                  : null,
+                '6M': comp.charts[4]
+                  ? {
+                      timestamps: comp.charts[4].quotes.map((q: any) =>
+                        q.date.getTime(),
+                      ),
+                      prices: comp.charts[4].quotes.map((q: any) => q.close),
+                    }
+                  : null,
+                '1Y': comp.charts[5]
+                  ? {
+                      timestamps: comp.charts[5].quotes.map((q: any) =>
+                        q.date.getTime(),
+                      ),
+                      prices: comp.charts[5].quotes.map((q: any) => q.close),
+                    }
+                  : null,
+                MAX: comp.charts[6]
+                  ? {
+                      timestamps: comp.charts[6].quotes.map((q: any) =>
+                        q.date.getTime(),
+                      ),
+                      prices: comp.charts[6].quotes.map((q: any) => q.close),
+                    }
+                  : null,
+              },
+            }))
           : null,
       };
 
       return {
         type: 'stock',
-        llmContext: `Current price of ${stockData.shortName} (${stockData.symbol}) is ${stockData.regularMarketPrice} ${stockData.currency}. Other details: ${JSON.stringify({
-          marketState: stockData.marketState,
-          regularMarketChange: stockData.regularMarketChange,
-          regularMarketChangePercent: stockData.regularMarketChangePercent,
-          marketCap: stockData.marketCap,
-          peRatio: stockData.trailingPE,
-          dividendYield: stockData.dividendYield,
-        })}`,
+        llmContext: `Current price of ${stockData.shortName} (${stockData.symbol}) is ${stockData.regularMarketPrice} ${stockData.currency}. Other details: ${JSON.stringify(
+          {
+            marketState: stockData.marketState,
+            regularMarketChange: stockData.regularMarketChange,
+            regularMarketChangePercent: stockData.regularMarketChangePercent,
+            marketCap: stockData.marketCap,
+            peRatio: stockData.trailingPE,
+            dividendYield: stockData.dividendYield,
+          },
+        )}`,
         data: stockData,
       };
     } catch (error: any) {
@@ -411,7 +424,7 @@ You can set skipSearch to true if the stock widget can fully answer the user's q
         llmContext: 'Failed to fetch stock data.',
         data: {
           error: `Error fetching stock data: ${error.message || error}`,
-          ticker: params.ticker,
+          ticker: params.name,
         },
       };
     }

src/lib/agents/search/widgets/weatherWidget.ts

@@ -1,8 +1,8 @@
 import z from 'zod';
 import { Widget } from '../types';
+import formatChatHistoryAsString from '@/lib/utils/formatHistory';
 
-const WeatherWidgetSchema = z.object({
-  type: z.literal('weather'),
+const schema = z.object({
   location: z
     .string()
     .describe(
@@ -18,38 +18,63 @@ const WeatherWidgetSchema = z.object({
     .describe(
       'Longitude coordinate in decimal degrees (e.g., -74.0060). Only use when location name is empty.',
     ),
+  notPresent: z
+    .boolean()
+    .describe('Whether there is no need for the weather widget.'),
 });
 
-const weatherWidget: Widget<typeof WeatherWidgetSchema> = {
-  name: 'weather',
-  description: `Provides comprehensive current weather information and forecasts for any location worldwide. Returns real-time weather data including temperature, conditions, humidity, wind, and multi-day forecasts.
+const systemPrompt = `
+<role>
+You are a location extractor for weather queries. You will receive a user follow up and a conversation history.
+Your task is to determine if the user is asking about weather and extract the location they want weather for.
+</role>
 
-You can set skipSearch to true if the weather widget can fully answer the user's query without needing additional web search.
+<instructions>
+- If the user is asking about weather, extract the location name OR coordinates (never both).
+- If using location name, set lat and lon to 0.
+- If using coordinates, set location to empty string.
+- If you cannot determine a valid location or the query is not weather-related, set notPresent to true.
+- Location should be specific (city, state/region, country) for best results.
+- You have to give the location so that it can be used to fetch weather data, it cannot be left empty unless notPresent is true.
+- Make sure to infer short forms of location names (e.g., "NYC" -> "New York City", "LA" -> "Los Angeles").
+</instructions>
 
-**What it provides:**
-- Current weather conditions (temperature, feels-like, humidity, precipitation)
-- Wind speed, direction, and gusts
-- Weather codes/conditions (clear, cloudy, rainy, etc.)
-- Hourly forecast for next 24 hours
-- Daily forecast for next 7 days (high/low temps, precipitation probability)
-- Timezone information
-
-**When to use:**
-- User asks about weather in a location ("weather in X", "is it raining in Y")
-- Questions about temperature, conditions, or forecast
-- Any weather-related query for a specific place
-
-**Example call:**
+<output_format>
+You must respond in the following JSON format without any extra text, explanations or filler sentences:
 {
-  "type": "weather",
-  "location": "San Francisco, CA, USA",
-  "lat": 0,
-  "lon": 0
+  "location": string,
+  "lat": number,
+  "lon": number,
+  "notPresent": boolean
 }
+</output_format>
+`;
+
+const weatherWidget: Widget = {
+  type: 'weatherWidget',
+  shouldExecute: (classification) =>
+    classification.classification.showWeatherWidget,
+  execute: async (input) => {
+    const output = await input.llm.generateObject<typeof schema>({
+      messages: [
+        {
+          role: 'system',
+          content: systemPrompt,
+        },
+        {
+          role: 'user',
+          content: `<conversation_history>\n${formatChatHistoryAsString(input.chatHistory)}\n</conversation_history>\n<user_follow_up>\n${input.followUp}\n</user_follow_up>`,
+        },
+      ],
+      schema,
+    });
+
+    if (output.notPresent) {
+      return;
+    }
+
+    const params = output;
 
-**Important:** Provide EITHER a location name OR latitude/longitude coordinates, never both. If using location name, set lat/lon to 0. Location should be specific (city, state/region, country) for best results.`,
-  schema: WeatherWidgetSchema,
-  execute: async (params, _) => {
     try {
       if (
         params.location === '' &&

src/lib/agents/suggestions/index.ts

@@ -19,7 +19,7 @@ const generateSuggestions = async (
   input: SuggestionGeneratorInput,
   llm: BaseLLM<any>,
 ) => {
-  const res = await llm.generateObject<z.infer<typeof schema>>({
+  const res = await llm.generateObject<typeof schema>({
     messages: [
       {
         role: 'system',

src/lib/config/clientRegistry.ts

@@ -11,3 +11,19 @@ export const getAutoMediaSearch = () =>
 
 export const getSystemInstructions = () =>
   getClientConfig('systemInstructions', '');
+
+export const getShowWeatherWidget = () =>
+  getClientConfig('showWeatherWidget', 'true') === 'true';
+
+export const getShowNewsWidget = () =>
+  getClientConfig('showNewsWidget', 'true') === 'true';
+
+export const getMeasurementUnit = () => {
+  const value =
+    getClientConfig('measureUnit') ??
+    getClientConfig('measurementUnit', 'metric');
+
+  if (typeof value !== 'string') return 'metric';
+
+  return value.toLowerCase();
+};

src/lib/config/index.ts

@@ -69,6 +69,24 @@ class ConfigManager {
         default: true,
         scope: 'client',
       },
+      {
+        name: 'Show weather widget',
+        key: 'showWeatherWidget',
+        type: 'switch',
+        required: false,
+        description: 'Display the weather card on the home screen.',
+        default: true,
+        scope: 'client',
+      },
+      {
+        name: 'Show news widget',
+        key: 'showNewsWidget',
+        type: 'switch',
+        required: false,
+        description: 'Display the recent news card on the home screen.',
+        default: true,
+        scope: 'client',
+      },
     ],
     personalization: [
       {

src/lib/db/migrate.ts

@@ -45,6 +45,7 @@ fs.readdirSync(migrationsFolder)
     const already = db
       .prepare('SELECT 1 FROM ran_migrations WHERE name = ?')
       .get(migrationName);
+
     if (already) {
       console.log(`Skipping already-applied migration: ${file}`);
       return;
@@ -113,6 +114,160 @@ fs.readdirSync(migrationsFolder)
 
         db.exec('DROP TABLE messages;');
         db.exec('ALTER TABLE messages_with_sources RENAME TO messages;');
+      } else if (migrationName === '0002') {
+        /* Migrate chat */
+        db.exec(`
+          CREATE TABLE IF NOT EXISTS chats_new (
+            id TEXT PRIMARY KEY,
+            title TEXT NOT NULL,
+            createdAt TEXT NOT NULL,
+            sources TEXT DEFAULT '[]',
+            files TEXT DEFAULT '[]'
+          );
+        `);
+
+        const chats = db
+          .prepare('SELECT id, title, createdAt, files FROM chats')
+          .all();
+
+        const insertChat = db.prepare(`
+            INSERT INTO chats_new (id, title, createdAt, sources, files)
+            VALUES (?, ?, ?, ?, ?)
+          `);
+
+        chats.forEach((chat: any) => {
+          let files = chat.files;
+          while (typeof files === 'string') {
+            files = JSON.parse(files || '[]');
+          }
+
+          insertChat.run(
+            chat.id,
+            chat.title,
+            chat.createdAt,
+            '["web"]',
+            JSON.stringify(files),
+          );
+        });
+
+        db.exec('DROP TABLE chats;');
+        db.exec('ALTER TABLE chats_new RENAME TO chats;');
+
+        /* Migrate messages */
+
+        db.exec(`
+          CREATE TABLE IF NOT EXISTS messages_new (
+            id INTEGER PRIMARY KEY,
+            messageId TEXT NOT NULL,
+            chatId TEXT NOT NULL,
+            backendId TEXT NOT NULL,
+            query TEXT NOT NULL,
+            createdAt TEXT NOT NULL,
+            responseBlocks TEXT DEFAULT '[]',
+            status TEXT DEFAULT 'answering'
+          );
+        `);
+
+        const messages = db
+          .prepare(
+            'SELECT id, messageId, chatId, type, content, createdAt, sources FROM messages ORDER BY id ASC',
+          )
+          .all();
+
+        const insertMessage = db.prepare(`
+            INSERT INTO messages_new (messageId, chatId, backendId, query, createdAt, responseBlocks, status)
+            VALUES (?, ?, ?, ?, ?, ?, ?)
+          `);
+
+        let currentMessageData: {
+          sources?: any[];
+          response?: string;
+          query?: string;
+          messageId?: string;
+          chatId?: string;
+          createdAt?: string;
+        } = {};
+        let lastCompleted = true;
+
+        messages.forEach((msg: any) => {
+          if (msg.type === 'user' && lastCompleted) {
+            currentMessageData = {};
+            currentMessageData.messageId = msg.messageId;
+            currentMessageData.chatId = msg.chatId;
+            currentMessageData.query = msg.content;
+            currentMessageData.createdAt = msg.createdAt;
+            lastCompleted = false;
+          } else if (msg.type === 'source' && !lastCompleted) {
+            let sources = msg.sources;
+
+            while (typeof sources === 'string') {
+              sources = JSON.parse(sources || '[]');
+            }
+
+            currentMessageData.sources = sources;
+          } else if (msg.type === 'assistant' && !lastCompleted) {
+            currentMessageData.response = msg.content;
+            insertMessage.run(
+              currentMessageData.messageId,
+              currentMessageData.chatId,
+              `${currentMessageData.messageId}-backend`,
+              currentMessageData.query,
+              currentMessageData.createdAt,
+              JSON.stringify([
+                {
+                  id: crypto.randomUUID(),
+                  type: 'text',
+                  data: currentMessageData.response || '',
+                },
+                ...(currentMessageData.sources &&
+                currentMessageData.sources.length > 0
+                  ? [
+                      {
+                        id: crypto.randomUUID(),
+                        type: 'source',
+                        data: currentMessageData.sources,
+                      },
+                    ]
+                  : []),
+              ]),
+              'completed',
+            );
+
+            lastCompleted = true;
+          } else if (msg.type === 'user' && !lastCompleted) {
+            /* Message wasn't completed so we'll just create the record with empty response */
+            insertMessage.run(
+              currentMessageData.messageId,
+              currentMessageData.chatId,
+              `${currentMessageData.messageId}-backend`,
+              currentMessageData.query,
+              currentMessageData.createdAt,
+              JSON.stringify([
+                {
+                  id: crypto.randomUUID(),
+                  type: 'text',
+                  data: '',
+                },
+                ...(currentMessageData.sources &&
+                currentMessageData.sources.length > 0
+                  ? [
+                      {
+                        id: crypto.randomUUID(),
+                        type: 'source',
+                        data: currentMessageData.sources,
+                      },
+                    ]
+                  : []),
+              ]),
+              'completed',
+            );
+
+            lastCompleted = true;
+          }
+        });
+
+        db.exec('DROP TABLE messages;');
+        db.exec('ALTER TABLE messages_new RENAME TO messages;');
       } else {
         // Execute each statement separately
         statements.forEach((stmt) => {

src/lib/db/schema.ts

@@ -1,6 +1,7 @@
 import { sql } from 'drizzle-orm';
 import { text, integer, sqliteTable } from 'drizzle-orm/sqlite-core';
 import { Block } from '../types';
+import { SearchSources } from '../agents/search/types';
 
 export const messages = sqliteTable('messages', {
   id: integer('id').primaryKey(),
@@ -26,7 +27,11 @@ export const chats = sqliteTable('chats', {
   id: text('id').primaryKey(),
   title: text('title').notNull(),
   createdAt: text('createdAt').notNull(),
-  focusMode: text('focusMode').notNull(),
+  sources: text('sources', {
+    mode: 'json',
+  })
+    .$type<SearchSources[]>()
+    .default(sql`'[]'`),
   files: text('files', { mode: 'json' })
     .$type<DBFile[]>()
     .default(sql`'[]'`),

src/lib/hooks/useChat.tsx

@@ -34,7 +34,7 @@ type ChatContext = {
   chatHistory: [string, string][];
   files: File[];
   fileIds: string[];
-  focusMode: string;
+  sources: string[];
   chatId: string | undefined;
   optimizationMode: string;
   isMessagesLoaded: boolean;
@@ -48,7 +48,7 @@ type ChatContext = {
   researchEnded: boolean;
   setResearchEnded: (ended: boolean) => void;
   setOptimizationMode: (mode: string) => void;
-  setFocusMode: (mode: string) => void;
+  setSources: (sources: string[]) => void;
   setFiles: (files: File[]) => void;
   setFileIds: (fileIds: string[]) => void;
   sendMessage: (
@@ -176,7 +176,7 @@ const loadMessages = async (
   setMessages: (messages: Message[]) => void,
   setIsMessagesLoaded: (loaded: boolean) => void,
   setChatHistory: (history: [string, string][]) => void,
-  setFocusMode: (mode: string) => void,
+  setSources: (sources: string[]) => void,
   setNotFound: (notFound: boolean) => void,
   setFiles: (files: File[]) => void,
   setFileIds: (fileIds: string[]) => void,
@@ -234,7 +234,7 @@ const loadMessages = async (
   setFileIds(files.map((file: File) => file.fileId));
 
   setChatHistory(history);
-  setFocusMode(data.chat.focusMode);
+  setSources(data.chat.sources);
   setIsMessagesLoaded(true);
 };
 
@@ -243,7 +243,7 @@ export const chatContext = createContext<ChatContext>({
   chatId: '',
   fileIds: [],
   files: [],
-  focusMode: '',
+  sources: [],
   hasError: false,
   isMessagesLoaded: false,
   isReady: false,
@@ -260,7 +260,7 @@ export const chatContext = createContext<ChatContext>({
   sendMessage: async () => {},
   setFileIds: () => {},
   setFiles: () => {},
-  setFocusMode: () => {},
+  setSources: () => {},
   setOptimizationMode: () => {},
   setChatModelProvider: () => {},
   setEmbeddingModelProvider: () => {},
@@ -269,6 +269,7 @@ export const chatContext = createContext<ChatContext>({
 
 export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
   const params: { chatId: string } = useParams();
+
   const searchParams = useSearchParams();
   const initialMessage = searchParams.get('q');
 
@@ -286,7 +287,7 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
   const [files, setFiles] = useState<File[]>([]);
   const [fileIds, setFileIds] = useState<string[]>([]);
 
-  const [focusMode, setFocusMode] = useState('webSearch');
+  const [sources, setSources] = useState<string[]>(['web']);
   const [optimizationMode, setOptimizationMode] = useState('speed');
 
   const [isMessagesLoaded, setIsMessagesLoaded] = useState(false);
@@ -401,6 +402,53 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
     });
   }, [messages]);
 
+  const checkReconnect = async () => {
+    setIsReady(true);
+    console.debug(new Date(), 'app:ready');
+
+    if (messages.length > 0) {
+      const lastMsg = messages[messages.length - 1];
+
+      if (lastMsg.status === 'answering') {
+        setLoading(true);
+        setResearchEnded(false);
+        setMessageAppeared(false);
+
+        const res = await fetch(`/api/reconnect/${lastMsg.backendId}`, {
+          method: 'POST',
+        });
+
+        if (!res.body) throw new Error('No response body');
+
+        const reader = res.body?.getReader();
+        const decoder = new TextDecoder('utf-8');
+
+        let partialChunk = '';
+
+        const messageHandler = getMessageHandler(lastMsg);
+
+        while (true) {
+          const { value, done } = await reader.read();
+          if (done) break;
+
+          partialChunk += decoder.decode(value, { stream: true });
+
+          try {
+            const messages = partialChunk.split('\n');
+            for (const msg of messages) {
+              if (!msg.trim()) continue;
+              const json = JSON.parse(msg);
+              messageHandler(json);
+            }
+            partialChunk = '';
+          } catch (error) {
+            console.warn('Incomplete JSON, waiting for next chunk...');
+          }
+        }
+      }
+    }
+  };
+
   useEffect(() => {
     checkConfig(
       setChatModelProvider,
@@ -436,7 +484,7 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
         setMessages,
         setIsMessagesLoaded,
         setChatHistory,
-        setFocusMode,
+        setSources,
         setNotFound,
         setFiles,
         setFileIds,
@@ -454,13 +502,15 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
   }, [messages]);
 
   useEffect(() => {
-    if (isMessagesLoaded && isConfigReady) {
+    if (isMessagesLoaded && isConfigReady && newChatCreated) {
       setIsReady(true);
       console.debug(new Date(), 'app:ready');
+    } else if (isMessagesLoaded && isConfigReady && !newChatCreated) {
+      checkReconnect();
     } else {
       setIsReady(false);
     }
-  }, [isMessagesLoaded, isConfigReady]);
+  }, [isMessagesLoaded, isConfigReady, newChatCreated]);
 
   const rewrite = (messageId: string) => {
     const index = messages.findIndex((msg) => msg.messageId === messageId);
@@ -488,38 +538,10 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isConfigReady, isReady, initialMessage]);
 
-  const sendMessage: ChatContext['sendMessage'] = async (
-    message,
-    messageId,
-    rewrite = false,
-  ) => {
-    if (loading || !message) return;
-    setLoading(true);
-    setResearchEnded(false);
-    setMessageAppeared(false);
+  const getMessageHandler = (message: Message) => {
+    const messageId = message.messageId;
 
-    if (messages.length <= 1) {
-      window.history.replaceState(null, '', `/c/${chatId}`);
-    }
-
-    messageId = messageId ?? crypto.randomBytes(7).toString('hex');
-    const backendId = crypto.randomBytes(20).toString('hex');
-
-    const newMessage: Message = {
-      messageId,
-      chatId: chatId!,
-      backendId,
-      query: message,
-      responseBlocks: [],
-      status: 'answering',
-      createdAt: new Date(),
-    };
-
-    setMessages((prevMessages) => [...prevMessages, newMessage]);
-
-    const receivedTextRef = { current: '' };
-
-    const messageHandler = async (data: any) => {
+    return async (data: any) => {
       if (data.type === 'error') {
         toast.error(data.data);
         setLoading(false);
@@ -536,7 +558,7 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
       if (data.type === 'researchComplete') {
         setResearchEnded(true);
         if (
-          newMessage.responseBlocks.find(
+          message.responseBlocks.find(
             (b) => b.type === 'source' && b.data.length > 0,
           )
         ) {
@@ -556,6 +578,13 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
             return msg;
           }),
         );
+
+        if (
+          (data.block.type === 'source' && data.block.data.length > 0) ||
+          data.block.type === 'text'
+        ) {
+          setMessageAppeared(true);
+        }
       }
 
       if (data.type === 'updateBlock') {
@@ -577,72 +606,19 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
         );
       }
 
-      if (data.type === 'sources') {
-        const sourceBlock: Block = {
-          id: crypto.randomBytes(7).toString('hex'),
-          type: 'source',
-          data: data.data,
-        };
-
-        setMessages((prev) =>
-          prev.map((msg) => {
-            if (msg.messageId === messageId) {
-              return {
-                ...msg,
-                responseBlocks: [...msg.responseBlocks, sourceBlock],
-              };
-            }
-            return msg;
-          }),
-        );
-        if (data.data.length > 0) {
-          setMessageAppeared(true);
-        }
-      }
-
-      if (data.type === 'message') {
-        receivedTextRef.current += data.data;
-
-        setMessages((prev) =>
-          prev.map((msg) => {
-            if (msg.messageId === messageId) {
-              const existingTextBlockIndex = msg.responseBlocks.findIndex(
-                (b) => b.type === 'text',
-              );
-
-              if (existingTextBlockIndex >= 0) {
-                const updatedBlocks = [...msg.responseBlocks];
-                const existingBlock = updatedBlocks[
-                  existingTextBlockIndex
-                ] as Block & { type: 'text' };
-                updatedBlocks[existingTextBlockIndex] = {
-                  ...existingBlock,
-                  data: existingBlock.data + data.data,
-                };
-                return { ...msg, responseBlocks: updatedBlocks };
-              } else {
-                const textBlock: Block = {
-                  id: crypto.randomBytes(7).toString('hex'),
-                  type: 'text',
-                  data: data.data,
-                };
-                return {
-                  ...msg,
-                  responseBlocks: [...msg.responseBlocks, textBlock],
-                };
-              }
-            }
-            return msg;
-          }),
-        );
-        setMessageAppeared(true);
-      }
-
       if (data.type === 'messageEnd') {
+        const currentMsg = messagesRef.current.find(
+          (msg) => msg.messageId === messageId,
+        );
+
         const newHistory: [string, string][] = [
           ...chatHistory,
-          ['human', message],
-          ['assistant', receivedTextRef.current],
+          ['human', message.query],
+          [
+            'assistant',
+            currentMsg?.responseBlocks.find((b) => b.type === 'text')?.data ||
+              '',
+          ],
         ];
 
         setChatHistory(newHistory);
@@ -672,9 +648,6 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
         }
 
         // Check if there are sources and no suggestions
-        const currentMsg = messagesRef.current.find(
-          (msg) => msg.messageId === messageId,
-        );
 
         const hasSourceBlocks = currentMsg?.responseBlocks.some(
           (block) => block.type === 'source' && block.data.length > 0,
@@ -705,6 +678,36 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
         }
       }
     };
+  };
+
+  const sendMessage: ChatContext['sendMessage'] = async (
+    message,
+    messageId,
+    rewrite = false,
+  ) => {
+    if (loading || !message) return;
+    setLoading(true);
+    setResearchEnded(false);
+    setMessageAppeared(false);
+
+    if (messages.length <= 1) {
+      window.history.replaceState(null, '', `/c/${chatId}`);
+    }
+
+    messageId = messageId ?? crypto.randomBytes(7).toString('hex');
+    const backendId = crypto.randomBytes(20).toString('hex');
+
+    const newMessage: Message = {
+      messageId,
+      chatId: chatId!,
+      backendId,
+      query: message,
+      responseBlocks: [],
+      status: 'answering',
+      createdAt: new Date(),
+    };
+
+    setMessages((prevMessages) => [...prevMessages, newMessage]);
 
     const messageIndex = messages.findIndex((m) => m.messageId === messageId);
 
@@ -722,7 +725,7 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
         },
         chatId: chatId!,
         files: fileIds,
-        focusMode: focusMode,
+        sources: sources,
         optimizationMode: optimizationMode,
         history: rewrite
           ? chatHistory.slice(0, messageIndex === -1 ? undefined : messageIndex)
@@ -746,6 +749,8 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
 
     let partialChunk = '';
 
+    const messageHandler = getMessageHandler(newMessage);
+
     while (true) {
       const { value, done } = await reader.read();
       if (done) break;
@@ -774,7 +779,7 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
         chatHistory,
         files,
         fileIds,
-        focusMode,
+        sources,
         chatId,
         hasError,
         isMessagesLoaded,
@@ -785,7 +790,7 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
         optimizationMode,
         setFileIds,
         setFiles,
-        setFocusMode,
+        setSources,
         setOptimizationMode,
         rewrite,
         sendMessage,

src/lib/models/base/llm.ts

@@ -1,3 +1,4 @@
+import z from 'zod';
 import {
   GenerateObjectInput,
   GenerateOptions,
@@ -8,15 +9,14 @@ import {
 
 abstract class BaseLLM<CONFIG> {
   constructor(protected config: CONFIG) {}
-  abstract withOptions(options: GenerateOptions): this;
   abstract generateText(input: GenerateTextInput): Promise<GenerateTextOutput>;
   abstract streamText(
     input: GenerateTextInput,
   ): AsyncGenerator<StreamTextOutput>;
-  abstract generateObject<T>(input: GenerateObjectInput): Promise<T>;
+  abstract generateObject<T>(input: GenerateObjectInput): Promise<z.infer<T>>;
   abstract streamObject<T>(
     input: GenerateObjectInput,
-  ): AsyncGenerator<Partial<T>>;
+  ): AsyncGenerator<Partial<z.infer<T>>>;
 }
 
 export default BaseLLM;

src/lib/models/providers/anthropic/anthropicLLM.ts

@@ -0,0 +1,5 @@
+import OpenAILLM from '../openai/openaiLLM';
+
+class AnthropicLLM extends OpenAILLM {}
+
+export default AnthropicLLM;

src/lib/models/providers/anthropic/index.ts

@@ -0,0 +1,115 @@
+import { UIConfigField } from '@/lib/config/types';
+import { getConfiguredModelProviderById } from '@/lib/config/serverRegistry';
+import { Model, ModelList, ProviderMetadata } from '../../types';
+import BaseEmbedding from '../../base/embedding';
+import BaseModelProvider from '../../base/provider';
+import BaseLLM from '../../base/llm';
+import AnthropicLLM from './anthropicLLM';
+
+interface AnthropicConfig {
+  apiKey: string;
+}
+
+const providerConfigFields: UIConfigField[] = [
+  {
+    type: 'password',
+    name: 'API Key',
+    key: 'apiKey',
+    description: 'Your Anthropic API key',
+    required: true,
+    placeholder: 'Anthropic API Key',
+    env: 'ANTHROPIC_API_KEY',
+    scope: 'server',
+  },
+];
+
+class AnthropicProvider extends BaseModelProvider<AnthropicConfig> {
+  constructor(id: string, name: string, config: AnthropicConfig) {
+    super(id, name, config);
+  }
+
+  async getDefaultModels(): Promise<ModelList> {
+    const res = await fetch('https://api.anthropic.com/v1/models?limit=999', {
+      method: 'GET',
+      headers: {
+        'x-api-key': this.config.apiKey,
+        'anthropic-version': '2023-06-01',
+        'Content-type': 'application/json',
+      },
+    });
+
+    if (!res.ok) {
+      throw new Error(`Failed to fetch Anthropic models: ${res.statusText}`);
+    }
+
+    const data = (await res.json()).data;
+
+    const models: Model[] = data.map((m: any) => {
+      return {
+        key: m.id,
+        name: m.display_name,
+      };
+    });
+
+    return {
+      embedding: [],
+      chat: models,
+    };
+  }
+
+  async getModelList(): Promise<ModelList> {
+    const defaultModels = await this.getDefaultModels();
+    const configProvider = getConfiguredModelProviderById(this.id)!;
+
+    return {
+      embedding: [],
+      chat: [...defaultModels.chat, ...configProvider.chatModels],
+    };
+  }
+
+  async loadChatModel(key: string): Promise<BaseLLM<any>> {
+    const modelList = await this.getModelList();
+
+    const exists = modelList.chat.find((m) => m.key === key);
+
+    if (!exists) {
+      throw new Error(
+        'Error Loading Anthropic Chat Model. Invalid Model Selected',
+      );
+    }
+
+    return new AnthropicLLM({
+      apiKey: this.config.apiKey,
+      model: key,
+      baseURL: 'https://api.anthropic.com/v1',
+    });
+  }
+
+  async loadEmbeddingModel(key: string): Promise<BaseEmbedding<any>> {
+    throw new Error('Anthropic provider does not support embedding models.');
+  }
+
+  static parseAndValidate(raw: any): AnthropicConfig {
+    if (!raw || typeof raw !== 'object')
+      throw new Error('Invalid config provided. Expected object');
+    if (!raw.apiKey)
+      throw new Error('Invalid config provided. API key must be provided');
+
+    return {
+      apiKey: String(raw.apiKey),
+    };
+  }
+
+  static getProviderConfigFields(): UIConfigField[] {
+    return providerConfigFields;
+  }
+
+  static getProviderMetadata(): ProviderMetadata {
+    return {
+      key: 'anthropic',
+      name: 'Anthropic',
+    };
+  }
+}
+
+export default AnthropicProvider;

src/lib/models/providers/gemini/geminiEmbedding.ts

@@ -0,0 +1,5 @@
+import OpenAIEmbedding from '../openai/openaiEmbedding';
+
+class GeminiEmbedding extends OpenAIEmbedding {}
+
+export default GeminiEmbedding;

src/lib/models/providers/gemini/geminiLLM.ts

@@ -0,0 +1,5 @@
+import OpenAILLM from '../openai/openaiLLM';
+
+class GeminiLLM extends OpenAILLM {}
+
+export default GeminiLLM;

src/lib/models/providers/gemini/index.ts

@@ -0,0 +1,144 @@
+import { UIConfigField } from '@/lib/config/types';
+import { getConfiguredModelProviderById } from '@/lib/config/serverRegistry';
+import { Model, ModelList, ProviderMetadata } from '../../types';
+import GeminiEmbedding from './geminiEmbedding';
+import BaseEmbedding from '../../base/embedding';
+import BaseModelProvider from '../../base/provider';
+import BaseLLM from '../../base/llm';
+import GeminiLLM from './geminiLLM';
+
+interface GeminiConfig {
+  apiKey: string;
+}
+
+const providerConfigFields: UIConfigField[] = [
+  {
+    type: 'password',
+    name: 'API Key',
+    key: 'apiKey',
+    description: 'Your Gemini API key',
+    required: true,
+    placeholder: 'Gemini API Key',
+    env: 'GEMINI_API_KEY',
+    scope: 'server',
+  },
+];
+
+class GeminiProvider extends BaseModelProvider<GeminiConfig> {
+  constructor(id: string, name: string, config: GeminiConfig) {
+    super(id, name, config);
+  }
+
+  async getDefaultModels(): Promise<ModelList> {
+    const res = await fetch(
+      `https://generativelanguage.googleapis.com/v1beta/models?key=${this.config.apiKey}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+
+    const data = await res.json();
+
+    let defaultEmbeddingModels: Model[] = [];
+    let defaultChatModels: Model[] = [];
+
+    data.models.forEach((m: any) => {
+      if (
+        m.supportedGenerationMethods.some(
+          (genMethod: string) =>
+            genMethod === 'embedText' || genMethod === 'embedContent',
+        )
+      ) {
+        defaultEmbeddingModels.push({
+          key: m.name,
+          name: m.displayName,
+        });
+      } else if (m.supportedGenerationMethods.includes('generateContent')) {
+        defaultChatModels.push({
+          key: m.name,
+          name: m.displayName,
+        });
+      }
+    });
+
+    return {
+      embedding: defaultEmbeddingModels,
+      chat: defaultChatModels,
+    };
+  }
+
+  async getModelList(): Promise<ModelList> {
+    const defaultModels = await this.getDefaultModels();
+    const configProvider = getConfiguredModelProviderById(this.id)!;
+
+    return {
+      embedding: [
+        ...defaultModels.embedding,
+        ...configProvider.embeddingModels,
+      ],
+      chat: [...defaultModels.chat, ...configProvider.chatModels],
+    };
+  }
+
+  async loadChatModel(key: string): Promise<BaseLLM<any>> {
+    const modelList = await this.getModelList();
+
+    const exists = modelList.chat.find((m) => m.key === key);
+
+    if (!exists) {
+      throw new Error(
+        'Error Loading Gemini Chat Model. Invalid Model Selected',
+      );
+    }
+
+    return new GeminiLLM({
+      apiKey: this.config.apiKey,
+      model: key,
+      baseURL: 'https://generativelanguage.googleapis.com/v1beta/openai',
+    });
+  }
+
+  async loadEmbeddingModel(key: string): Promise<BaseEmbedding<any>> {
+    const modelList = await this.getModelList();
+    const exists = modelList.embedding.find((m) => m.key === key);
+
+    if (!exists) {
+      throw new Error(
+        'Error Loading Gemini Embedding Model. Invalid Model Selected.',
+      );
+    }
+
+    return new GeminiEmbedding({
+      apiKey: this.config.apiKey,
+      model: key,
+      baseURL: 'https://generativelanguage.googleapis.com/v1beta/openai',
+    });
+  }
+
+  static parseAndValidate(raw: any): GeminiConfig {
+    if (!raw || typeof raw !== 'object')
+      throw new Error('Invalid config provided. Expected object');
+    if (!raw.apiKey)
+      throw new Error('Invalid config provided. API key must be provided');
+
+    return {
+      apiKey: String(raw.apiKey),
+    };
+  }
+
+  static getProviderConfigFields(): UIConfigField[] {
+    return providerConfigFields;
+  }
+
+  static getProviderMetadata(): ProviderMetadata {
+    return {
+      key: 'gemini',
+      name: 'Gemini',
+    };
+  }
+}
+
+export default GeminiProvider;

src/lib/models/providers/groq/groqLLM.ts

@@ -0,0 +1,5 @@
+import OpenAILLM from '../openai/openaiLLM';
+
+class GroqLLM extends OpenAILLM {}
+
+export default GroqLLM;

src/lib/models/providers/groq/index.ts

@@ -0,0 +1,113 @@
+import { UIConfigField } from '@/lib/config/types';
+import { getConfiguredModelProviderById } from '@/lib/config/serverRegistry';
+import { Model, ModelList, ProviderMetadata } from '../../types';
+import BaseEmbedding from '../../base/embedding';
+import BaseModelProvider from '../../base/provider';
+import BaseLLM from '../../base/llm';
+import GroqLLM from './groqLLM';
+
+interface GroqConfig {
+  apiKey: string;
+}
+
+const providerConfigFields: UIConfigField[] = [
+  {
+    type: 'password',
+    name: 'API Key',
+    key: 'apiKey',
+    description: 'Your Groq API key',
+    required: true,
+    placeholder: 'Groq API Key',
+    env: 'GROQ_API_KEY',
+    scope: 'server',
+  },
+];
+
+class GroqProvider extends BaseModelProvider<GroqConfig> {
+  constructor(id: string, name: string, config: GroqConfig) {
+    super(id, name, config);
+  }
+
+  async getDefaultModels(): Promise<ModelList> {
+    const res = await fetch(`https://api.groq.com/openai/v1/models`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.config.apiKey}`,
+      },
+    });
+
+    const data = await res.json();
+
+    const defaultChatModels: Model[] = [];
+
+    data.data.forEach((m: any) => {
+      defaultChatModels.push({
+        key: m.id,
+        name: m.id,
+      });
+    });
+
+    return {
+      embedding: [],
+      chat: defaultChatModels,
+    };
+  }
+
+  async getModelList(): Promise<ModelList> {
+    const defaultModels = await this.getDefaultModels();
+    const configProvider = getConfiguredModelProviderById(this.id)!;
+
+    return {
+      embedding: [
+        ...defaultModels.embedding,
+        ...configProvider.embeddingModels,
+      ],
+      chat: [...defaultModels.chat, ...configProvider.chatModels],
+    };
+  }
+
+  async loadChatModel(key: string): Promise<BaseLLM<any>> {
+    const modelList = await this.getModelList();
+
+    const exists = modelList.chat.find((m) => m.key === key);
+
+    if (!exists) {
+      throw new Error('Error Loading Groq Chat Model. Invalid Model Selected');
+    }
+
+    return new GroqLLM({
+      apiKey: this.config.apiKey,
+      model: key,
+      baseURL: 'https://api.groq.com/openai/v1',
+    });
+  }
+
+  async loadEmbeddingModel(key: string): Promise<BaseEmbedding<any>> {
+    throw new Error('Groq Provider does not support embedding models.');
+  }
+
+  static parseAndValidate(raw: any): GroqConfig {
+    if (!raw || typeof raw !== 'object')
+      throw new Error('Invalid config provided. Expected object');
+    if (!raw.apiKey)
+      throw new Error('Invalid config provided. API key must be provided');
+
+    return {
+      apiKey: String(raw.apiKey),
+    };
+  }
+
+  static getProviderConfigFields(): UIConfigField[] {
+    return providerConfigFields;
+  }
+
+  static getProviderMetadata(): ProviderMetadata {
+    return {
+      key: 'groq',
+      name: 'Groq',
+    };
+  }
+}
+
+export default GroqProvider;

src/lib/models/providers/index.ts

@@ -2,10 +2,20 @@ import { ModelProviderUISection } from '@/lib/config/types';
 import { ProviderConstructor } from '../base/provider';
 import OpenAIProvider from './openai';
 import OllamaProvider from './ollama';
+import GeminiProvider from './gemini';
+import TransformersProvider from './transformers';
+import GroqProvider from './groq';
+import LemonadeProvider from './lemonade';
+import AnthropicProvider from './anthropic';
 
 export const providers: Record<string, ProviderConstructor<any>> = {
   openai: OpenAIProvider,
   ollama: OllamaProvider,
+  gemini: GeminiProvider,
+  transformers: TransformersProvider,
+  groq: GroqProvider,
+  lemonade: LemonadeProvider,
+  anthropic: AnthropicProvider,
 };
 
 export const getModelProvidersUIConfigSection =

src/lib/models/providers/lemonade/index.ts

@@ -0,0 +1,153 @@
+import { UIConfigField } from '@/lib/config/types';
+import { getConfiguredModelProviderById } from '@/lib/config/serverRegistry';
+import BaseModelProvider from '../../base/provider';
+import { Model, ModelList, ProviderMetadata } from '../../types';
+import BaseLLM from '../../base/llm';
+import LemonadeLLM from './lemonadeLLM';
+import BaseEmbedding from '../../base/embedding';
+import LemonadeEmbedding from './lemonadeEmbedding';
+
+interface LemonadeConfig {
+  baseURL: string;
+  apiKey?: string;
+}
+
+const providerConfigFields: UIConfigField[] = [
+  {
+    type: 'string',
+    name: 'Base URL',
+    key: 'baseURL',
+    description: 'The base URL for Lemonade API',
+    required: true,
+    placeholder: 'https://api.lemonade.ai/v1',
+    env: 'LEMONADE_BASE_URL',
+    scope: 'server',
+  },
+  {
+    type: 'password',
+    name: 'API Key',
+    key: 'apiKey',
+    description: 'Your Lemonade API key (optional)',
+    required: false,
+    placeholder: 'Lemonade API Key',
+    env: 'LEMONADE_API_KEY',
+    scope: 'server',
+  },
+];
+
+class LemonadeProvider extends BaseModelProvider<LemonadeConfig> {
+  constructor(id: string, name: string, config: LemonadeConfig) {
+    super(id, name, config);
+  }
+
+  async getDefaultModels(): Promise<ModelList> {
+    try {
+      const res = await fetch(`${this.config.baseURL}/models`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(this.config.apiKey
+            ? { Authorization: `Bearer ${this.config.apiKey}` }
+            : {}),
+        },
+      });
+
+      const data = await res.json();
+
+      const models: Model[] = data.data
+        .filter((m: any) => m.recipe === 'llamacpp')
+        .map((m: any) => {
+          return {
+            name: m.id,
+            key: m.id,
+          };
+        });
+
+      return {
+        embedding: models,
+        chat: models,
+      };
+    } catch (err) {
+      if (err instanceof TypeError) {
+        throw new Error(
+          'Error connecting to Lemonade API. Please ensure the base URL is correct and the service is available.',
+        );
+      }
+
+      throw err;
+    }
+  }
+
+  async getModelList(): Promise<ModelList> {
+    const defaultModels = await this.getDefaultModels();
+    const configProvider = getConfiguredModelProviderById(this.id)!;
+
+    return {
+      embedding: [
+        ...defaultModels.embedding,
+        ...configProvider.embeddingModels,
+      ],
+      chat: [...defaultModels.chat, ...configProvider.chatModels],
+    };
+  }
+
+  async loadChatModel(key: string): Promise<BaseLLM<any>> {
+    const modelList = await this.getModelList();
+
+    const exists = modelList.chat.find((m) => m.key === key);
+
+    if (!exists) {
+      throw new Error(
+        'Error Loading Lemonade Chat Model. Invalid Model Selected',
+      );
+    }
+
+    return new LemonadeLLM({
+      apiKey: this.config.apiKey || 'not-needed',
+      model: key,
+      baseURL: this.config.baseURL,
+    });
+  }
+
+  async loadEmbeddingModel(key: string): Promise<BaseEmbedding<any>> {
+    const modelList = await this.getModelList();
+    const exists = modelList.embedding.find((m) => m.key === key);
+
+    if (!exists) {
+      throw new Error(
+        'Error Loading Lemonade Embedding Model. Invalid Model Selected.',
+      );
+    }
+
+    return new LemonadeEmbedding({
+      apiKey: this.config.apiKey || 'not-needed',
+      model: key,
+      baseURL: this.config.baseURL,
+    });
+  }
+
+  static parseAndValidate(raw: any): LemonadeConfig {
+    if (!raw || typeof raw !== 'object')
+      throw new Error('Invalid config provided. Expected object');
+    if (!raw.baseURL)
+      throw new Error('Invalid config provided. Base URL must be provided');
+
+    return {
+      baseURL: String(raw.baseURL),
+      apiKey: raw.apiKey ? String(raw.apiKey) : undefined,
+    };
+  }
+
+  static getProviderConfigFields(): UIConfigField[] {
+    return providerConfigFields;
+  }
+
+  static getProviderMetadata(): ProviderMetadata {
+    return {
+      key: 'lemonade',
+      name: 'Lemonade',
+    };
+  }
+}
+
+export default LemonadeProvider;

src/lib/models/providers/lemonade/lemonadeEmbedding.ts

@@ -0,0 +1,5 @@
+import OpenAIEmbedding from '../openai/openaiEmbedding';
+
+class LemonadeEmbedding extends OpenAIEmbedding {}
+
+export default LemonadeEmbedding;

src/lib/models/providers/lemonade/lemonadeLLM.ts

@@ -0,0 +1,5 @@
+import OpenAILLM from '../openai/openaiLLM';
+
+class LemonadeLLM extends OpenAILLM {}
+
+export default LemonadeLLM;

src/lib/models/providers/ollama/ollamaLLM.ts

@@ -7,8 +7,10 @@ import {
   GenerateTextOutput,
   StreamTextOutput,
 } from '../../types';
-import { Ollama } from 'ollama';
+import { Ollama, Tool as OllamaTool, Message as OllamaMessage } from 'ollama';
 import { parse } from 'partial-json';
+import crypto from 'crypto';
+import { Message } from '@/lib/types';
 
 type OllamaConfig = {
   baseURL: string;
@@ -16,6 +18,15 @@ type OllamaConfig = {
   options?: GenerateOptions;
 };
 
+const reasoningModels = [
+  'gpt-oss',
+  'deepseek-r1',
+  'qwen3',
+  'deepseek-v3.1',
+  'magistral',
+  'nemotron-3-nano',
+];
+
 class OllamaLLM extends BaseLLM<OllamaConfig> {
   ollamaClient: Ollama;
 
@@ -27,33 +38,79 @@ class OllamaLLM extends BaseLLM<OllamaConfig> {
     });
   }
 
-  withOptions(options: GenerateOptions) {
-    this.config.options = {
-      ...this.config.options,
-      ...options,
-    };
-    return this;
+  convertToOllamaMessages(messages: Message[]): OllamaMessage[] {
+    return messages.map((msg) => {
+      if (msg.role === 'tool') {
+        return {
+          role: 'tool',
+          tool_name: msg.name,
+          content: msg.content,
+        } as OllamaMessage;
+      } else if (msg.role === 'assistant') {
+        return {
+          role: 'assistant',
+          content: msg.content,
+          tool_calls:
+            msg.tool_calls?.map((tc, i) => ({
+              function: {
+                index: i,
+                name: tc.name,
+                arguments: tc.arguments,
+              },
+            })) || [],
+        };
+      }
+
+      return msg;
+    });
   }
 
   async generateText(input: GenerateTextInput): Promise<GenerateTextOutput> {
-    this.withOptions(input.options || {});
+    const ollamaTools: OllamaTool[] = [];
+
+    input.tools?.forEach((tool) => {
+      ollamaTools.push({
+        type: 'function',
+        function: {
+          name: tool.name,
+          description: tool.description,
+          parameters: z.toJSONSchema(tool.schema).properties,
+        },
+      });
+    });
 
     const res = await this.ollamaClient.chat({
       model: this.config.model,
-      messages: input.messages,
+      messages: this.convertToOllamaMessages(input.messages),
+      tools: ollamaTools.length > 0 ? ollamaTools : undefined,
+      ...(reasoningModels.find((m) => this.config.model.includes(m))
+        ? { think: false }
+        : {}),
       options: {
-        top_p: this.config.options?.topP,
-        temperature: this.config.options?.temperature,
-        num_predict: this.config.options?.maxTokens,
+        top_p: input.options?.topP ?? this.config.options?.topP,
+        temperature:
+          input.options?.temperature ?? this.config.options?.temperature ?? 0.7,
+        num_predict: input.options?.maxTokens ?? this.config.options?.maxTokens,
         num_ctx: 32000,
-        frequency_penalty: this.config.options?.frequencyPenalty,
-        presence_penalty: this.config.options?.presencePenalty,
-        stop: this.config.options?.stopSequences,
+        frequency_penalty:
+          input.options?.frequencyPenalty ??
+          this.config.options?.frequencyPenalty,
+        presence_penalty:
+          input.options?.presencePenalty ??
+          this.config.options?.presencePenalty,
+        stop:
+          input.options?.stopSequences ?? this.config.options?.stopSequences,
       },
     });
 
     return {
       content: res.message.content,
+      toolCalls:
+        res.message.tool_calls?.map((tc) => ({
+          id: crypto.randomUUID(),
+          name: tc.function.name,
+          arguments: tc.function.arguments,
+        })) || [],
       additionalInfo: {
         reasoning: res.message.thinking,
       },
@@ -63,26 +120,58 @@ class OllamaLLM extends BaseLLM<OllamaConfig> {
   async *streamText(
     input: GenerateTextInput,
   ): AsyncGenerator<StreamTextOutput> {
-    this.withOptions(input.options || {});
+    const ollamaTools: OllamaTool[] = [];
+
+    input.tools?.forEach((tool) => {
+      ollamaTools.push({
+        type: 'function',
+        function: {
+          name: tool.name,
+          description: tool.description,
+          parameters: z.toJSONSchema(tool.schema) as any,
+        },
+      });
+    });
 
     const stream = await this.ollamaClient.chat({
       model: this.config.model,
-      messages: input.messages,
+      messages: this.convertToOllamaMessages(input.messages),
       stream: true,
+      ...(reasoningModels.find((m) => this.config.model.includes(m))
+        ? { think: false }
+        : {}),
+      tools: ollamaTools.length > 0 ? ollamaTools : undefined,
       options: {
-        top_p: this.config.options?.topP,
-        temperature: this.config.options?.temperature,
+        top_p: input.options?.topP ?? this.config.options?.topP,
+        temperature:
+          input.options?.temperature ?? this.config.options?.temperature ?? 0.7,
         num_ctx: 32000,
-        num_predict: this.config.options?.maxTokens,
-        frequency_penalty: this.config.options?.frequencyPenalty,
-        presence_penalty: this.config.options?.presencePenalty,
-        stop: this.config.options?.stopSequences,
+        num_predict: input.options?.maxTokens ?? this.config.options?.maxTokens,
+        frequency_penalty:
+          input.options?.frequencyPenalty ??
+          this.config.options?.frequencyPenalty,
+        presence_penalty:
+          input.options?.presencePenalty ??
+          this.config.options?.presencePenalty,
+        stop:
+          input.options?.stopSequences ?? this.config.options?.stopSequences,
       },
     });
 
     for await (const chunk of stream) {
       yield {
         contentChunk: chunk.message.content,
+        toolCallChunk:
+          chunk.message.tool_calls?.map((tc, i) => ({
+            id: crypto
+              .createHash('sha256')
+              .update(
+                `${i}-${tc.function.name}`,
+              ) /* Ollama currently doesn't return a tool call ID so we're creating one based on the index and tool call name */
+              .digest('hex'),
+            name: tc.function.name,
+            arguments: tc.function.arguments,
+          })) || [],
         done: chunk.done,
         additionalInfo: {
           reasoning: chunk.message.thinking,
@@ -92,19 +181,26 @@ class OllamaLLM extends BaseLLM<OllamaConfig> {
   }
 
   async generateObject<T>(input: GenerateObjectInput): Promise<T> {
-    this.withOptions(input.options || {});
-
     const response = await this.ollamaClient.chat({
       model: this.config.model,
-      messages: input.messages,
+      messages: this.convertToOllamaMessages(input.messages),
       format: z.toJSONSchema(input.schema),
+      ...(reasoningModels.find((m) => this.config.model.includes(m))
+        ? { think: false }
+        : {}),
       options: {
-        top_p: this.config.options?.topP,
-        temperature: 0.7,
-        num_predict: this.config.options?.maxTokens,
-        frequency_penalty: this.config.options?.frequencyPenalty,
-        presence_penalty: this.config.options?.presencePenalty,
-        stop: this.config.options?.stopSequences,
+        top_p: input.options?.topP ?? this.config.options?.topP,
+        temperature:
+          input.options?.temperature ?? this.config.options?.temperature ?? 0.7,
+        num_predict: input.options?.maxTokens ?? this.config.options?.maxTokens,
+        frequency_penalty:
+          input.options?.frequencyPenalty ??
+          this.config.options?.frequencyPenalty,
+        presence_penalty:
+          input.options?.presencePenalty ??
+          this.config.options?.presencePenalty,
+        stop:
+          input.options?.stopSequences ?? this.config.options?.stopSequences,
       },
     });
 
@@ -118,20 +214,27 @@ class OllamaLLM extends BaseLLM<OllamaConfig> {
   async *streamObject<T>(input: GenerateObjectInput): AsyncGenerator<T> {
     let recievedObj: string = '';
 
-    this.withOptions(input.options || {});
-
     const stream = await this.ollamaClient.chat({
       model: this.config.model,
-      messages: input.messages,
+      messages: this.convertToOllamaMessages(input.messages),
       format: z.toJSONSchema(input.schema),
       stream: true,
+      ...(reasoningModels.find((m) => this.config.model.includes(m))
+        ? { think: false }
+        : {}),
       options: {
-        top_p: this.config.options?.topP,
-        temperature: 0.7,
-        num_predict: this.config.options?.maxTokens,
-        frequency_penalty: this.config.options?.frequencyPenalty,
-        presence_penalty: this.config.options?.presencePenalty,
-        stop: this.config.options?.stopSequences,
+        top_p: input.options?.topP ?? this.config.options?.topP,
+        temperature:
+          input.options?.temperature ?? this.config.options?.temperature ?? 0.7,
+        num_predict: input.options?.maxTokens ?? this.config.options?.maxTokens,
+        frequency_penalty:
+          input.options?.frequencyPenalty ??
+          this.config.options?.frequencyPenalty,
+        presence_penalty:
+          input.options?.presencePenalty ??
+          this.config.options?.presencePenalty,
+        stop:
+          input.options?.stopSequences ?? this.config.options?.stopSequences,
       },
     });
 

src/lib/models/providers/openai/openaiLLM.ts

@@ -7,8 +7,17 @@ import {
   GenerateTextInput,
   GenerateTextOutput,
   StreamTextOutput,
+  ToolCall,
 } from '../../types';
 import { parse } from 'partial-json';
+import z from 'zod';
+import {
+  ChatCompletionAssistantMessageParam,
+  ChatCompletionMessageParam,
+  ChatCompletionTool,
+  ChatCompletionToolMessageParam,
+} from 'openai/resources/index.mjs';
+import { Message } from '@/lib/types';
 
 type OpenAIConfig = {
   apiKey: string;
@@ -29,32 +38,82 @@ class OpenAILLM extends BaseLLM<OpenAIConfig> {
     });
   }
 
-  withOptions(options: GenerateOptions) {
-    this.config.options = {
-      ...this.config.options,
-      ...options,
-    };
+  convertToOpenAIMessages(messages: Message[]): ChatCompletionMessageParam[] {
+    return messages.map((msg) => {
+      if (msg.role === 'tool') {
+        return {
+          role: 'tool',
+          tool_call_id: msg.id,
+          content: msg.content,
+        } as ChatCompletionToolMessageParam;
+      } else if (msg.role === 'assistant') {
+        return {
+          role: 'assistant',
+          content: msg.content,
+          ...(msg.tool_calls &&
+            msg.tool_calls.length > 0 && {
+              tool_calls: msg.tool_calls?.map((tc) => ({
+                id: tc.id,
+                type: 'function',
+                function: {
+                  name: tc.name,
+                  arguments: JSON.stringify(tc.arguments),
+                },
+              })),
+            }),
+        } as ChatCompletionAssistantMessageParam;
+      }
 
-    return this;
+      return msg;
+    });
   }
 
   async generateText(input: GenerateTextInput): Promise<GenerateTextOutput> {
-    this.withOptions(input.options || {});
+    const openaiTools: ChatCompletionTool[] = [];
+
+    input.tools?.forEach((tool) => {
+      openaiTools.push({
+        type: 'function',
+        function: {
+          name: tool.name,
+          description: tool.description,
+          parameters: z.toJSONSchema(tool.schema),
+        },
+      });
+    });
 
     const response = await this.openAIClient.chat.completions.create({
       model: this.config.model,
-      messages: input.messages,
-      temperature: this.config.options?.temperature || 1.0,
-      top_p: this.config.options?.topP,
-      max_completion_tokens: this.config.options?.maxTokens,
-      stop: this.config.options?.stopSequences,
-      frequency_penalty: this.config.options?.frequencyPenalty,
-      presence_penalty: this.config.options?.presencePenalty,
+      tools: openaiTools.length > 0 ? openaiTools : undefined,
+      messages: this.convertToOpenAIMessages(input.messages),
+      temperature:
+        input.options?.temperature ?? this.config.options?.temperature ?? 1.0,
+      top_p: input.options?.topP ?? this.config.options?.topP,
+      max_completion_tokens:
+        input.options?.maxTokens ?? this.config.options?.maxTokens,
+      stop: input.options?.stopSequences ?? this.config.options?.stopSequences,
+      frequency_penalty:
+        input.options?.frequencyPenalty ??
+        this.config.options?.frequencyPenalty,
+      presence_penalty:
+        input.options?.presencePenalty ?? this.config.options?.presencePenalty,
     });
 
     if (response.choices && response.choices.length > 0) {
       return {
         content: response.choices[0].message.content!,
+        toolCalls:
+          response.choices[0].message.tool_calls
+            ?.map((tc) => {
+              if (tc.type === 'function') {
+                return {
+                  name: tc.function.name,
+                  id: tc.id,
+                  arguments: JSON.parse(tc.function.arguments),
+                };
+              }
+            })
+            .filter((tc) => tc !== undefined) || [],
         additionalInfo: {
           finishReason: response.choices[0].finish_reason,
         },
@@ -67,24 +126,64 @@ class OpenAILLM extends BaseLLM<OpenAIConfig> {
   async *streamText(
     input: GenerateTextInput,
   ): AsyncGenerator<StreamTextOutput> {
-    this.withOptions(input.options || {});
+    const openaiTools: ChatCompletionTool[] = [];
+
+    input.tools?.forEach((tool) => {
+      openaiTools.push({
+        type: 'function',
+        function: {
+          name: tool.name,
+          description: tool.description,
+          parameters: z.toJSONSchema(tool.schema),
+        },
+      });
+    });
 
     const stream = await this.openAIClient.chat.completions.create({
       model: this.config.model,
-      messages: input.messages,
-      temperature: this.config.options?.temperature || 1.0,
-      top_p: this.config.options?.topP,
-      max_completion_tokens: this.config.options?.maxTokens,
-      stop: this.config.options?.stopSequences,
-      frequency_penalty: this.config.options?.frequencyPenalty,
-      presence_penalty: this.config.options?.presencePenalty,
+      messages: this.convertToOpenAIMessages(input.messages),
+      tools: openaiTools.length > 0 ? openaiTools : undefined,
+      temperature:
+        input.options?.temperature ?? this.config.options?.temperature ?? 1.0,
+      top_p: input.options?.topP ?? this.config.options?.topP,
+      max_completion_tokens:
+        input.options?.maxTokens ?? this.config.options?.maxTokens,
+      stop: input.options?.stopSequences ?? this.config.options?.stopSequences,
+      frequency_penalty:
+        input.options?.frequencyPenalty ??
+        this.config.options?.frequencyPenalty,
+      presence_penalty:
+        input.options?.presencePenalty ?? this.config.options?.presencePenalty,
       stream: true,
     });
 
+    let recievedToolCalls: { name: string; id: string; arguments: string }[] =
+      [];
+
     for await (const chunk of stream) {
       if (chunk.choices && chunk.choices.length > 0) {
+        const toolCalls = chunk.choices[0].delta.tool_calls;
         yield {
           contentChunk: chunk.choices[0].delta.content || '',
+          toolCallChunk:
+            toolCalls?.map((tc) => {
+              if (tc.type === 'function') {
+                const call = {
+                  name: tc.function?.name!,
+                  id: tc.id!,
+                  arguments: tc.function?.arguments || '',
+                };
+                recievedToolCalls.push(call);
+                return { ...call, arguments: parse(call.arguments || '{}') };
+              } else {
+                const existingCall = recievedToolCalls[tc.index];
+                existingCall.arguments += tc.function?.arguments || '';
+                return {
+                  ...existingCall,
+                  arguments: parse(existingCall.arguments),
+                };
+              }
+            }) || [],
           done: chunk.choices[0].finish_reason !== null,
           additionalInfo: {
             finishReason: chunk.choices[0].finish_reason,
@@ -95,17 +194,20 @@ class OpenAILLM extends BaseLLM<OpenAIConfig> {
   }
 
   async generateObject<T>(input: GenerateObjectInput): Promise<T> {
-    this.withOptions(input.options || {});
-
     const response = await this.openAIClient.chat.completions.parse({
-      messages: input.messages,
+      messages: this.convertToOpenAIMessages(input.messages),
       model: this.config.model,
-      temperature: this.config.options?.temperature || 1.0,
-      top_p: this.config.options?.topP,
-      max_completion_tokens: this.config.options?.maxTokens,
-      stop: this.config.options?.stopSequences,
-      frequency_penalty: this.config.options?.frequencyPenalty,
-      presence_penalty: this.config.options?.presencePenalty,
+      temperature:
+        input.options?.temperature ?? this.config.options?.temperature ?? 1.0,
+      top_p: input.options?.topP ?? this.config.options?.topP,
+      max_completion_tokens:
+        input.options?.maxTokens ?? this.config.options?.maxTokens,
+      stop: input.options?.stopSequences ?? this.config.options?.stopSequences,
+      frequency_penalty:
+        input.options?.frequencyPenalty ??
+        this.config.options?.frequencyPenalty,
+      presence_penalty:
+        input.options?.presencePenalty ?? this.config.options?.presencePenalty,
       response_format: zodResponseFormat(input.schema, 'object'),
     });
 
@@ -123,17 +225,20 @@ class OpenAILLM extends BaseLLM<OpenAIConfig> {
   async *streamObject<T>(input: GenerateObjectInput): AsyncGenerator<T> {
     let recievedObj: string = '';
 
-    this.withOptions(input.options || {});
-
     const stream = this.openAIClient.responses.stream({
       model: this.config.model,
       input: input.messages,
-      temperature: this.config.options?.temperature || 1.0,
-      top_p: this.config.options?.topP,
-      max_completion_tokens: this.config.options?.maxTokens,
-      stop: this.config.options?.stopSequences,
-      frequency_penalty: this.config.options?.frequencyPenalty,
-      presence_penalty: this.config.options?.presencePenalty,
+      temperature:
+        input.options?.temperature ?? this.config.options?.temperature ?? 1.0,
+      top_p: input.options?.topP ?? this.config.options?.topP,
+      max_completion_tokens:
+        input.options?.maxTokens ?? this.config.options?.maxTokens,
+      stop: input.options?.stopSequences ?? this.config.options?.stopSequences,
+      frequency_penalty:
+        input.options?.frequencyPenalty ??
+        this.config.options?.frequencyPenalty,
+      presence_penalty:
+        input.options?.presencePenalty ?? this.config.options?.presencePenalty,
       text: {
         format: zodTextFormat(input.schema, 'object'),
       },

src/lib/models/providers/transformers/index.ts

@@ -0,0 +1,88 @@
+import { UIConfigField } from '@/lib/config/types';
+import { getConfiguredModelProviderById } from '@/lib/config/serverRegistry';
+import { Model, ModelList, ProviderMetadata } from '../../types';
+import BaseModelProvider from '../../base/provider';
+import BaseLLM from '../../base/llm';
+import BaseEmbedding from '../../base/embedding';
+import TransformerEmbedding from './transformerEmbedding';
+
+interface TransformersConfig {}
+
+const defaultEmbeddingModels: Model[] = [
+  {
+    name: 'all-MiniLM-L6-v2',
+    key: 'Xenova/all-MiniLM-L6-v2',
+  },
+  {
+    name: 'mxbai-embed-large-v1',
+    key: 'mixedbread-ai/mxbai-embed-large-v1',
+  },
+  {
+    name: 'nomic-embed-text-v1',
+    key: 'Xenova/nomic-embed-text-v1',
+  },
+];
+
+const providerConfigFields: UIConfigField[] = [];
+
+class TransformersProvider extends BaseModelProvider<TransformersConfig> {
+  constructor(id: string, name: string, config: TransformersConfig) {
+    super(id, name, config);
+  }
+
+  async getDefaultModels(): Promise<ModelList> {
+    return {
+      embedding: [...defaultEmbeddingModels],
+      chat: [],
+    };
+  }
+
+  async getModelList(): Promise<ModelList> {
+    const defaultModels = await this.getDefaultModels();
+    const configProvider = getConfiguredModelProviderById(this.id)!;
+
+    return {
+      embedding: [
+        ...defaultModels.embedding,
+        ...configProvider.embeddingModels,
+      ],
+      chat: [],
+    };
+  }
+
+  async loadChatModel(key: string): Promise<BaseLLM<any>> {
+    throw new Error('Transformers Provider does not support chat models.');
+  }
+
+  async loadEmbeddingModel(key: string): Promise<BaseEmbedding<any>> {
+    const modelList = await this.getModelList();
+    const exists = modelList.embedding.find((m) => m.key === key);
+
+    if (!exists) {
+      throw new Error(
+        'Error Loading OpenAI Embedding Model. Invalid Model Selected.',
+      );
+    }
+
+    return new TransformerEmbedding({
+      model: key,
+    });
+  }
+
+  static parseAndValidate(raw: any): TransformersConfig {
+    return {};
+  }
+
+  static getProviderConfigFields(): UIConfigField[] {
+    return providerConfigFields;
+  }
+
+  static getProviderMetadata(): ProviderMetadata {
+    return {
+      key: 'transformers',
+      name: 'Transformers',
+    };
+  }
+}
+
+export default TransformersProvider;

src/lib/models/providers/transformers/transformerEmbedding.ts

@@ -0,0 +1,43 @@
+import { Chunk } from '@/lib/types';
+import BaseEmbedding from '../../base/embedding';
+import { FeatureExtractionPipeline, pipeline } from '@huggingface/transformers';
+
+type TransformerConfig = {
+  model: string;
+};
+
+class TransformerEmbedding extends BaseEmbedding<TransformerConfig> {
+  private pipelinePromise: Promise<FeatureExtractionPipeline> | null = null;
+
+  constructor(protected config: TransformerConfig) {
+    super(config);
+  }
+
+  async embedText(texts: string[]): Promise<number[][]> {
+    return this.embed(texts);
+  }
+
+  async embedChunks(chunks: Chunk[]): Promise<number[][]> {
+    return this.embed(chunks.map((c) => c.content));
+  }
+
+  async embed(texts: string[]): Promise<number[][]> {
+    if (!this.pipelinePromise) {
+      this.pipelinePromise = (async () => {
+        const transformers = await import('@huggingface/transformers');
+        return (await transformers.pipeline(
+          'feature-extraction',
+          this.config.model,
+        )) as unknown as FeatureExtractionPipeline;
+      })();
+    }
+
+    const pipeline = await this.pipelinePromise;
+
+    const output = await pipeline(texts, { pooling: 'mean', normalize: true });
+
+    return output.tolist() as number[][];
+  }
+}
+
+export default TransformerEmbedding;