feat(app): add widgets

Merge master into canary

README.md

@@ -1,74 +1,76 @@
-# 🚀 Perplexica - An AI-powered search engine 🔎 <!-- omit in toc -->
-
-<div align="center" markdown="1">
-   <sup>Special thanks to:</sup>
-   <br>
-   <br>
-   <a href="https://www.warp.dev/perplexica">
-      <img alt="Warp sponsorship" width="400" src="https://github.com/user-attachments/assets/775dd593-9b5f-40f1-bf48-479faff4c27b">
-   </a>
-
-### [Warp, the AI Devtool that lives in your terminal](https://www.warp.dev/perplexica)
-
-[Available for MacOS, Linux, & Windows](https://www.warp.dev/perplexica)
-
-</div>
-
-<hr/>
+# Perplexica 🔍
 
+[![GitHub Repo stars](https://img.shields.io/github/stars/ItzCrazyKns/Perplexica?style=social)](https://github.com/ItzCrazyKns/Perplexica/stargazers)
+[![GitHub forks](https://img.shields.io/github/forks/ItzCrazyKns/Perplexica?style=social)](https://github.com/ItzCrazyKns/Perplexica/network/members)
+[![GitHub watchers](https://img.shields.io/github/watchers/ItzCrazyKns/Perplexica?style=social)](https://github.com/ItzCrazyKns/Perplexica/watchers)
+[![Docker Pulls](https://img.shields.io/docker/pulls/itzcrazykns1337/perplexica?color=blue)](https://hub.docker.com/r/itzcrazykns1337/perplexica)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/ItzCrazyKns/Perplexica/blob/master/LICENSE)
+[![GitHub last commit](https://img.shields.io/github/last-commit/ItzCrazyKns/Perplexica?color=green)](https://github.com/ItzCrazyKns/Perplexica/commits/master)
 [![Discord](https://dcbadge.limes.pink/api/server/26aArMy8tT?style=flat)](https://discord.gg/26aArMy8tT)
 
-![preview](.assets/perplexica-screenshot.png?)
+Perplexica is a **privacy-focused AI answering engine** that runs entirely on your own hardware. It combines knowledge from the vast internet with support for **local LLMs** (Ollama) and cloud providers (OpenAI, Claude, Groq), delivering accurate answers with **cited sources** while keeping your searches completely private.
 
-## Table of Contents <!-- omit in toc -->
-
-- [Overview](#overview)
-- [Preview](#preview)
-- [Features](#features)
-- [Installation](#installation)
-  - [Getting Started with Docker (Recommended)](#getting-started-with-docker-recommended)
-  - [Non-Docker Installation](#non-docker-installation)
-  - [Ollama Connection Errors](#ollama-connection-errors)
-  - [Lemonade Connection Errors](#lemonade-connection-errors)
-- [Using as a Search Engine](#using-as-a-search-engine)
-- [Using Perplexica's API](#using-perplexicas-api)
-- [Expose Perplexica to a network](#expose-perplexica-to-network)
-- [One-Click Deployment](#one-click-deployment)
-- [Upcoming Features](#upcoming-features)
-- [Support Us](#support-us)
-  - [Donations](#donations)
-- [Contribution](#contribution)
-- [Help and Support](#help-and-support)
-
-## Overview
-
-Perplexica is an open-source AI-powered searching tool or an AI-powered search engine that goes deep into the internet to find answers. Inspired by Perplexity AI, it's an open-source option that not just searches the web but understands your questions. It uses advanced machine learning algorithms like similarity searching and embeddings to refine results and provides clear answers with sources cited.
-
-Using SearxNG to stay current and fully open source, Perplexica ensures you always get the most up-to-date information without compromising your privacy.
+![preview](.assets/perplexica-screenshot.png)
 
 Want to know more about its architecture and how it works? You can read it [here](https://github.com/ItzCrazyKns/Perplexica/tree/master/docs/architecture/README.md).
 
-## Preview
+## ✨ Features
 
-![video-preview](.assets/perplexica-preview.gif)
+🤖 **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.
 
-## Features
+⚡ **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.
 
-- **Local LLMs**: You can utilize local LLMs such as Qwen, DeepSeek, Llama, and Mistral.
-- **Two Main Modes:**
-  - **Copilot Mode:** (In development) Boosts search by generating different queries to find more relevant internet sources. Like normal search instead of just using the context by SearxNG, it visits the top matches and tries to find relevant sources to the user's query directly from the page.
-  - **Normal Mode:** Processes your query and performs a web search.
-- **Focus Modes:** Special modes to better answer specific types of questions. Perplexica currently has 6 focus modes:
-  - **All Mode:** Searches the entire web to find the best results.
-  - **Writing Assistant Mode:** Helpful for writing tasks that do not require searching the web.
-  - **Academic Search Mode:** Finds articles and papers, ideal for academic research.
-  - **YouTube Search Mode:** Finds YouTube videos based on the search query.
-  - **Wolfram Alpha Search Mode:** Answers queries that need calculations or data analysis using Wolfram Alpha.
-  - **Reddit Search Mode:** Searches Reddit for discussions and opinions related to the query.
-- **Current Information:** Some search tools might give you outdated info because they use data from crawling bots and convert them into embeddings and store them in a index. Unlike them, Perplexica uses SearxNG, a metasearch engine to get the results and rerank and get the most relevant source out of it, ensuring you always get the latest information without the overhead of daily data updates.
-- **API**: Integrate Perplexica into your existing applications and make use of its capibilities.
+🎯 **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.
 
-It has many more features like image and video search. Some of the planned features are mentioned in [upcoming features](#upcoming-features).
+🔍 **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.
+
+📷 **Image and video search** - Find visual content alongside text results. Search isn't limited to just articles anymore.
+
+📄 **File uploads** - Upload documents and ask questions about them. PDFs, text files, images - Perplexica understands them all.
+
+🌐 **Search specific domains** - Limit your search to specific websites when you know where to look. Perfect for technical documentation or research papers.
+
+💡 **Smart suggestions** - Get intelligent search suggestions as you type, helping you formulate better queries.
+
+📚 **Discover** - Browse interesting articles and trending content throughout the day. Stay informed without even searching.
+
+🕒 **Search history** - Every search is saved locally so you can revisit your discoveries anytime. Your research is never lost.
+
+✨ **More coming soon** - We're actively developing new features based on community feedback. Join our Discord to help shape Perplexica's future!
+
+## Sponsors
+
+Perplexica's development is powered by the generous support of our sponsors. Their contributions help keep this project free, open-source, and accessible to everyone.
+
+<div align="center">
+  
+  
+<a href="https://www.warp.dev/perplexica">
+  <img alt="Warp Terminal" src=".assets/sponsers/warp.png" width="100%">
+</a>
+
+### **✨ [Try Warp - The AI-Powered Terminal →](https://www.warp.dev/perplexica)**
+
+Warp is revolutionizing development workflows with AI-powered features, modern UX, and blazing-fast performance. Used by developers at top companies worldwide.
+
+</div>
+
+---
+
+We'd also like to thank the following partners for their generous support:
+
+<table>
+  <tr>
+    <td>
+      <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;" />
+      </a>
+    </td>
+    <td>
+      <a href="https://dashboard.exa.ai">Exa</a> • The Perfect Web Search API for LLMs - web search, crawling, deep research, and answer APIs
+    </td>
+  </tr>
+</table>
 
 ## Installation
 
@@ -79,19 +81,19 @@ 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 -p 3000:3000 --name perplexica itzcrazykns1337/perplexica:latest
+docker run -d -p 3000:3000 -v perplexica-data:/home/perplexica/data -v perplexica-uploads:/home/perplexica/uploads --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.
 
-**Note**: The image includes both Perplexica and SearxNG, so no additional setup is required.
+**Note**: The image includes both Perplexica and SearxNG, so no additional setup is required. The `-v` flags create persistent volumes for your data and uploaded files.
 
 #### Using Perplexica with Your Own SearxNG Instance
 
 If you already have SearxNG running, you can use the slim version of Perplexica:
 
 ```bash
-docker run -p 3000:3000 -e SEARXNG_API_URL=http://your-searxng-url:8080 --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 -v perplexica-uploads:/home/perplexica/uploads --name perplexica itzcrazykns1337/perplexica:slim-latest
 ```
 
 **Important**: Make sure your SearxNG instance has:
@@ -118,7 +120,7 @@ If you prefer to build from source or need more control:
 
    ```bash
    docker build -t perplexica .
-   docker run -p 3000:3000 --name perplexica perplexica
+   docker run -d -p 3000:3000 -v perplexica-data:/home/perplexica/data -v perplexica-uploads:/home/perplexica/uploads --name perplexica perplexica
    ```
 
 5. Access Perplexica at http://localhost:3000 and configure your settings in the setup screen.

app.dockerfile

@@ -1,37 +0,0 @@
-FROM node:24.5.0-slim AS builder
-
-RUN apt-get update && apt-get install -y python3 python3-pip sqlite3 && rm -rf /var/lib/apt/lists/*
-
-WORKDIR /home/perplexica
-
-COPY package.json yarn.lock ./
-RUN yarn install --frozen-lockfile --network-timeout 600000
-
-COPY tsconfig.json next.config.mjs next-env.d.ts postcss.config.js drizzle.config.ts tailwind.config.ts ./
-COPY src ./src
-COPY public ./public
-COPY drizzle ./drizzle
-
-RUN mkdir -p /home/perplexica/data
-RUN yarn build
-
-FROM node:24.5.0-slim
-
-RUN apt-get update && apt-get install -y python3 python3-pip sqlite3 && rm -rf /var/lib/apt/lists/*
-
-WORKDIR /home/perplexica
-
-COPY --from=builder /home/perplexica/public ./public
-COPY --from=builder /home/perplexica/.next/static ./public/_next/static
-
-COPY --from=builder /home/perplexica/.next/standalone ./
-COPY --from=builder /home/perplexica/data ./data
-COPY drizzle ./drizzle
-
-RUN mkdir /home/perplexica/uploads
-
-COPY entrypoint.sh ./entrypoint.sh
-RUN chmod +x ./entrypoint.sh
-RUN sed -i 's/\r$//' ./entrypoint.sh || true
-
-CMD ["/home/perplexica/entrypoint.sh"]

docker-compose.yaml

@@ -0,0 +1,15 @@
+services:
+  perplexica:
+    image: itzcrazykns1337/perplexica:latest
+    ports:
+      - '3000:3000'
+    volumes:
+      - data:/home/perplexica/data
+      - uploads:/home/perplexica/uploads
+    restart: unless-stopped
+
+volumes:
+  data:
+    name: 'perplexica-data'
+  uploads:
+    name: 'perplexica-uploads'

docs/API/SEARCH.md

@@ -17,6 +17,7 @@ Before making search requests, you'll need to get the available providers and th
 Returns a list of all active providers with their available chat and embedding models.
 
 **Response Example:**
+
 ```json
 {
   "providers": [

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 -p 3000:3000 --name perplexica itzcrazykns1337/perplexica:latest
+docker run -d -p 3000:3000 -v perplexica-data:/home/perplexica/data -v perplexica-uploads:/home/perplexica/uploads --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 -p 3000:3000 -e SEARXNG_API_URL=http://your-searxng-url:8080 --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 -v perplexica-uploads:/home/perplexica/uploads --name perplexica itzcrazykns1337/perplexica:slim-latest
 ```
 
 Once updated, go to http://localhost:3000 and verify the latest changes. Your settings are preserved automatically.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "perplexica-frontend",
-  "version": "1.11.0",
+  "version": "1.11.2",
   "license": "MIT",
   "author": "ItzCrazyKns",
   "scripts": {
@@ -16,13 +16,14 @@
     "@huggingface/transformers": "^3.7.5",
     "@iarna/toml": "^2.2.5",
     "@icons-pack/react-simple-icons": "^12.3.0",
-    "@langchain/anthropic": "^1.0.0",
-    "@langchain/community": "^1.0.0",
-    "@langchain/core": "^1.0.1",
-    "@langchain/google-genai": "^1.0.0",
-    "@langchain/groq": "^1.0.0",
-    "@langchain/ollama": "^1.0.0",
-    "@langchain/openai": "^1.0.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",
     "@tailwindcss/typography": "^0.5.12",
     "axios": "^1.8.3",
@@ -33,7 +34,7 @@
     "framer-motion": "^12.23.24",
     "html-to-text": "^9.0.5",
     "jspdf": "^3.0.1",
-    "langchain": "^1.0.1",
+    "langchain": "^1.0.4",
     "lucide-react": "^0.363.0",
     "mammoth": "^1.9.1",
     "markdown-to-jsx": "^7.7.2",
@@ -48,7 +49,7 @@
     "tailwind-merge": "^2.2.2",
     "winston": "^3.17.0",
     "yet-another-react-lightbox": "^3.17.2",
-    "zod": "^3.22.4"
+    "zod": "^4.1.12"
   },
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.12",

src/app/api/images/route.ts

@@ -1,4 +1,4 @@
-import handleImageSearch from '@/lib/chains/imageSearchAgent';
+import searchImages from '@/lib/agents/media/image';
 import ModelRegistry from '@/lib/models/registry';
 import { ModelWithProvider } from '@/lib/models/types';
 import { AIMessage, BaseMessage, HumanMessage } from '@langchain/core/messages';
@@ -13,6 +13,13 @@ export const POST = async (req: Request) => {
   try {
     const body: ImageSearchBody = await req.json();
 
+    const registry = new ModelRegistry();
+
+    const llm = await registry.loadChatModel(
+      body.chatModel.providerId,
+      body.chatModel.key,
+    );
+
     const chatHistory = body.chatHistory
       .map((msg: any) => {
         if (msg.role === 'user') {
@@ -23,16 +30,9 @@ export const POST = async (req: Request) => {
       })
       .filter((msg) => msg !== undefined) as BaseMessage[];
 
-    const registry = new ModelRegistry();
-
-    const llm = await registry.loadChatModel(
-      body.chatModel.providerId,
-      body.chatModel.key,
-    );
-
-    const images = await handleImageSearch(
+    const images = await searchImages(
       {
-        chat_history: chatHistory,
+        chatHistory: chatHistory,
         query: body.query,
       },
       llm,

src/app/api/search/route.ts

@@ -30,12 +30,6 @@ export const POST = async (req: Request) => {
     body.optimizationMode = body.optimizationMode || 'balanced';
     body.stream = body.stream || false;
 
-    const history: BaseMessage[] = body.history.map((msg) => {
-      return msg[0] === 'human'
-        ? new HumanMessage({ content: msg[1] })
-        : new AIMessage({ content: msg[1] });
-    });
-
     const registry = new ModelRegistry();
 
     const [llm, embeddings] = await Promise.all([
@@ -46,6 +40,12 @@ export const POST = async (req: Request) => {
       ),
     ]);
 
+    const history: BaseMessage[] = body.history.map((msg) => {
+      return msg[0] === 'human'
+        ? new HumanMessage({ content: msg[1] })
+        : new AIMessage({ content: msg[1] });
+    });
+
     const searchHandler: MetaSearchAgentType = searchHandlers[body.focusMode];
 
     if (!searchHandler) {

src/app/api/suggestions/route.ts

@@ -1,7 +1,6 @@
-import generateSuggestions from '@/lib/chains/suggestionGeneratorAgent';
+import generateSuggestions from '@/lib/agents/suggestions';
 import ModelRegistry from '@/lib/models/registry';
 import { ModelWithProvider } from '@/lib/models/types';
-import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import { AIMessage, BaseMessage, HumanMessage } from '@langchain/core/messages';
 
 interface SuggestionsGenerationBody {
@@ -13,6 +12,13 @@ export const POST = async (req: Request) => {
   try {
     const body: SuggestionsGenerationBody = await req.json();
 
+    const registry = new ModelRegistry();
+
+    const llm = await registry.loadChatModel(
+      body.chatModel.providerId,
+      body.chatModel.key,
+    );
+
     const chatHistory = body.chatHistory
       .map((msg: any) => {
         if (msg.role === 'user') {
@@ -23,16 +29,9 @@ export const POST = async (req: Request) => {
       })
       .filter((msg) => msg !== undefined) as BaseMessage[];
 
-    const registry = new ModelRegistry();
-
-    const llm = await registry.loadChatModel(
-      body.chatModel.providerId,
-      body.chatModel.key,
-    );
-
     const suggestions = await generateSuggestions(
       {
-        chat_history: chatHistory,
+        chatHistory,
       },
       llm,
     );

src/app/api/videos/route.ts

@@ -1,4 +1,4 @@
-import handleVideoSearch from '@/lib/chains/videoSearchAgent';
+import handleVideoSearch from '@/lib/agents/media/video';
 import ModelRegistry from '@/lib/models/registry';
 import { ModelWithProvider } from '@/lib/models/types';
 import { AIMessage, BaseMessage, HumanMessage } from '@langchain/core/messages';
@@ -13,6 +13,13 @@ export const POST = async (req: Request) => {
   try {
     const body: VideoSearchBody = await req.json();
 
+    const registry = new ModelRegistry();
+
+    const llm = await registry.loadChatModel(
+      body.chatModel.providerId,
+      body.chatModel.key,
+    );
+
     const chatHistory = body.chatHistory
       .map((msg: any) => {
         if (msg.role === 'user') {
@@ -23,16 +30,9 @@ export const POST = async (req: Request) => {
       })
       .filter((msg) => msg !== undefined) as BaseMessage[];
 
-    const registry = new ModelRegistry();
-
-    const llm = await registry.loadChatModel(
-      body.chatModel.providerId,
-      body.chatModel.key,
-    );
-
     const videos = await handleVideoSearch(
       {
-        chat_history: chatHistory,
+        chatHistory: chatHistory,
         query: body.query,
       },
       llm,

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

@@ -1,17 +1,10 @@
 'use client';
 
 import ChatWindow from '@/components/ChatWindow';
-import { useParams } from 'next/navigation';
 import React from 'react';
-import { ChatProvider } from '@/lib/hooks/useChat';
 
 const Page = () => {
-  const { chatId }: { chatId: string } = useParams();
-  return (
-    <ChatProvider id={chatId}>
-      <ChatWindow />
-    </ChatProvider>
-  );
+  return <ChatWindow />;
 };
 
 export default Page;

src/app/layout.tsx

@@ -9,6 +9,7 @@ import { Toaster } from 'sonner';
 import ThemeProvider from '@/components/theme/Provider';
 import configManager from '@/lib/config';
 import SetupWizard from '@/components/Setup/SetupWizard';
+import { ChatProvider } from '@/lib/hooks/useChat';
 
 const montserrat = Montserrat({
   weight: ['300', '400', '500', '700'],
@@ -36,7 +37,7 @@ export default function RootLayout({
       <body className={cn('h-full', montserrat.className)}>
         <ThemeProvider>
           {setupComplete ? (
-            <>
+            <ChatProvider>
               <Sidebar>{children}</Sidebar>
               <Toaster
                 toastOptions={{
@@ -47,7 +48,7 @@ export default function RootLayout({
                   },
                 }}
               />
-            </>
+            </ChatProvider>
           ) : (
             <SetupWizard configSections={configSections} />
           )}

src/app/page.tsx

@@ -1,7 +1,5 @@
 import ChatWindow from '@/components/ChatWindow';
-import { ChatProvider } from '@/lib/hooks/useChat';
 import { Metadata } from 'next';
-import { Suspense } from 'react';
 
 export const metadata: Metadata = {
   title: 'Chat - Perplexica',
@@ -9,15 +7,7 @@ export const metadata: Metadata = {
 };
 
 const Home = () => {
-  return (
-    <div>
-      <Suspense>
-        <ChatProvider>
-          <ChatWindow />
-        </ChatProvider>
-      </Suspense>
-    </div>
-  );
+  return <ChatWindow />;
 };
 
 export default Home;

src/components/ChatWindow.tsx

@@ -8,7 +8,7 @@ import { Settings } from 'lucide-react';
 import Link from 'next/link';
 import NextError from 'next/error';
 import { useChat } from '@/lib/hooks/useChat';
-import Loader from './ui/Loader';
+import SettingsButtonMobile from './Settings/SettingsButtonMobile';
 
 export interface BaseMessage {
   chatId: string;
@@ -51,14 +51,12 @@ export interface File {
 }
 
 const ChatWindow = () => {
-  const { hasError, isReady, notFound, messages } = useChat();
+  const { hasError, notFound, messages } = useChat();
   if (hasError) {
     return (
       <div className="relative">
         <div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
-          <Link href="/settings">
-            <Settings className="cursor-pointer lg:hidden" />
-          </Link>
+          <SettingsButtonMobile />
         </div>
         <div className="flex flex-col items-center justify-center min-h-screen">
           <p className="dark:text-white/70 text-black/70 text-sm">
@@ -69,8 +67,7 @@ const ChatWindow = () => {
     );
   }
 
-  return isReady ? (
-    notFound ? (
+  return notFound ? (
     <NextError statusCode={404} />
   ) : (
     <div>
@@ -83,11 +80,6 @@ const ChatWindow = () => {
         <EmptyChat />
       )}
     </div>
-    )
-  ) : (
-    <div className="flex flex-row items-center justify-center min-h-screen">
-      <Loader />
-    </div>
   );
 };
 

src/components/MessageActions/Copy.tsx

@@ -20,9 +20,9 @@ const Copy = ({
         setCopied(true);
         setTimeout(() => setCopied(false), 1000);
       }}
-      className="p-2 text-black/70 dark:text-white/70 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white"
+      className="p-2 text-black/70 dark:text-white/70 rounded-full hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white"
     >
-      {copied ? <Check size={18} /> : <ClipboardList size={18} />}
+      {copied ? <Check size={16} /> : <ClipboardList size={16} />}
     </button>
   );
 };

src/components/MessageActions/Rewrite.tsx

@@ -1,4 +1,4 @@
-import { ArrowLeftRight } from 'lucide-react';
+import { ArrowLeftRight, Repeat } from 'lucide-react';
 
 const Rewrite = ({
   rewrite,
@@ -10,12 +10,11 @@ const Rewrite = ({
   return (
     <button
       onClick={() => rewrite(messageId)}
-      className="py-2 px-3 text-black/70 dark:text-white/70 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white flex flex-row items-center space-x-1"
+      className="p-2 text-black/70 dark:text-white/70 rounded-full hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white flex flex-row items-center space-x-1"
     >
-      <ArrowLeftRight size={18} />
-      <p className="text-xs font-medium">Rewrite</p>
+      <Repeat size={16} />
     </button>
   );
 };
-
+1;
 export default Rewrite;

src/components/MessageBox.tsx

@@ -10,6 +10,7 @@ import {
   StopCircle,
   Layers3,
   Plus,
+  CornerDownRight,
 } from 'lucide-react';
 import Markdown, { MarkdownToJSX } from 'markdown-to-jsx';
 import Copy from './MessageActions/Copy';
@@ -122,14 +123,14 @@ const MessageBox = ({
                 </Markdown>
 
                 {loading && isLast ? null : (
-                  <div className="flex flex-row items-center justify-between w-full text-black dark:text-white py-4 -mx-2">
-                    <div className="flex flex-row items-center space-x-1">
+                  <div className="flex flex-row items-center justify-between w-full text-black dark:text-white py-4">
+                    <div className="flex flex-row items-center -ml-2">
                       <Rewrite
                         rewrite={rewrite}
                         messageId={section.assistantMessage.messageId}
                       />
                     </div>
-                    <div className="flex flex-row items-center space-x-1">
+                    <div className="flex flex-row items-center -mr-2">
                       <Copy
                         initialMessage={section.assistantMessage.content}
                         section={section}
@@ -142,12 +143,12 @@ const MessageBox = ({
                             start();
                           }
                         }}
-                        className="p-2 text-black/70 dark:text-white/70 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white"
+                        className="p-2 text-black/70 dark:text-white/70 rounded-full hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white"
                       >
                         {speechStatus === 'started' ? (
-                          <StopCircle size={18} />
+                          <StopCircle size={16} />
                         ) : (
-                          <Volume2 size={18} />
+                          <Volume2 size={16} />
                         )}
                       </button>
                     </div>
@@ -159,7 +160,7 @@ const MessageBox = ({
                   section.suggestions.length > 0 &&
                   section.assistantMessage &&
                   !loading && (
-                    <div className="mt-8 pt-6 border-t border-light-200/50 dark:border-dark-200/50">
+                    <div className="mt-6">
                       <div className="flex flex-row items-center space-x-2 mb-4">
                         <Layers3
                           className="text-black dark:text-white"
@@ -173,20 +174,24 @@ const MessageBox = ({
                         {section.suggestions.map(
                           (suggestion: string, i: number) => (
                             <div key={i}>
-                              {i > 0 && (
-                                <div className="h-px bg-light-200/40 dark:bg-dark-200/40 mx-3" />
-                              )}
+                              <div className="h-px bg-light-200/40 dark:bg-dark-200/40" />
                               <button
                                 onClick={() => sendMessage(suggestion)}
-                                className="group w-full px-3 py-4 text-left transition-colors duration-200"
+                                className="group w-full py-4 text-left transition-colors duration-200"
                               >
                                 <div className="flex items-center justify-between gap-3">
-                                  <p className="text-sm text-black/70 dark:text-white/70 group-hover:text-[#24A0ED] transition-colors duration-200 leading-relaxed">
+                                  <div className="flex flex-row space-x-3 items-center ">
+                                    <CornerDownRight
+                                      size={17}
+                                      className="group-hover:text-sky-400 transition-colors duration-200"
+                                    />
+                                    <p className="text-sm text-black/70 dark:text-white/70 group-hover:text-sky-400 transition-colors duration-200 leading-relaxed">
                                       {suggestion}
                                     </p>
+                                  </div>
                                   <Plus
                                     size={16}
-                                    className="text-black/40 dark:text-white/40 group-hover:text-[#24A0ED] transition-colors duration-200 flex-shrink-0"
+                                    className="text-black/40 dark:text-white/40 group-hover:text-sky-400 transition-colors duration-200 flex-shrink-0"
                                   />
                                 </div>
                               </button>
@@ -205,11 +210,11 @@ const MessageBox = ({
           <div className="lg:sticky lg:top-20 flex flex-col items-center space-y-3 w-full lg:w-3/12 z-30 h-full pb-4">
             <SearchImages
               query={section.userMessage.content}
-              chatHistory={chatTurns.slice(0, sectionIndex * 2)}
+              chatHistory={chatTurns}
               messageId={section.assistantMessage.messageId}
             />
             <SearchVideos
-              chatHistory={chatTurns.slice(0, sectionIndex * 2)}
+              chatHistory={chatTurns}
               query={section.userMessage.content}
               messageId={section.assistantMessage.messageId}
             />

src/components/MessageInputActions/ChatModelSelector.tsx

@@ -8,17 +8,16 @@ import {
   PopoverPanel,
   Transition,
 } from '@headlessui/react';
-import { Fragment, useEffect, useState } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
 import { MinimalProvider } from '@/lib/models/types';
+import { useChat } from '@/lib/hooks/useChat';
 
 const ModelSelector = () => {
   const [providers, setProviders] = useState<MinimalProvider[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
-  const [selectedModel, setSelectedModel] = useState<{
-    providerId: string;
-    modelKey: string;
-  } | null>(null);
+
+  const { setChatModelProvider, chatModelProvider } = useChat();
 
   useEffect(() => {
     const loadProviders = async () => {
@@ -30,28 +29,8 @@ const ModelSelector = () => {
           throw new Error('Failed to fetch providers');
         }
 
-        const data = await res.json();
-        setProviders(data.providers || []);
-
-        const savedProviderId = localStorage.getItem('chatModelProviderId');
-        const savedModelKey = localStorage.getItem('chatModelKey');
-
-        if (savedProviderId && savedModelKey) {
-          setSelectedModel({
-            providerId: savedProviderId,
-            modelKey: savedModelKey,
-          });
-        } else if (data.providers && data.providers.length > 0) {
-          const firstProvider = data.providers.find(
-            (p: MinimalProvider) => p.chatModels.length > 0,
-          );
-          if (firstProvider && firstProvider.chatModels[0]) {
-            setSelectedModel({
-              providerId: firstProvider.id,
-              modelKey: firstProvider.chatModels[0].key,
-            });
-          }
-        }
+        const data: { providers: MinimalProvider[] } = await res.json();
+        setProviders(data.providers);
       } catch (error) {
         console.error('Error loading providers:', error);
       } finally {
@@ -62,13 +41,32 @@ const ModelSelector = () => {
     loadProviders();
   }, []);
 
+  const orderedProviders = useMemo(() => {
+    if (!chatModelProvider?.providerId) return providers;
+
+    const currentProviderIndex = providers.findIndex(
+      (p) => p.id === chatModelProvider.providerId,
+    );
+
+    if (currentProviderIndex === -1) {
+      return providers;
+    }
+
+    const selectedProvider = providers[currentProviderIndex];
+    const remainingProviders = providers.filter(
+      (_, index) => index !== currentProviderIndex,
+    );
+
+    return [selectedProvider, ...remainingProviders];
+  }, [providers, chatModelProvider]);
+
   const handleModelSelect = (providerId: string, modelKey: string) => {
-    setSelectedModel({ providerId, modelKey });
+    setChatModelProvider({ providerId, key: modelKey });
     localStorage.setItem('chatModelProviderId', providerId);
     localStorage.setItem('chatModelKey', modelKey);
   };
 
-  const filteredProviders = providers
+  const filteredProviders = orderedProviders
     .map((provider) => ({
       ...provider,
       chatModels: provider.chatModels.filter(
@@ -140,15 +138,16 @@ const ModelSelector = () => {
 
                       <div className="flex flex-col px-2 py-2 space-y-0.5">
                         {provider.chatModels.map((model) => (
-                          <PopoverButton
+                          <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',
-                              selectedModel?.providerId === provider.id &&
-                                selectedModel?.modelKey === model.key
+                              chatModelProvider?.providerId === provider.id &&
+                                chatModelProvider?.key === model.key
                                 ? 'bg-light-secondary dark:bg-dark-secondary'
                                 : 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
                             )}
@@ -158,8 +157,9 @@ const ModelSelector = () => {
                                 size={15}
                                 className={cn(
                                   'shrink-0',
-                                  selectedModel?.providerId === provider.id &&
-                                    selectedModel?.modelKey === model.key
+                                  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',
                                 )}
@@ -167,8 +167,9 @@ const ModelSelector = () => {
                               <p
                                 className={cn(
                                   'text-sm truncate',
-                                  selectedModel?.providerId === provider.id &&
-                                    selectedModel?.modelKey === model.key
+                                  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',
                                 )}
@@ -176,7 +177,7 @@ const ModelSelector = () => {
                                 {model.name}
                               </p>
                             </div>
-                          </PopoverButton>
+                          </button>
                         ))}
                       </div>
 

src/components/Settings/Sections/Models/AddModelDialog.tsx

@@ -97,7 +97,7 @@ const AddModel = ({
             >
               <DialogPanel className="w-full mx-4 lg:w-[600px] max-h-[85vh] flex flex-col border bg-light-primary dark:bg-dark-primary border-light-secondary dark:border-dark-secondary rounded-lg">
                 <div className="px-6 pt-6 pb-4">
-                  <h3 className="text-black/90 dark:text-white/90 font-medium">
+                  <h3 className="text-black/90 dark:text-white/90 font-medium text-sm">
                     Add new {type === 'chat' ? 'chat' : 'embedding'} model
                   </h3>
                 </div>
@@ -115,7 +115,7 @@ const AddModel = ({
                         <input
                           value={modelName}
                           onChange={(e) => setModelName(e.target.value)}
-                          className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-4 py-3 text-sm text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+                          className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-4 py-3 text-[13px] text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
                           placeholder="e.g., GPT-4"
                           type="text"
                           required
@@ -128,7 +128,7 @@ const AddModel = ({
                         <input
                           value={modelKey}
                           onChange={(e) => setModelKey(e.target.value)}
-                          className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-4 py-3 text-sm text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+                          className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-4 py-3 text-[13px] text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
                           placeholder="e.g., gpt-4"
                           type="text"
                           required
@@ -140,7 +140,7 @@ const AddModel = ({
                       <button
                         type="submit"
                         disabled={loading}
-                        className="px-4 py-2 rounded-lg text-sm bg-sky-500 text-white font-medium disabled:opacity-85 hover:opacity-85 active:scale-95 transition duration-200"
+                        className="px-4 py-2 rounded-lg text-[13px] bg-sky-500 text-white font-medium disabled:opacity-85 hover:opacity-85 active:scale-95 transition duration-200"
                       >
                         {loading ? (
                           <Loader2 className="animate-spin" size={16} />

src/components/Settings/Sections/Models/AddProviderDialog.tsx

@@ -82,10 +82,10 @@ const AddProvider = ({
 
       setProviders((prev) => [...prev, data]);
 
-      toast.success('Provider added successfully.');
+      toast.success('Connection added successfully.');
     } catch (error) {
       console.error('Error adding provider:', error);
-      toast.error('Failed to add provider.');
+      toast.error('Failed to add connection.');
     } finally {
       setLoading(false);
       setOpen(false);
@@ -96,10 +96,10 @@ const AddProvider = ({
     <>
       <button
         onClick={() => setOpen(true)}
-        className="px-3 md:px-4 py-1.5 md:py-2 rounded-lg text-xs sm:text-sm border border-light-200 dark:border-dark-200 text-black dark:text-white bg-light-secondary/50 dark:bg-dark-secondary/50 hover:bg-light-secondary hover:dark:bg-dark-secondary hover:border-light-300 hover:dark:border-dark-300 flex flex-row items-center space-x-1 active:scale-95 transition duration-200"
+        className="px-3 md:px-4 py-1.5 md:py-2 rounded-lg text-xs sm:text-xs border border-light-200 dark:border-dark-200 text-black dark:text-white bg-light-secondary/50 dark:bg-dark-secondary/50 hover:bg-light-secondary hover:dark:bg-dark-secondary hover:border-light-300 hover:dark:border-dark-300 flex flex-row items-center space-x-1 active:scale-95 transition duration-200"
       >
         <Plus className="w-3.5 h-3.5 md:w-4 md:h-4" />
-        <span>Add Provider</span>
+        <span>Add Connection</span>
       </button>
       <AnimatePresence>
         {open && (
@@ -119,8 +119,8 @@ const AddProvider = ({
               <DialogPanel className="w-full mx-4 lg:w-[600px] max-h-[85vh] flex flex-col border bg-light-primary dark:bg-dark-primary border-light-secondary dark:border-dark-secondary rounded-lg">
                 <form onSubmit={handleSubmit} className="flex flex-col flex-1">
                   <div className="px-6 pt-6 pb-4">
-                    <h3 className="text-black/90 dark:text-white/90 font-medium">
-                      Add new provider
+                    <h3 className="text-black/90 dark:text-white/90 font-medium text-sm">
+                      Add new connection
                     </h3>
                   </div>
                   <div className="border-t border-light-200 dark:border-dark-200" />
@@ -128,7 +128,7 @@ const AddProvider = ({
                     <div className="flex flex-col space-y-4">
                       <div className="flex flex-col items-start space-y-2">
                         <label className="text-xs text-black/70 dark:text-white/70">
-                          Select provider type
+                          Select connection type
                         </label>
                         <Select
                           value={selectedProvider ?? ''}
@@ -149,13 +149,13 @@ const AddProvider = ({
                         className="flex flex-col items-start space-y-2"
                       >
                         <label className="text-xs text-black/70 dark:text-white/70">
-                          Name*
+                          Connection Name*
                         </label>
                         <input
                           value={name}
                           onChange={(e) => setName(e.target.value)}
                           className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-4 py-3 pr-10 text-sm text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
-                          placeholder={'Provider Name'}
+                          placeholder={'e.g., My OpenAI Connection'}
                           type="text"
                           required={true}
                         />
@@ -178,7 +178,7 @@ const AddProvider = ({
                                 [field.key]: event.target.value,
                               }))
                             }
-                            className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-4 py-3 pr-10 text-sm text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+                            className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-4 py-3 pr-10 text-[13px] text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
                             placeholder={
                               (field as StringUIConfigField).placeholder
                             }
@@ -194,12 +194,12 @@ const AddProvider = ({
                     <button
                       type="submit"
                       disabled={loading}
-                      className="px-4 py-2 rounded-lg text-sm bg-sky-500 text-white font-medium disabled:opacity-85 hover:opacity-85 active:scale-95 transition duration-200"
+                      className="px-4 py-2 rounded-lg text-[13px] bg-sky-500 text-white font-medium disabled:opacity-85 hover:opacity-85 active:scale-95 transition duration-200"
                     >
                       {loading ? (
                         <Loader2 className="animate-spin" size={16} />
                       ) : (
-                        'Add Provider'
+                        'Add Connection'
                       )}
                     </button>
                   </div>

src/components/Settings/Sections/Models/DeleteProviderDialog.tsx

@@ -34,10 +34,10 @@ const DeleteProvider = ({
         return prev.filter((p) => p.id !== modelProvider.id);
       });
 
-      toast.success('Provider deleted successfully.');
+      toast.success('Connection deleted successfully.');
     } catch (error) {
       console.error('Error deleting provider:', error);
-      toast.error('Failed to delete provider.');
+      toast.error('Failed to delete connection.');
     } finally {
       setLoading(false);
     }
@@ -51,7 +51,7 @@ const DeleteProvider = ({
           setOpen(true);
         }}
         className="group p-1.5 rounded-md hover:bg-light-200 hover:dark:bg-dark-200 transition-colors group"
-        title="Delete provider"
+        title="Delete connection"
       >
         <Trash2
           size={14}
@@ -76,14 +76,15 @@ const DeleteProvider = ({
               <DialogPanel className="w-full mx-4 lg:w-[600px] max-h-[85vh] flex flex-col border bg-light-primary dark:bg-dark-primary border-light-secondary dark:border-dark-secondary rounded-lg">
                 <div className="px-6 pt-6 pb-4">
                   <h3 className="text-black/90 dark:text-white/90 font-medium">
-                    Delete provider
+                    Delete connection
                   </h3>
                 </div>
                 <div className="border-t border-light-200 dark:border-dark-200" />
                 <div className="flex-1 overflow-y-auto px-6 py-4">
-                  <p className="text-SM text-black/60 dark:text-white/60">
-                    Are you sure you want to delete the provider &quot;
+                  <p className="text-sm text-black/60 dark:text-white/60">
+                    Are you sure you want to delete the connection &quot;
                     {modelProvider.name}&quot;? This action cannot be undone.
+                    All associated models will also be removed.
                   </p>
                 </div>
                 <div className="px-6 py-6 flex justify-end space-x-2">

src/components/Settings/Sections/Models/ModelProvider.tsx

@@ -1,7 +1,7 @@
 import { UIConfigField, ConfigModelProvider } from '@/lib/config/types';
 import { cn } from '@/lib/utils';
 import { AnimatePresence, motion } from 'framer-motion';
-import { AlertCircle, ChevronDown, Pencil, Trash2, X } from 'lucide-react';
+import { AlertCircle, Plug2, Plus, Pencil, Trash2, X } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
 import AddModel from './AddModelDialog';
@@ -17,7 +17,7 @@ const ModelProvider = ({
   fields: UIConfigField[];
   setProviders: React.Dispatch<React.SetStateAction<ConfigModelProvider[]>>;
 }) => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(true);
 
   const handleModelDelete = async (
     type: 'chat' | 'embedding',
@@ -66,23 +66,35 @@ const ModelProvider = ({
     }
   };
 
+  const modelCount =
+    modelProvider.chatModels.filter((m) => m.key !== 'error').length +
+    modelProvider.embeddingModels.filter((m) => m.key !== 'error').length;
+  const hasError =
+    modelProvider.chatModels.some((m) => m.key === 'error') ||
+    modelProvider.embeddingModels.some((m) => m.key === 'error');
+
   return (
     <div
       key={modelProvider.id}
-      className="border border-light-200 dark:border-dark-200 rounded-lg overflow-hidden"
+      className="border border-light-200 dark:border-dark-200 rounded-lg overflow-hidden bg-light-primary dark:bg-dark-primary"
     >
-      <div
-        className={cn(
-          'group px-5 py-4 flex flex-row justify-between w-full cursor-pointer hover:bg-light-secondary hover:dark:bg-dark-secondary transition duration-200 items-center',
-          !open && 'rounded-lg',
-        )}
-        onClick={() => setOpen(!open)}
-      >
-        <p className="text-sm lg:text-base text-black dark:text-white font-medium">
+      <div className="px-5 py-3.5 flex flex-row justify-between w-full items-center border-b border-light-200 dark:border-dark-200 bg-light-secondary/30 dark:bg-dark-secondary/30">
+        <div className="flex items-center gap-2.5">
+          <div className="p-1.5 rounded-md bg-sky-500/10 dark:bg-sky-500/10">
+            <Plug2 size={14} className="text-sky-500" />
+          </div>
+          <div className="flex flex-col">
+            <p className="text-sm lg:text-sm text-black dark:text-white font-medium">
               {modelProvider.name}
             </p>
-        <div className="flex items-center gap-4">
-          <div className="flex flex-row items-center">
+            {modelCount > 0 && (
+              <p className="text-[10px] lg:text-[11px] text-black/50 dark:text-white/50">
+                {modelCount} model{modelCount !== 1 ? 's' : ''} configured
+              </p>
+            )}
+          </div>
+        </div>
+        <div className="flex flex-row items-center gap-1">
           <UpdateProvider
             fields={fields}
             modelProvider={modelProvider}
@@ -93,123 +105,118 @@ const ModelProvider = ({
             setProviders={setProviders}
           />
         </div>
-          <ChevronDown
-            size={16}
-            className={cn(
-              open ? 'rotate-180' : '',
-              'transition duration-200 text-black/70 dark:text-white/70 group-hover:text-sky-500',
-            )}
-          />
       </div>
-      </div>
-      <AnimatePresence>
-        {open && (
-          <motion.div
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: 'auto', opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.1 }}
-          >
-            <div className="border-t border-light-200 dark:border-dark-200" />
       <div className="flex flex-col gap-y-4 px-5 py-4">
-              {modelProvider.chatModels.length > 0 && (
         <div className="flex flex-col gap-y-2">
           <div className="flex flex-row w-full justify-between items-center">
-                    <p className="text-[11px] lg:text-xs text-black/70 dark:text-white/70">
-                      Chat models
+            <p className="text-[11px] lg:text-[11px] font-medium text-black/70 dark:text-white/70 uppercase tracking-wide">
+              Chat Models
             </p>
+            {!modelProvider.chatModels.some((m) => m.key === 'error') && (
               <AddModel
                 providerId={modelProvider.id}
                 setProviders={setProviders}
                 type="chat"
               />
+            )}
           </div>
           <div className="flex flex-col gap-2">
             {modelProvider.chatModels.some((m) => m.key === 'error') ? (
-                      <div className="flex flex-row items-center gap-2 text-xs lg:text-sm text-red-500 dark:text-red-400 rounded-lg bg-red-50 dark:bg-red-950/20 px-3 py-2 border border-red-200 dark:border-red-900/30">
+              <div className="flex flex-row items-center gap-2 text-xs lg:text-xs text-red-500 dark:text-red-400 rounded-lg bg-red-50 dark:bg-red-950/20 px-3 py-2 border border-red-200 dark:border-red-900/30">
                 <AlertCircle size={16} className="shrink-0" />
                 <span className="break-words">
                   {
-                            modelProvider.chatModels.find(
-                              (m) => m.key === 'error',
-                            )?.name
+                    modelProvider.chatModels.find((m) => m.key === 'error')
+                      ?.name
                   }
                 </span>
               </div>
-                    ) : (
+            ) : modelProvider.chatModels.filter((m) => m.key !== 'error')
+                .length === 0 && !hasError ? (
+              <div className="flex flex-col items-center justify-center py-4 px-4 rounded-lg border-2 border-dashed border-light-200 dark:border-dark-200 bg-light-secondary/20 dark:bg-dark-secondary/20">
+                <p className="text-xs text-black/50 dark:text-white/50 text-center">
+                  No chat models configured
+                </p>
+              </div>
+            ) : modelProvider.chatModels.filter((m) => m.key !== 'error')
+                .length > 0 ? (
               <div className="flex flex-row flex-wrap gap-2">
                 {modelProvider.chatModels.map((model, index) => (
                   <div
                     key={`${modelProvider.id}-chat-${model.key}-${index}`}
-                            className="flex flex-row items-center space-x-1 text-xs lg:text-sm text-black/70 dark:text-white/70 rounded-lg bg-light-secondary dark:bg-dark-secondary px-3 py-1.5"
+                    className="flex flex-row items-center space-x-1.5 text-xs lg:text-xs text-black/70 dark:text-white/70 rounded-lg bg-light-secondary dark:bg-dark-secondary px-3 py-1.5 border border-light-200 dark:border-dark-200"
                   >
                     <span>{model.name}</span>
                     <button
                       onClick={() => {
                         handleModelDelete('chat', model.key);
                       }}
+                      className="hover:text-red-500 dark:hover:text-red-400 transition-colors"
                     >
                       <X size={12} />
                     </button>
                   </div>
                 ))}
               </div>
-                    )}
+            ) : null}
           </div>
         </div>
-              )}
-              {modelProvider.embeddingModels.length > 0 && (
+
         <div className="flex flex-col gap-y-2">
           <div className="flex flex-row w-full justify-between items-center">
-                    <p className="text-[11px] lg:text-xs text-black/70 dark:text-white/70">
-                      Embedding models
+            <p className="text-[11px] lg:text-[11px] font-medium text-black/70 dark:text-white/70 uppercase tracking-wide">
+              Embedding Models
             </p>
+            {!modelProvider.embeddingModels.some((m) => m.key === 'error') && (
               <AddModel
                 providerId={modelProvider.id}
                 setProviders={setProviders}
                 type="embedding"
               />
+            )}
           </div>
           <div className="flex flex-col gap-2">
-                    {modelProvider.embeddingModels.some(
-                      (m) => m.key === 'error',
-                    ) ? (
-                      <div className="flex flex-row items-center gap-2 text-xs lg:text-sm text-red-500 dark:text-red-400 rounded-lg bg-red-50 dark:bg-red-950/20 px-3 py-2 border border-red-200 dark:border-red-900/30">
+            {modelProvider.embeddingModels.some((m) => m.key === 'error') ? (
+              <div className="flex flex-row items-center gap-2 text-xs lg:text-xs text-red-500 dark:text-red-400 rounded-lg bg-red-50 dark:bg-red-950/20 px-3 py-2 border border-red-200 dark:border-red-900/30">
                 <AlertCircle size={16} className="shrink-0" />
                 <span className="break-words">
                   {
-                            modelProvider.embeddingModels.find(
-                              (m) => m.key === 'error',
-                            )?.name
+                    modelProvider.embeddingModels.find((m) => m.key === 'error')
+                      ?.name
                   }
                 </span>
               </div>
-                    ) : (
+            ) : modelProvider.embeddingModels.filter((m) => m.key !== 'error')
+                .length === 0 && !hasError ? (
+              <div className="flex flex-col items-center justify-center py-4 px-4 rounded-lg border-2 border-dashed border-light-200 dark:border-dark-200 bg-light-secondary/20 dark:bg-dark-secondary/20">
+                <p className="text-xs text-black/50 dark:text-white/50 text-center">
+                  No embedding models configured
+                </p>
+              </div>
+            ) : modelProvider.embeddingModels.filter((m) => m.key !== 'error')
+                .length > 0 ? (
               <div className="flex flex-row flex-wrap gap-2">
                 {modelProvider.embeddingModels.map((model, index) => (
                   <div
                     key={`${modelProvider.id}-embedding-${model.key}-${index}`}
-                            className="flex flex-row items-center space-x-1 text-xs lg:text-sm text-black/70 dark:text-white/70 rounded-lg bg-light-secondary dark:bg-dark-secondary px-3 py-1.5"
+                    className="flex flex-row items-center space-x-1.5 text-xs lg:text-xs text-black/70 dark:text-white/70 rounded-lg bg-light-secondary dark:bg-dark-secondary px-3 py-1.5 border border-light-200 dark:border-dark-200"
                   >
                     <span>{model.name}</span>
                     <button
                       onClick={() => {
                         handleModelDelete('embedding', model.key);
                       }}
+                      className="hover:text-red-500 dark:hover:text-red-400 transition-colors"
                     >
                       <X size={12} />
                     </button>
                   </div>
                 ))}
               </div>
-                    )}
+            ) : null}
           </div>
         </div>
-              )}
       </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
     </div>
   );
 };

src/components/Settings/Sections/Models/ModelSelect.tsx

@@ -1,5 +1,6 @@
 import Select from '@/components/ui/Select';
 import { ConfigModelProvider } from '@/lib/config/types';
+import { useChat } from '@/lib/hooks/useChat';
 import { useState } from 'react';
 import { toast } from 'sonner';
 
@@ -11,30 +12,40 @@ const ModelSelect = ({
   type: 'chat' | 'embedding';
 }) => {
   const [selectedModel, setSelectedModel] = useState<string>(
-    `${providers[0]?.id}/${providers[0].embeddingModels[0]?.key}`,
+    type === 'chat'
+      ? `${localStorage.getItem('chatModelProviderId')}/${localStorage.getItem('chatModelKey')}`
+      : `${localStorage.getItem('embeddingModelProviderId')}/${localStorage.getItem('embeddingModelKey')}`,
   );
   const [loading, setLoading] = useState(false);
+  const { setChatModelProvider, setEmbeddingModelProvider } = useChat();
 
   const handleSave = async (newValue: string) => {
     setLoading(true);
     setSelectedModel(newValue);
-    console.log(newValue);
+
     try {
       if (type === 'chat') {
-        localStorage.setItem('chatModelProviderId', newValue.split('/')[0]);
-        localStorage.setItem(
-          'chatModelKey',
-          newValue.split('/').slice(1).join('/'),
-        );
+        const providerId = newValue.split('/')[0];
+        const modelKey = newValue.split('/').slice(1).join('/');
+
+        localStorage.setItem('chatModelProviderId', providerId);
+        localStorage.setItem('chatModelKey', modelKey);
+
+        setChatModelProvider({
+          providerId: providerId,
+          key: modelKey,
+        });
       } else {
-        localStorage.setItem(
-          'embeddingModelProviderId',
-          newValue.split('/')[0],
-        );
-        localStorage.setItem(
-          'embeddingModelKey',
-          newValue.split('/').slice(1).join('/'),
-        );
+        const providerId = newValue.split('/')[0];
+        const modelKey = newValue.split('/').slice(1).join('/');
+
+        localStorage.setItem('embeddingModelProviderId', providerId);
+        localStorage.setItem('embeddingModelKey', modelKey);
+
+        setEmbeddingModelProvider({
+          providerId: providerId,
+          key: modelKey,
+        });
       }
     } catch (error) {
       console.error('Error saving config:', error);
@@ -48,13 +59,13 @@ const ModelSelect = ({
     <section className="rounded-xl border border-light-200 bg-light-primary/80 p-4 lg:p-6 transition-colors dark:border-dark-200 dark:bg-dark-primary/80">
       <div className="space-y-3 lg:space-y-5">
         <div>
-          <h4 className="text-sm lg:text-base text-black dark:text-white">
+          <h4 className="text-sm lg:text-sm text-black dark:text-white">
             Select {type === 'chat' ? 'Chat Model' : 'Embedding Model'}
           </h4>
           <p className="text-[11px] lg:text-xs text-black/50 dark:text-white/50">
             {type === 'chat'
-              ? 'Select the model to use for chat responses'
-              : 'Select the model to use for embeddings'}
+              ? 'Choose which model to use for generating responses'
+              : 'Choose which model to use for generating embeddings'}
           </p>
         </div>
         <Select
@@ -75,7 +86,7 @@ const ModelSelect = ({
                   })),
                 )
           }
-          className="!text-xs lg:!text-sm"
+          className="!text-xs lg:!text-[13px]"
           loading={loading}
           disabled={loading}
         />

src/components/Settings/Sections/Models/Section.tsx

@@ -20,7 +20,7 @@ const Models = ({
   return (
     <div className="flex-1 space-y-6 overflow-y-auto py-6">
       <div className="flex flex-col px-6 gap-y-4">
-        <h3 className="text-xs lg:text-sm text-black/70 dark:text-white/70">
+        <h3 className="text-xs lg:text-xs text-black/70 dark:text-white/70">
           Select models
         </h3>
         <ModelSelect
@@ -38,13 +38,40 @@ const Models = ({
       </div>
       <div className="border-t border-light-200 dark:border-dark-200" />
       <div className="flex flex-row justify-between items-center px-6 ">
-        <p className="text-xs lg:text-sm text-black/70 dark:text-white/70">
-          Manage model provider
+        <p className="text-xs lg:text-xs text-black/70 dark:text-white/70">
+          Manage connections
         </p>
         <AddProvider modelProviders={fields} setProviders={setProviders} />
       </div>
       <div className="flex flex-col px-6 gap-y-4">
-        {providers.map((provider) => (
+        {providers.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 px-4 rounded-lg border-2 border-dashed border-light-200 dark:border-dark-200 bg-light-secondary/10 dark:bg-dark-secondary/10">
+            <div className="p-3 rounded-full bg-sky-500/10 dark:bg-sky-500/10 mb-3">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="w-8 h-8 text-sky-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 10V3L4 14h7v7l9-11h-7z"
+                />
+              </svg>
+            </div>
+            <p className="text-sm font-medium text-black/70 dark:text-white/70 mb-1">
+              No connections yet
+            </p>
+            <p className="text-xs text-black/50 dark:text-white/50 text-center max-w-sm mb-4">
+              Add your first connection to start using AI models. Connect to
+              OpenAI, Anthropic, Ollama, and more.
+            </p>
+          </div>
+        ) : (
+          providers.map((provider) => (
             <ModelProvider
               key={`provider-${provider.id}`}
               fields={
@@ -54,7 +81,8 @@ const Models = ({
               modelProvider={provider}
               setProviders={setProviders}
             />
-        ))}
+          ))
+        )}
       </div>
     </div>
   );

src/components/Settings/Sections/Models/UpdateProviderDialog.tsx

@@ -67,10 +67,10 @@ const UpdateProvider = ({
         });
       });
 
-      toast.success('Provider updated successfully.');
+      toast.success('Connection updated successfully.');
     } catch (error) {
       console.error('Error updating provider:', error);
-      toast.error('Failed to update provider.');
+      toast.error('Failed to update connection.');
     } finally {
       setLoading(false);
       setOpen(false);
@@ -109,8 +109,8 @@ const UpdateProvider = ({
               <DialogPanel className="w-full mx-4 lg:w-[600px] max-h-[85vh] flex flex-col border bg-light-primary dark:bg-dark-primary border-light-secondary dark:border-dark-secondary rounded-lg">
                 <form onSubmit={handleSubmit} className="flex flex-col flex-1">
                   <div className="px-6 pt-6 pb-4">
-                    <h3 className="text-black/90 dark:text-white/90 font-medium">
-                      Update provider
+                    <h3 className="text-black/90 dark:text-white/90 font-medium text-sm">
+                      Update connection
                     </h3>
                   </div>
                   <div className="border-t border-light-200 dark:border-dark-200" />
@@ -121,13 +121,13 @@ const UpdateProvider = ({
                         className="flex flex-col items-start space-y-2"
                       >
                         <label className="text-xs text-black/70 dark:text-white/70">
-                          Name*
+                          Connection Name*
                         </label>
                         <input
                           value={name}
                           onChange={(event) => setName(event.target.value)}
                           className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-4 py-3 pr-10 text-sm text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
-                          placeholder={'Provider Name'}
+                          placeholder={'Connection Name'}
                           type="text"
                           required={true}
                         />
@@ -150,7 +150,7 @@ const UpdateProvider = ({
                                 [field.key]: event.target.value,
                               }))
                             }
-                            className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-4 py-3 pr-10 text-sm text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+                            className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-4 py-3 pr-10 text-[13px] text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
                             placeholder={
                               (field as StringUIConfigField).placeholder
                             }
@@ -166,12 +166,12 @@ const UpdateProvider = ({
                     <button
                       type="submit"
                       disabled={loading}
-                      className="px-4 py-2 rounded-lg text-sm bg-sky-500 text-white font-medium disabled:opacity-85 hover:opacity-85 active:scale-95 transition duration-200"
+                      className="px-4 py-2 rounded-lg text-[13px] bg-sky-500 text-white font-medium disabled:opacity-85 hover:opacity-85 active:scale-95 transition duration-200"
                     >
                       {loading ? (
                         <Loader2 className="animate-spin" size={16} />
                       ) : (
-                        'Update Provider'
+                        'Update Connection'
                       )}
                     </button>
                   </div>

src/components/Settings/Sections/Personalization.tsx

@@ -0,0 +1,29 @@
+import { UIConfigField } from '@/lib/config/types';
+import SettingsField from '../SettingsField';
+
+const Personalization = ({
+  fields,
+  values,
+}: {
+  fields: UIConfigField[];
+  values: Record<string, any>;
+}) => {
+  return (
+    <div className="flex-1 space-y-6 overflow-y-auto px-6 py-6">
+      {fields.map((field) => (
+        <SettingsField
+          key={field.key}
+          field={field}
+          value={
+            (field.scope === 'client'
+              ? localStorage.getItem(field.key)
+              : values[field.key]) ?? field.default
+          }
+          dataAdd="personalization"
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Personalization;

src/components/Settings/Sections/Preferences.tsx

@@ -1,7 +1,7 @@
 import { UIConfigField } from '@/lib/config/types';
 import SettingsField from '../SettingsField';
 
-const General = ({
+const Preferences = ({
   fields,
   values,
 }: {
@@ -19,11 +19,11 @@ const General = ({
               ? localStorage.getItem(field.key)
               : values[field.key]) ?? field.default
           }
-          dataAdd="general"
+          dataAdd="preferences"
         />
       ))}
     </div>
   );
 };
 
-export default General;
+export default Preferences;

src/components/Settings/SettingsDialogue.tsx

@@ -4,9 +4,10 @@ import {
   BrainCog,
   ChevronLeft,
   Search,
-  Settings,
+  Sliders,
+  ToggleRight,
 } from 'lucide-react';
-import General from './Sections/General';
+import Preferences from './Sections/Preferences';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
@@ -15,20 +16,29 @@ import { cn } from '@/lib/utils';
 import Models from './Sections/Models/Section';
 import SearchSection from './Sections/Search';
 import Select from '@/components/ui/Select';
+import Personalization from './Sections/Personalization';
 
 const sections = [
   {
-    key: 'general',
-    name: 'General',
-    description: 'Adjust common settings.',
-    icon: Settings,
-    component: General,
-    dataAdd: 'general',
+    key: 'preferences',
+    name: 'Preferences',
+    description: 'Customize your application preferences.',
+    icon: Sliders,
+    component: Preferences,
+    dataAdd: 'preferences',
+  },
+  {
+    key: 'personalization',
+    name: 'Personalization',
+    description: 'Customize the behavior and tone of the model.',
+    icon: ToggleRight,
+    component: Personalization,
+    dataAdd: 'personalization',
   },
   {
     key: 'models',
     name: 'Models',
-    description: 'Configure model settings.',
+    description: 'Connect to AI services and manage connections.',
     icon: BrainCog,
     component: Models,
     dataAdd: 'modelProviders',
@@ -166,7 +176,7 @@ const SettingsDialogue = ({
                   <div className="flex flex-1 flex-col overflow-hidden">
                     <div className="border-b border-light-200/60 px-6 pb-6 lg:pt-6 dark:border-dark-200/60 flex-shrink-0">
                       <div className="flex flex-col">
-                        <h4 className="font-medium text-black dark:text-white text-sm lg:text-base">
+                        <h4 className="font-medium text-black dark:text-white text-sm lg:text-sm">
                           {selectedSection.name}
                         </h4>
                         <p className="text-[11px] lg:text-xs text-black/50 dark:text-white/50">

src/components/Settings/SettingsField.tsx

@@ -1,6 +1,7 @@
 import {
   SelectUIConfigField,
   StringUIConfigField,
+  SwitchUIConfigField,
   TextareaUIConfigField,
   UIConfigField,
 } from '@/lib/config/types';
@@ -9,6 +10,7 @@ import Select from '../ui/Select';
 import { toast } from 'sonner';
 import { useTheme } from 'next-themes';
 import { Loader2 } from 'lucide-react';
+import { Switch } from '@headlessui/react';
 
 const SettingsSelect = ({
   field,
@@ -62,7 +64,7 @@ const SettingsSelect = ({
     <section className="rounded-xl border border-light-200 bg-light-primary/80 p-4 lg:p-6 transition-colors dark:border-dark-200 dark:bg-dark-primary/80">
       <div className="space-y-3 lg:space-y-5">
         <div>
-          <h4 className="text-sm lg:text-base text-black dark:text-white">
+          <h4 className="text-sm lg:text-sm text-black dark:text-white">
             {field.name}
           </h4>
           <p className="text-[11px] lg:text-xs text-black/50 dark:text-white/50">
@@ -133,7 +135,7 @@ const SettingsInput = ({
     <section className="rounded-xl border border-light-200 bg-light-primary/80 p-4 lg:p-6 transition-colors dark:border-dark-200 dark:bg-dark-primary/80">
       <div className="space-y-3 lg:space-y-5">
         <div>
-          <h4 className="text-sm lg:text-base text-black dark:text-white">
+          <h4 className="text-sm lg:text-sm text-black dark:text-white">
             {field.name}
           </h4>
           <p className="text-[11px] lg:text-xs text-black/50 dark:text-white/50">
@@ -145,7 +147,7 @@ const SettingsInput = ({
             value={value ?? field.default ?? ''}
             onChange={(event) => setValue(event.target.value)}
             onBlur={(event) => handleSave(event.target.value)}
-            className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-3 py-2 lg:px-4 lg:py-3 pr-10 !text-xs lg:!text-sm text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+            className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-3 py-2 lg:px-4 lg:py-3 pr-10 !text-xs lg:!text-[13px] text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
             placeholder={field.placeholder}
             type="text"
             disabled={loading}
@@ -209,7 +211,7 @@ const SettingsTextarea = ({
     <section className="rounded-xl border border-light-200 bg-light-primary/80 p-4 lg:p-6 transition-colors dark:border-dark-200 dark:bg-dark-primary/80">
       <div className="space-y-3 lg:space-y-5">
         <div>
-          <h4 className="text-sm lg:text-base text-black dark:text-white">
+          <h4 className="text-sm lg:text-sm text-black dark:text-white">
             {field.name}
           </h4>
           <p className="text-[11px] lg:text-xs text-black/50 dark:text-white/50">
@@ -221,7 +223,7 @@ const SettingsTextarea = ({
             value={value ?? field.default ?? ''}
             onChange={(event) => setValue(event.target.value)}
             onBlur={(event) => handleSave(event.target.value)}
-            className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-3 py-2 lg:px-4 lg:py-3 pr-10 !text-xs lg:!text-sm text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+            className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-3 py-2 lg:px-4 lg:py-3 pr-10 !text-xs lg:!text-[13px] text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
             placeholder={field.placeholder}
             rows={4}
             disabled={loading}
@@ -237,6 +239,79 @@ const SettingsTextarea = ({
   );
 };
 
+const SettingsSwitch = ({
+  field,
+  value,
+  setValue,
+  dataAdd,
+}: {
+  field: SwitchUIConfigField;
+  value?: any;
+  setValue: (value: any) => void;
+  dataAdd: string;
+}) => {
+  const [loading, setLoading] = useState(false);
+
+  const handleSave = async (newValue: boolean) => {
+    setLoading(true);
+    setValue(newValue);
+    try {
+      if (field.scope === 'client') {
+        localStorage.setItem(field.key, String(newValue));
+      } else {
+        const res = await fetch('/api/config', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            key: `${dataAdd}.${field.key}`,
+            value: newValue,
+          }),
+        });
+
+        if (!res.ok) {
+          console.error('Failed to save config:', await res.text());
+          throw new Error('Failed to save configuration');
+        }
+      }
+    } catch (error) {
+      console.error('Error saving config:', error);
+      toast.error('Failed to save configuration.');
+    } finally {
+      setTimeout(() => setLoading(false), 150);
+    }
+  };
+
+  const isChecked = value === true || value === 'true';
+
+  return (
+    <section className="rounded-xl border border-light-200 bg-light-primary/80 p-4 lg:p-6 transition-colors dark:border-dark-200 dark:bg-dark-primary/80">
+      <div className="flex flex-row items-center space-x-3 lg:space-x-5 w-full justify-between">
+        <div>
+          <h4 className="text-sm lg:text-sm text-black dark:text-white">
+            {field.name}
+          </h4>
+          <p className="text-[11px] lg:text-xs text-black/50 dark:text-white/50">
+            {field.description}
+          </p>
+        </div>
+        <Switch
+          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"
+        >
+          <span
+            aria-hidden="true"
+            className="pointer-events-none inline-block size-4 translate-x-0 rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out group-data-[checked]:translate-x-6"
+          />
+        </Switch>
+      </div>
+    </section>
+  );
+};
+
 const SettingsField = ({
   field,
   value,
@@ -276,6 +351,15 @@ const SettingsField = ({
           dataAdd={dataAdd}
         />
       );
+    case 'switch':
+      return (
+        <SettingsSwitch
+          field={field}
+          value={val}
+          setValue={setVal}
+          dataAdd={dataAdd}
+        />
+      );
     default:
       return <div>Unsupported field type: {field.type}</div>;
   }

src/components/Setup/SetupConfig.tsx

@@ -63,8 +63,11 @@ const SetupConfig = ({
     }
   };
 
+  const visibleProviders = providers.filter(
+    (p) => p.name.toLowerCase() !== 'transformers',
+  );
   const hasProviders =
-    providers.filter((p) => p.chatModels.length > 0).length > 0;
+    visibleProviders.filter((p) => p.chatModels.length > 0).length > 0;
 
   return (
     <div className="w-[95vw] md:w-[80vw] lg:w-[65vw] mx-auto px-2 sm:px-4 md:px-6 flex flex-col space-y-6">
@@ -82,10 +85,10 @@ const SetupConfig = ({
             <div className="flex flex-row justify-between items-center mb-4 md:mb-6 pb-3 md:pb-4 border-b border-light-200 dark:border-dark-200">
               <div>
                 <p className="text-xs sm:text-sm font-medium text-black dark:text-white">
-                  Manage Providers
+                  Manage Connections
                 </p>
                 <p className="text-[10px] sm:text-xs text-black/50 dark:text-white/50 mt-0.5">
-                  Add and configure your model providers
+                  Add connections to access AI models
                 </p>
               </div>
               <AddProvider
@@ -101,14 +104,17 @@ const SetupConfig = ({
                     Loading providers...
                   </p>
                 </div>
-              ) : providers.length === 0 ? (
+              ) : visibleProviders.length === 0 ? (
                 <div className="flex flex-col items-center justify-center py-8 md:py-12 text-center">
                   <p className="text-xs sm:text-sm font-medium text-black/70 dark:text-white/70">
-                    No providers configured
+                    No connections configured
+                  </p>
+                  <p className="text-[10px] sm:text-xs text-black/50 dark:text-white/50 mt-1">
+                    Click &quot;Add Connection&quot; above to get started
                   </p>
                 </div>
               ) : (
-                providers.map((provider) => (
+                visibleProviders.map((provider) => (
                   <ModelProvider
                     key={`provider-${provider.id}`}
                     fields={

src/lib/agents/media/image.ts

@@ -0,0 +1,65 @@
+/* I don't think can be classified as agents but to keep the structure consistent i guess ill keep it here */
+
+import {
+  RunnableSequence,
+  RunnableMap,
+  RunnableLambda,
+} from '@langchain/core/runnables';
+import { ChatPromptTemplate } from '@langchain/core/prompts';
+import formatChatHistoryAsString from '@/lib/utils/formatHistory';
+import { BaseMessage, HumanMessage, SystemMessage } from '@langchain/core/messages';
+import { StringOutputParser } from '@langchain/core/output_parsers';
+import { searchSearxng } from '@/lib/searxng';
+import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
+import LineOutputParser from '@/lib/outputParsers/lineOutputParser';
+import { imageSearchFewShots, imageSearchPrompt } from '@/lib/prompts/media/image';
+
+type ImageSearchChainInput = {
+  chatHistory: BaseMessage[];
+  query: string;
+};
+
+type ImageSearchResult = {
+  img_src: string;
+  url: string;
+  title: string;
+}
+
+const outputParser = new LineOutputParser({
+  key: 'query',
+})
+
+const searchImages = async (
+  input: ImageSearchChainInput,
+  llm: BaseChatModel,
+) => {
+  const chatPrompt = await ChatPromptTemplate.fromMessages([
+    new SystemMessage(imageSearchPrompt),
+    ...imageSearchFewShots,
+    new HumanMessage(`<conversation>\n${formatChatHistoryAsString(input.chatHistory)}\n</conversation>\n<follow_up>\n${input.query}\n</follow_up>`)
+  ]).formatMessages({})
+
+  const res = await llm.invoke(chatPrompt)
+
+  const query = await outputParser.invoke(res)
+
+  const searchRes = await searchSearxng(query!, {
+    engines: ['bing images', 'google images'],
+  });
+
+  const images: ImageSearchResult[] = [];
+
+  searchRes.results.forEach((result) => {
+    if (result.img_src && result.url && result.title) {
+      images.push({
+        img_src: result.img_src,
+        url: result.url,
+        title: result.title,
+      });
+    }
+  });
+
+  return images.slice(0, 10);
+};
+
+export default searchImages;

src/lib/agents/media/video.ts

@@ -0,0 +1,65 @@
+import { ChatPromptTemplate } from '@langchain/core/prompts';
+import formatChatHistoryAsString from '@/lib/utils/formatHistory';
+import { BaseMessage, HumanMessage, SystemMessage } from '@langchain/core/messages';
+import { searchSearxng } from '@/lib/searxng';
+import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
+import LineOutputParser from '@/lib/outputParsers/lineOutputParser';
+import { videoSearchFewShots, videoSearchPrompt } from '@/lib/prompts/media/videos';
+
+type VideoSearchChainInput = {
+  chatHistory: BaseMessage[];
+  query: string;
+};
+
+type VideoSearchResult = {
+  img_src: string;
+  url: string;
+  title: string;
+  iframe_src: string;
+}
+
+const outputParser = new LineOutputParser({
+  key: 'query',
+});
+
+const searchVideos = async (
+  input: VideoSearchChainInput,
+  llm: BaseChatModel,
+) => {
+  const chatPrompt = await ChatPromptTemplate.fromMessages([
+    new SystemMessage(videoSearchPrompt),
+    ...videoSearchFewShots,
+    new HumanMessage(`<conversation>${formatChatHistoryAsString(input.chatHistory)}\n</conversation>\n<follow_up>\n${input.query}\n</follow_up>`)
+  ]).formatMessages({})
+
+  const res = await llm.invoke(chatPrompt)
+
+  const query = await outputParser.invoke(res)
+
+  const searchRes = await searchSearxng(query!, {
+    engines: ['youtube'],
+  });
+
+  const videos: VideoSearchResult[] = [];
+
+  searchRes.results.forEach((result) => {
+    if (
+      result.thumbnail &&
+      result.url &&
+      result.title &&
+      result.iframe_src
+    ) {
+      videos.push({
+        img_src: result.thumbnail,
+        url: result.url,
+        title: result.title,
+        iframe_src: result.iframe_src,
+      });
+    }
+  });
+
+  return videos.slice(0, 10);
+
+};
+
+export default searchVideos;

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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,11 @@
+import { Intent } from '../../types';
+
+const academicSearchIntent: Intent = {
+  name: 'academic_search',
+  description:
+    'Use this intent to find scholarly articles, research papers, and academic resources when the user is seeking credible and authoritative information on a specific topic.',
+  requiresSearch: true,
+  enabled: (config) => config.sources.includes('academic'),
+};
+
+export default academicSearchIntent;

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

@@ -0,0 +1,11 @@
+import { Intent } from '../../types';
+
+const discussionSearchIntent: Intent = {
+  name: 'discussion_search',
+  description:
+    'Use this intent to search through discussion forums, community boards, or social media platforms when the user is looking for opinions, experiences, or community-driven information on a specific topic.',
+  requiresSearch: true,
+  enabled: (config) => config.sources.includes('discussions'),
+};
+
+export default discussionSearchIntent;

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

@@ -0,0 +1,14 @@
+import academicSearchIntent from './academicSearch';
+import discussionSearchIntent from './discussionSearch';
+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);
+
+export { IntentRegistry };

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

@@ -0,0 +1,29 @@
+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 availableintnets = this.getAvailableIntents(config);
+
+    return availableintnets
+      .map((intent) => `${intent.name}: ${intent.description}`)
+      .join('\n\n');
+  }
+}
+
+export default IntentRegistry;

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

@@ -0,0 +1,11 @@
+import { Intent } from '../../types';
+
+const webSearchIntent: Intent = {
+  name: 'web_search',
+  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.',
+  requiresSearch: true,
+  enabled: (config) => config.sources.includes('web'),
+};
+
+export default webSearchIntent;

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

@@ -0,0 +1,11 @@
+import { Intent } from '../../types';
+
+const widgetResponseIntent: Intent = {
+  name: 'widget_response',
+  description:
+    'Use this intent to respond to user queries using available widgets when the required information can be obtained from them.',
+  requiresSearch: false,
+  enabled: (config) => true,
+};
+
+export default widgetResponseIntent;

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

@@ -0,0 +1,11 @@
+import { Intent } from '../../types';
+
+const writingTaskIntent: Intent = {
+  name: 'writing_task',
+  description:
+    'Use this intent to assist users with writing tasks such as drafting emails, creating documents, or generating content based on their instructions or greetings.',
+  requiresSearch: false,
+  enabled: (config) => true,
+};
+
+export default writingTaskIntent;

src/lib/agents/search/types.ts

@@ -0,0 +1,65 @@
+import { EventEmitter } from 'stream';
+import z from 'zod';
+import BaseLLM from '../../models/base/llm';
+import BaseEmbedding from '@/lib/models/base/embedding';
+
+export type SearchSources = 'web' | 'discussions' | 'academic';
+
+export type SearchAgentConfig = {
+  sources: SearchSources[];
+  llm: BaseLLM<any>;
+  embedding: BaseEmbedding<any>;
+};
+
+export type SearchAgentInput = {
+  chatHistory: Message[];
+  followUp: string;
+  config: SearchAgentConfig;
+};
+
+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 WidgetConfig = {
+  type: string;
+  params: Record<string, any>;
+};
+
+export type WidgetOutput = {
+  type: string;
+  data: any;
+};
+
+export type ClassifierInput = {
+  llm: BaseLLM<any>;
+  enabledSources: SearchSources[];
+  query: string;
+  chatHistory: Message[];
+};
+
+export type ClassifierOutput = {
+  skipSearch: boolean;
+  standaloneFollowUp: string;
+  intents: string[];
+  widgets: WidgetConfig[];
+};
+
+export type AdditionalConfig = {
+  llm: BaseLLM<any>;
+  embedding: BaseLLM<any>;
+  emitter: EventEmitter;
+};

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

@@ -0,0 +1,6 @@
+import WidgetRegistry from './registry';
+import weatherWidget from './weatherWidget';
+
+WidgetRegistry.register(weatherWidget);
+
+export { WidgetRegistry };

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

@@ -0,0 +1,65 @@
+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/weatherWidget.ts

@@ -0,0 +1,123 @@
+import z from 'zod';
+import { Widget } from '../types';
+
+const WeatherWidgetSchema = z.object({
+  type: z.literal('weather'),
+  location: z
+    .string()
+    .describe(
+      'Human-readable location name (e.g., "New York, NY, USA", "London, UK"). Use this OR lat/lon coordinates, never both. Leave empty string if providing coordinates.',
+    ),
+  lat: z
+    .number()
+    .describe(
+      'Latitude coordinate in decimal degrees (e.g., 40.7128). Only use when location name is empty.',
+    ),
+  lon: z
+    .number()
+    .describe(
+      'Longitude coordinate in decimal degrees (e.g., -74.0060). Only use when location name is empty.',
+    ),
+});
+
+const weatherWidget = {
+  name: 'weather',
+  description:
+    'Provides current weather information for a specified location. It can return details such as temperature, humidity, wind speed, and weather conditions. It needs either a location name or latitude/longitude coordinates to function.',
+  schema: WeatherWidgetSchema,
+  execute: async (params, _) => {
+    if (
+      params.location === '' &&
+      (params.lat === undefined || params.lon === undefined)
+    ) {
+      throw new Error(
+        'Either location name or both latitude and longitude must be provided.',
+      );
+    }
+
+    if (params.location !== '') {
+      const openStreetMapUrl = `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(params.location)}&format=json&limit=1`;
+
+      const locationRes = await fetch(openStreetMapUrl, {
+        headers: {
+          'User-Agent': 'Perplexica',
+          'Content-Type': 'application/json',
+        },
+      });
+
+      const data = await locationRes.json();
+
+      const location = data[0];
+
+      if (!location) {
+        throw new Error(
+          `Could not find coordinates for location: ${params.location}`,
+        );
+      }
+
+      const weatherRes = await fetch(
+        `https://api.open-meteo.com/v1/forecast?latitude=${location.lat}&longitude=${location.lon}&current_weather=true`,
+        {
+          headers: {
+            'User-Agent': 'Perplexica',
+            'Content-Type': 'application/json',
+          },
+        },
+      );
+
+      const weatherData = await weatherRes.json();
+
+      /* this is like a very simple implementation just to see the bacckend works, when we're working on the frontend, we'll return more data i guess? */
+      return {
+        type: 'weather',
+        data: {
+          location: params.location,
+          latitude: location.lat,
+          longitude: location.lon,
+          weather: weatherData.current_weather,
+        },
+      };
+    } else if (params.lat !== undefined && params.lon !== undefined) {
+      const [weatherRes, locationRes] = await Promise.all([
+        fetch(
+          `https://api.open-meteo.com/v1/forecast?latitude=${params.lat}&longitude=${params.lon}&current_weather=true`,
+          {
+            headers: {
+              'User-Agent': 'Perplexica',
+              'Content-Type': 'application/json',
+            },
+          },
+        ),
+        fetch(
+          `https://nominatim.openstreetmap.org/reverse?lat=${params.lat}&lon=${params.lon}&format=json`,
+          {
+            headers: {
+              'User-Agent': 'Perplexica',
+              'Content-Type': 'application/json',
+            },
+          },
+        ),
+      ]);
+
+      const weatherData = await weatherRes.json();
+      const locationData = await locationRes.json();
+
+      return {
+        type: 'weather',
+        data: {
+          location: locationData.display_name,
+          latitude: params.lat,
+          longitude: params.lon,
+          weather: weatherData.current_weather,
+        },
+      };
+    }
+
+    return {
+      type: 'weather',
+      data: null,
+    };
+  },
+} satisfies Widget<typeof WeatherWidgetSchema>;
+
+export default weatherWidget;

src/lib/agents/suggestions/index.ts

@@ -0,0 +1,32 @@
+import ListLineOutputParser from '@/lib/outputParsers/listLineOutputParser';
+import { ChatPromptTemplate, PromptTemplate } from '@langchain/core/prompts';
+import formatChatHistoryAsString from '@/lib/utils/formatHistory';
+import { BaseMessage, HumanMessage, SystemMessage } from '@langchain/core/messages';
+import { BaseChatModel } from '@langchain/core/language_models/chat_models';
+import { suggestionGeneratorPrompt } from '@/lib/prompts/suggestions';
+
+type SuggestionGeneratorInput = {
+  chatHistory: BaseMessage[];
+};
+
+const outputParser = new ListLineOutputParser({
+  key: 'suggestions',
+});
+
+const generateSuggestions = async (
+  input: SuggestionGeneratorInput,
+  llm: BaseChatModel,
+) => {
+  const chatPrompt = await ChatPromptTemplate.fromMessages([
+    new SystemMessage(suggestionGeneratorPrompt),
+    new HumanMessage(`<conversation>${formatChatHistoryAsString(input.chatHistory)}</conversation>`)
+  ]).formatMessages({})
+
+  const res = await llm.invoke(chatPrompt)
+
+  const suggestions = await outputParser.invoke(res)
+
+  return suggestions
+};
+
+export default generateSuggestions;

src/lib/chains/imageSearchAgent.ts

@@ -1,105 +0,0 @@
-import {
-  RunnableSequence,
-  RunnableMap,
-  RunnableLambda,
-} from '@langchain/core/runnables';
-import { ChatPromptTemplate } from '@langchain/core/prompts';
-import formatChatHistoryAsString from '../utils/formatHistory';
-import { BaseMessage } from '@langchain/core/messages';
-import { StringOutputParser } from '@langchain/core/output_parsers';
-import { searchSearxng } from '../searxng';
-import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import LineOutputParser from '../outputParsers/lineOutputParser';
-
-const imageSearchChainPrompt = `
-You will be given a conversation below and a follow up question. You need to rephrase the follow-up question so it is a standalone question that can be used by the LLM to search the web for images.
-You need to make sure the rephrased question agrees with the conversation and is relevant to the conversation.
-Output only the rephrased query wrapped in an XML <query> element. Do not include any explanation or additional text.
-`;
-
-type ImageSearchChainInput = {
-  chat_history: BaseMessage[];
-  query: string;
-};
-
-interface ImageSearchResult {
-  img_src: string;
-  url: string;
-  title: string;
-}
-
-const strParser = new StringOutputParser();
-
-const createImageSearchChain = (llm: BaseChatModel) => {
-  return RunnableSequence.from([
-    RunnableMap.from({
-      chat_history: (input: ImageSearchChainInput) => {
-        return formatChatHistoryAsString(input.chat_history);
-      },
-      query: (input: ImageSearchChainInput) => {
-        return input.query;
-      },
-    }),
-    ChatPromptTemplate.fromMessages([
-      ['system', imageSearchChainPrompt],
-      [
-        'user',
-        '<conversation>\n</conversation>\n<follow_up>\nWhat is a cat?\n</follow_up>',
-      ],
-      ['assistant', '<query>A cat</query>'],
-
-      [
-        'user',
-        '<conversation>\n</conversation>\n<follow_up>\nWhat is a car? How does it work?\n</follow_up>',
-      ],
-      ['assistant', '<query>Car working</query>'],
-      [
-        'user',
-        '<conversation>\n</conversation>\n<follow_up>\nHow does an AC work?\n</follow_up>',
-      ],
-      ['assistant', '<query>AC working</query>'],
-      [
-        'user',
-        '<conversation>{chat_history}</conversation>\n<follow_up>\n{query}\n</follow_up>',
-      ],
-    ]),
-    llm,
-    strParser,
-    RunnableLambda.from(async (input: string) => {
-      const queryParser = new LineOutputParser({
-        key: 'query',
-      });
-
-      return await queryParser.parse(input);
-    }),
-    RunnableLambda.from(async (input: string) => {
-      const res = await searchSearxng(input, {
-        engines: ['bing images', 'google images'],
-      });
-
-      const images: ImageSearchResult[] = [];
-
-      res.results.forEach((result) => {
-        if (result.img_src && result.url && result.title) {
-          images.push({
-            img_src: result.img_src,
-            url: result.url,
-            title: result.title,
-          });
-        }
-      });
-
-      return images.slice(0, 10);
-    }),
-  ]);
-};
-
-const handleImageSearch = (
-  input: ImageSearchChainInput,
-  llm: BaseChatModel,
-) => {
-  const imageSearchChain = createImageSearchChain(llm);
-  return imageSearchChain.invoke(input);
-};
-
-export default handleImageSearch;

src/lib/chains/suggestionGeneratorAgent.ts

@@ -1,55 +0,0 @@
-import { RunnableSequence, RunnableMap } from '@langchain/core/runnables';
-import ListLineOutputParser from '../outputParsers/listLineOutputParser';
-import { PromptTemplate } from '@langchain/core/prompts';
-import formatChatHistoryAsString from '../utils/formatHistory';
-import { BaseMessage } from '@langchain/core/messages';
-import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { ChatOpenAI } from '@langchain/openai';
-
-const suggestionGeneratorPrompt = `
-You are an AI suggestion generator for an AI powered search engine. You will be given a conversation below. You need to generate 4-5 suggestions based on the conversation. The suggestion should be relevant to the conversation that can be used by the user to ask the chat model for more information.
-You need to make sure the suggestions are relevant to the conversation and are helpful to the user. Keep a note that the user might use these suggestions to ask a chat model for more information. 
-Make sure the suggestions are medium in length and are informative and relevant to the conversation.
-
-Provide these suggestions separated by newlines between the XML tags <suggestions> and </suggestions>. For example:
-
-<suggestions>
-Tell me more about SpaceX and their recent projects
-What is the latest news on SpaceX?
-Who is the CEO of SpaceX?
-</suggestions>
-
-Conversation:
-{chat_history}
-`;
-
-type SuggestionGeneratorInput = {
-  chat_history: BaseMessage[];
-};
-
-const outputParser = new ListLineOutputParser({
-  key: 'suggestions',
-});
-
-const createSuggestionGeneratorChain = (llm: BaseChatModel) => {
-  return RunnableSequence.from([
-    RunnableMap.from({
-      chat_history: (input: SuggestionGeneratorInput) =>
-        formatChatHistoryAsString(input.chat_history),
-    }),
-    PromptTemplate.fromTemplate(suggestionGeneratorPrompt),
-    llm,
-    outputParser,
-  ]);
-};
-
-const generateSuggestions = (
-  input: SuggestionGeneratorInput,
-  llm: BaseChatModel,
-) => {
-  (llm as unknown as ChatOpenAI).temperature = 0;
-  const suggestionGeneratorChain = createSuggestionGeneratorChain(llm);
-  return suggestionGeneratorChain.invoke(input);
-};
-
-export default generateSuggestions;

src/lib/chains/videoSearchAgent.ts

@@ -1,110 +0,0 @@
-import {
-  RunnableSequence,
-  RunnableMap,
-  RunnableLambda,
-} from '@langchain/core/runnables';
-import { ChatPromptTemplate } from '@langchain/core/prompts';
-import formatChatHistoryAsString from '../utils/formatHistory';
-import { BaseMessage } from '@langchain/core/messages';
-import { StringOutputParser } from '@langchain/core/output_parsers';
-import { searchSearxng } from '../searxng';
-import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import LineOutputParser from '../outputParsers/lineOutputParser';
-
-const videoSearchChainPrompt = `
-You will be given a conversation below and a follow up question. You need to rephrase the follow-up question so it is a standalone question that can be used by the LLM to search Youtube for videos.
-You need to make sure the rephrased question agrees with the conversation and is relevant to the conversation.
-Output only the rephrased query wrapped in an XML <query> element. Do not include any explanation or additional text.
-`;
-
-type VideoSearchChainInput = {
-  chat_history: BaseMessage[];
-  query: string;
-};
-
-interface VideoSearchResult {
-  img_src: string;
-  url: string;
-  title: string;
-  iframe_src: string;
-}
-
-const strParser = new StringOutputParser();
-
-const createVideoSearchChain = (llm: BaseChatModel) => {
-  return RunnableSequence.from([
-    RunnableMap.from({
-      chat_history: (input: VideoSearchChainInput) => {
-        return formatChatHistoryAsString(input.chat_history);
-      },
-      query: (input: VideoSearchChainInput) => {
-        return input.query;
-      },
-    }),
-    ChatPromptTemplate.fromMessages([
-      ['system', videoSearchChainPrompt],
-      [
-        'user',
-        '<conversation>\n</conversation>\n<follow_up>\nHow does a car work?\n</follow_up>',
-      ],
-      ['assistant', '<query>How does a car work?</query>'],
-      [
-        'user',
-        '<conversation>\n</conversation>\n<follow_up>\nWhat is the theory of relativity?\n</follow_up>',
-      ],
-      ['assistant', '<query>Theory of relativity</query>'],
-      [
-        'user',
-        '<conversation>\n</conversation>\n<follow_up>\nHow does an AC work?\n</follow_up>',
-      ],
-      ['assistant', '<query>AC working</query>'],
-      [
-        'user',
-        '<conversation>{chat_history}</conversation>\n<follow_up>\n{query}\n</follow_up>',
-      ],
-    ]),
-    llm,
-    strParser,
-    RunnableLambda.from(async (input: string) => {
-      const queryParser = new LineOutputParser({
-        key: 'query',
-      });
-      return await queryParser.parse(input);
-    }),
-    RunnableLambda.from(async (input: string) => {
-      const res = await searchSearxng(input, {
-        engines: ['youtube'],
-      });
-
-      const videos: VideoSearchResult[] = [];
-
-      res.results.forEach((result) => {
-        if (
-          result.thumbnail &&
-          result.url &&
-          result.title &&
-          result.iframe_src
-        ) {
-          videos.push({
-            img_src: result.thumbnail,
-            url: result.url,
-            title: result.title,
-            iframe_src: result.iframe_src,
-          });
-        }
-      });
-
-      return videos.slice(0, 10);
-    }),
-  ]);
-};
-
-const handleVideoSearch = (
-  input: VideoSearchChainInput,
-  llm: BaseChatModel,
-) => {
-  const videoSearchChain = createVideoSearchChain(llm);
-  return videoSearchChain.invoke(input);
-};
-
-export default handleVideoSearch;

src/lib/config/clientRegistry.ts

@@ -6,11 +6,8 @@ const getClientConfig = (key: string, defaultVal?: any) => {
 
 export const getTheme = () => getClientConfig('theme', 'dark');
 
-export const getAutoImageSearch = () =>
-  Boolean(getClientConfig('autoImageSearch', 'true'));
-
-export const getAutoVideoSearch = () =>
-  Boolean(getClientConfig('autoVideoSearch', 'true'));
+export const getAutoMediaSearch = () =>
+  getClientConfig('autoMediaSearch', 'true') === 'true';
 
 export const getSystemInstructions = () =>
   getClientConfig('systemInstructions', '');

src/lib/config/index.ts

@@ -13,14 +13,15 @@ class ConfigManager {
   currentConfig: Config = {
     version: this.configVersion,
     setupComplete: false,
-    general: {},
+    preferences: {},
+    personalization: {},
     modelProviders: [],
     search: {
       searxngURL: '',
     },
   };
   uiConfigSections: UIConfigSections = {
-    general: [
+    preferences: [
       {
         name: 'Theme',
         key: 'theme',
@@ -40,6 +41,36 @@ class ConfigManager {
         default: 'dark',
         scope: 'client',
       },
+      {
+        name: 'Measurement Unit',
+        key: 'measureUnit',
+        type: 'select',
+        options: [
+          {
+            name: 'Imperial',
+            value: 'Imperial',
+          },
+          {
+            name: 'Metric',
+            value: 'Metric',
+          },
+        ],
+        required: false,
+        description: 'Choose between Metric  and Imperial measurement unit.',
+        default: 'Metric',
+        scope: 'client',
+      },
+      {
+        name: 'Auto video & image search',
+        key: 'autoMediaSearch',
+        type: 'switch',
+        required: false,
+        description: 'Automatically search for relevant images and videos.',
+        default: true,
+        scope: 'client',
+      },
+    ],
+    personalization: [
       {
         name: 'System Instructions',
         key: 'systemInstructions',

src/lib/config/types.ts

@@ -38,11 +38,17 @@ type TextareaUIConfigField = BaseUIConfigField & {
   default?: string;
 };
 
+type SwitchUIConfigField = BaseUIConfigField & {
+  type: 'switch';
+  default?: boolean;
+};
+
 type UIConfigField =
   | StringUIConfigField
   | SelectUIConfigField
   | PasswordUIConfigField
-  | TextareaUIConfigField;
+  | TextareaUIConfigField
+  | SwitchUIConfigField;
 
 type ConfigModelProvider = {
   id: string;
@@ -57,7 +63,10 @@ type ConfigModelProvider = {
 type Config = {
   version: number;
   setupComplete: boolean;
-  general: {
+  preferences: {
+    [key: string]: any;
+  };
+  personalization: {
     [key: string]: any;
   };
   modelProviders: ConfigModelProvider[];
@@ -80,7 +89,8 @@ type ModelProviderUISection = {
 };
 
 type UIConfigSections = {
-  general: UIConfigField[];
+  preferences: UIConfigField[];
+  personalization: UIConfigField[];
   modelProviders: ModelProviderUISection[];
   search: UIConfigField[];
 };
@@ -95,4 +105,5 @@ export type {
   ModelProviderUISection,
   ConfigModelProvider,
   TextareaUIConfigField,
+  SwitchUIConfigField,
 };

src/lib/hooks/useChat.tsx

@@ -17,10 +17,11 @@ import {
   useState,
 } from 'react';
 import crypto from 'crypto';
-import { useSearchParams } from 'next/navigation';
+import { useParams, useSearchParams } from 'next/navigation';
 import { toast } from 'sonner';
 import { getSuggestions } from '../actions';
 import { MinimalProvider } from '../models/types';
+import { getAutoMediaSearch } from '../config/clientRegistry';
 
 export type Section = {
   userMessage: UserMessage;
@@ -48,6 +49,8 @@ type ChatContext = {
   messageAppeared: boolean;
   isReady: boolean;
   hasError: boolean;
+  chatModelProvider: ChatModelProvider;
+  embeddingModelProvider: EmbeddingModelProvider;
   setOptimizationMode: (mode: string) => void;
   setFocusMode: (mode: string) => void;
   setFiles: (files: File[]) => void;
@@ -58,6 +61,8 @@ type ChatContext = {
     rewrite?: boolean,
   ) => Promise<void>;
   rewrite: (messageId: string) => void;
+  setChatModelProvider: (provider: ChatModelProvider) => void;
+  setEmbeddingModelProvider: (provider: EmbeddingModelProvider) => void;
 };
 
 export interface File {
@@ -90,17 +95,6 @@ const checkConfig = async (
       'embeddingModelProviderId',
     );
 
-    const autoImageSearch = localStorage.getItem('autoImageSearch');
-    const autoVideoSearch = localStorage.getItem('autoVideoSearch');
-
-    if (!autoImageSearch) {
-      localStorage.setItem('autoImageSearch', 'true');
-    }
-
-    if (!autoVideoSearch) {
-      localStorage.setItem('autoVideoSearch', 'false');
-    }
-
     const res = await fetch(`/api/providers`, {
       headers: {
         'Content-Type': 'application/json',
@@ -256,25 +250,24 @@ export const chatContext = createContext<ChatContext>({
   sections: [],
   notFound: false,
   optimizationMode: '',
+  chatModelProvider: { key: '', providerId: '' },
+  embeddingModelProvider: { key: '', providerId: '' },
   rewrite: () => {},
   sendMessage: async () => {},
   setFileIds: () => {},
   setFiles: () => {},
   setFocusMode: () => {},
   setOptimizationMode: () => {},
+  setChatModelProvider: () => {},
+  setEmbeddingModelProvider: () => {},
 });
 
-export const ChatProvider = ({
-  children,
-  id,
-}: {
-  children: React.ReactNode;
-  id?: string;
-}) => {
+export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
+  const params: { chatId: string } = useParams();
   const searchParams = useSearchParams();
   const initialMessage = searchParams.get('q');
 
-  const [chatId, setChatId] = useState<string | undefined>(id);
+  const [chatId, setChatId] = useState<string | undefined>(params.chatId);
   const [newChatCreated, setNewChatCreated] = useState(false);
 
   const [loading, setLoading] = useState(false);
@@ -443,6 +436,19 @@ export const ChatProvider = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (params.chatId && params.chatId !== chatId) {
+      setChatId(params.chatId);
+      setMessages([]);
+      setChatHistory([]);
+      setFiles([]);
+      setFileIds([]);
+      setIsMessagesLoaded(false);
+      setNotFound(false);
+      setNewChatCreated(false);
+    }
+  }, [params.chatId, chatId]);
+
   useEffect(() => {
     if (
       chatId &&
@@ -466,7 +472,7 @@ export const ChatProvider = ({
       setChatId(crypto.randomBytes(20).toString('hex'));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [chatId, isMessagesLoaded, newChatCreated, messages.length]);
 
   useEffect(() => {
     messagesRef.current = messages;
@@ -519,7 +525,7 @@ export const ChatProvider = ({
     messageId,
     rewrite = false,
   ) => {
-    if (loading) return;
+    if (loading || !message) return;
     setLoading(true);
     setMessageAppeared(false);
 
@@ -608,16 +614,13 @@ export const ChatProvider = ({
 
         const lastMsg = messagesRef.current[messagesRef.current.length - 1];
 
-        const autoImageSearch = localStorage.getItem('autoImageSearch');
-        const autoVideoSearch = localStorage.getItem('autoVideoSearch');
+        const autoMediaSearch = getAutoMediaSearch();
 
-        if (autoImageSearch === 'true') {
+        if (autoMediaSearch) {
           document
             .getElementById(`search-images-${lastMsg.messageId}`)
             ?.click();
-        }
 
-        if (autoVideoSearch === 'true') {
           document
             .getElementById(`search-videos-${lastMsg.messageId}`)
             ?.click();
@@ -743,6 +746,10 @@ export const ChatProvider = ({
         setOptimizationMode,
         rewrite,
         sendMessage,
+        setChatModelProvider,
+        chatModelProvider,
+        embeddingModelProvider,
+        setEmbeddingModelProvider,
       }}
     >
       {children}

src/lib/huggingfaceTransformer.ts

@@ -1,76 +0,0 @@
-import { Embeddings, type EmbeddingsParams } from '@langchain/core/embeddings';
-import { chunkArray } from '@langchain/core/utils/chunk_array';
-
-export interface HuggingFaceTransformersEmbeddingsParams
-  extends EmbeddingsParams {
-  modelName: string;
-
-  model: string;
-
-  timeout?: number;
-
-  batchSize?: number;
-
-  stripNewLines?: boolean;
-}
-
-export class HuggingFaceTransformersEmbeddings
-  extends Embeddings
-  implements HuggingFaceTransformersEmbeddingsParams
-{
-  modelName = 'Xenova/all-MiniLM-L6-v2';
-
-  model = 'Xenova/all-MiniLM-L6-v2';
-
-  batchSize = 512;
-
-  stripNewLines = true;
-
-  timeout?: number;
-
-  constructor(fields?: Partial<HuggingFaceTransformersEmbeddingsParams>) {
-    super(fields ?? {});
-
-    this.modelName = fields?.model ?? fields?.modelName ?? this.model;
-    this.model = this.modelName;
-    this.stripNewLines = fields?.stripNewLines ?? this.stripNewLines;
-    this.timeout = fields?.timeout;
-  }
-
-  async embedDocuments(texts: string[]): Promise<number[][]> {
-    const batches = chunkArray(
-      this.stripNewLines ? texts.map((t) => t.replace(/\n/g, ' ')) : texts,
-      this.batchSize,
-    );
-
-    const batchRequests = batches.map((batch) => this.runEmbedding(batch));
-    const batchResponses = await Promise.all(batchRequests);
-    const embeddings: number[][] = [];
-
-    for (let i = 0; i < batchResponses.length; i += 1) {
-      const batchResponse = batchResponses[i];
-      for (let j = 0; j < batchResponse.length; j += 1) {
-        embeddings.push(batchResponse[j]);
-      }
-    }
-
-    return embeddings;
-  }
-
-  async embedQuery(text: string): Promise<number[]> {
-    const data = await this.runEmbedding([
-      this.stripNewLines ? text.replace(/\n/g, ' ') : text,
-    ]);
-    return data[0];
-  }
-
-  private async runEmbedding(texts: string[]) {
-    const { pipeline } = await import('@huggingface/transformers');
-    const pipe = await pipeline('feature-extraction', this.model);
-
-    return this.caller.call(async () => {
-      const output = await pipe(texts, { pooling: 'mean', normalize: true });
-      return output.tolist();
-    });
-  }
-}

src/lib/models/base/embedding.ts

@@ -0,0 +1,7 @@
+abstract class BaseEmbedding<CONFIG> {
+  constructor(protected config: CONFIG) {}
+  abstract embedText(texts: string[]): Promise<number[][]>;
+  abstract embedChunks(chunks: Chunk[]): Promise<number[][]>;
+}
+
+export default BaseEmbedding;

src/lib/models/base/llm.ts

@@ -0,0 +1,22 @@
+import {
+  GenerateObjectInput,
+  GenerateOptions,
+  GenerateTextInput,
+  GenerateTextOutput,
+  StreamTextOutput,
+} from '../types';
+
+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 streamObject<T>(
+    input: GenerateObjectInput,
+  ): AsyncGenerator<Partial<T>>;
+}
+
+export default BaseLLM;

src/lib/models/base/provider.ts

@@ -1,7 +1,9 @@
 import { Embeddings } from '@langchain/core/embeddings';
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { Model, ModelList, ProviderMetadata } from '../types';
+import { ModelList, ProviderMetadata } from '../types';
 import { UIConfigField } from '@/lib/config/types';
+import BaseLLM from './llm';
+import BaseEmbedding from './embedding';
 
 abstract class BaseModelProvider<CONFIG> {
   constructor(
@@ -11,8 +13,8 @@ abstract class BaseModelProvider<CONFIG> {
   ) {}
   abstract getDefaultModels(): Promise<ModelList>;
   abstract getModelList(): Promise<ModelList>;
-  abstract loadChatModel(modelName: string): Promise<BaseChatModel>;
-  abstract loadEmbeddingModel(modelName: string): Promise<Embeddings>;
+  abstract loadChatModel(modelName: string): Promise<BaseLLM<any>>;
+  abstract loadEmbeddingModel(modelName: string): Promise<BaseEmbedding<any>>;
   static getProviderConfigFields(): UIConfigField[] {
     throw new Error('Method not implemented.');
   }

src/lib/models/providers/gemini.ts

@@ -48,7 +48,12 @@ class GeminiProvider extends BaseModelProvider<GeminiConfig> {
     let defaultChatModels: Model[] = [];
 
     data.models.forEach((m: any) => {
-      if (m.supportedGenerationMethods.includes('embedText')) {
+      if (
+        m.supportedGenerationMethods.some(
+          (genMethod: string) =>
+            genMethod === 'embedText' || genMethod === 'embedContent',
+        )
+      ) {
         defaultEmbeddingModels.push({
           key: m.name,
           name: m.displayName,

src/lib/models/providers/index.ts

@@ -1,27 +1,11 @@
 import { ModelProviderUISection } from '@/lib/config/types';
-import { ProviderConstructor } from './baseProvider';
+import { ProviderConstructor } from '../base/provider';
 import OpenAIProvider from './openai';
 import OllamaProvider from './ollama';
-import TransformersProvider from './transformers';
-import AnthropicProvider from './anthropic';
-import GeminiProvider from './gemini';
-import GroqProvider from './groq';
-import DeepSeekProvider from './deepseek';
-import LMStudioProvider from './lmstudio';
-import LemonadeProvider from './lemonade';
-import AimlProvider from '@/lib/models/providers/aiml';
 
 export const providers: Record<string, ProviderConstructor<any>> = {
   openai: OpenAIProvider,
   ollama: OllamaProvider,
-  transformers: TransformersProvider,
-  anthropic: AnthropicProvider,
-  gemini: GeminiProvider,
-  groq: GroqProvider,
-  deepseek: DeepSeekProvider,
-  aiml: AimlProvider,
-  lmstudio: LMStudioProvider,
-  lemonade: LemonadeProvider,
 };
 
 export const getModelProvidersUIConfigSection =

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

@@ -1,10 +1,11 @@
-import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { Model, ModelList, ProviderMetadata } from '../types';
-import BaseModelProvider from './baseProvider';
-import { ChatOllama, OllamaEmbeddings } from '@langchain/ollama';
-import { Embeddings } from '@langchain/core/embeddings';
 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 BaseEmbedding from '../../base/embedding';
+import OllamaLLM from './ollamaLLM';
+import OllamaEmbedding from './ollamaEmbedding';
 
 interface OllamaConfig {
   baseURL: string;
@@ -76,7 +77,7 @@ class OllamaProvider extends BaseModelProvider<OllamaConfig> {
     };
   }
 
-  async loadChatModel(key: string): Promise<BaseChatModel> {
+  async loadChatModel(key: string): Promise<BaseLLM<any>> {
     const modelList = await this.getModelList();
 
     const exists = modelList.chat.find((m) => m.key === key);
@@ -87,14 +88,13 @@ class OllamaProvider extends BaseModelProvider<OllamaConfig> {
       );
     }
 
-    return new ChatOllama({
-      temperature: 0.7,
+    return new OllamaLLM({
+      baseURL: this.config.baseURL,
       model: key,
-      baseUrl: this.config.baseURL,
     });
   }
 
-  async loadEmbeddingModel(key: string): Promise<Embeddings> {
+  async loadEmbeddingModel(key: string): Promise<BaseEmbedding<any>> {
     const modelList = await this.getModelList();
     const exists = modelList.embedding.find((m) => m.key === key);
 
@@ -104,9 +104,9 @@ class OllamaProvider extends BaseModelProvider<OllamaConfig> {
       );
     }
 
-    return new OllamaEmbeddings({
+    return new OllamaEmbedding({
       model: key,
-      baseUrl: this.config.baseURL,
+      baseURL: this.config.baseURL,
     });
   }
 

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

@@ -0,0 +1,39 @@
+import { Ollama } from 'ollama';
+import BaseEmbedding from '../../base/embedding';
+
+type OllamaConfig = {
+  model: string;
+  baseURL?: string;
+};
+
+class OllamaEmbedding extends BaseEmbedding<OllamaConfig> {
+  ollamaClient: Ollama;
+
+  constructor(protected config: OllamaConfig) {
+    super(config);
+
+    this.ollamaClient = new Ollama({
+      host: this.config.baseURL || 'http://localhost:11434',
+    });
+  }
+
+  async embedText(texts: string[]): Promise<number[][]> {
+    const response = await this.ollamaClient.embed({
+      input: texts,
+      model: this.config.model,
+    });
+
+    return response.embeddings;
+  }
+
+  async embedChunks(chunks: Chunk[]): Promise<number[][]> {
+    const response = await this.ollamaClient.embed({
+      input: chunks.map((c) => c.content),
+      model: this.config.model,
+    });
+
+    return response.embeddings;
+  }
+}
+
+export default OllamaEmbedding;

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

@@ -0,0 +1,151 @@
+import z from 'zod';
+import BaseLLM from '../../base/llm';
+import {
+  GenerateObjectInput,
+  GenerateOptions,
+  GenerateTextInput,
+  GenerateTextOutput,
+  StreamTextOutput,
+} from '../../types';
+import { Ollama } from 'ollama';
+import { parse } from 'partial-json';
+
+type OllamaConfig = {
+  baseURL: string;
+  model: string;
+  options?: GenerateOptions;
+};
+
+class OllamaLLM extends BaseLLM<OllamaConfig> {
+  ollamaClient: Ollama;
+
+  constructor(protected config: OllamaConfig) {
+    super(config);
+
+    this.ollamaClient = new Ollama({
+      host: this.config.baseURL || 'http://localhost:11434',
+    });
+  }
+
+  withOptions(options: GenerateOptions) {
+    this.config.options = {
+      ...this.config.options,
+      ...options,
+    };
+    return this;
+  }
+
+  async generateText(input: GenerateTextInput): Promise<GenerateTextOutput> {
+    this.withOptions(input.options || {});
+
+    const res = await this.ollamaClient.chat({
+      model: this.config.model,
+      messages: input.messages,
+      options: {
+        top_p: this.config.options?.topP,
+        temperature: this.config.options?.temperature,
+        num_predict: this.config.options?.maxTokens,
+        frequency_penalty: this.config.options?.frequencyPenalty,
+        presence_penalty: this.config.options?.presencePenalty,
+        stop: this.config.options?.stopSequences,
+      },
+    });
+
+    return {
+      content: res.message.content,
+      additionalInfo: {
+        reasoning: res.message.thinking,
+      },
+    };
+  }
+
+  async *streamText(
+    input: GenerateTextInput,
+  ): AsyncGenerator<StreamTextOutput> {
+    this.withOptions(input.options || {});
+
+    const stream = await this.ollamaClient.chat({
+      model: this.config.model,
+      messages: input.messages,
+      stream: true,
+      options: {
+        top_p: this.config.options?.topP,
+        temperature: this.config.options?.temperature,
+        num_predict: this.config.options?.maxTokens,
+        frequency_penalty: this.config.options?.frequencyPenalty,
+        presence_penalty: this.config.options?.presencePenalty,
+        stop: this.config.options?.stopSequences,
+      },
+    });
+
+    for await (const chunk of stream) {
+      yield {
+        contentChunk: chunk.message.content,
+        done: chunk.done,
+        additionalInfo: {
+          reasoning: chunk.message.thinking,
+        },
+      };
+    }
+  }
+
+  async generateObject<T>(input: GenerateObjectInput): Promise<T> {
+    this.withOptions(input.options || {});
+
+    const response = await this.ollamaClient.chat({
+      model: this.config.model,
+      messages: input.messages,
+      format: z.toJSONSchema(input.schema),
+      think: false,
+      options: {
+        top_p: this.config.options?.topP,
+        temperature: 0,
+        num_predict: this.config.options?.maxTokens,
+        frequency_penalty: this.config.options?.frequencyPenalty,
+        presence_penalty: this.config.options?.presencePenalty,
+        stop: this.config.options?.stopSequences,
+      },
+    });
+
+    try {
+      return input.schema.parse(JSON.parse(response.message.content)) as T;
+    } catch (err) {
+      throw new Error(`Error parsing response from Ollama: ${err}`);
+    }
+  }
+
+  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,
+      format: z.toJSONSchema(input.schema),
+      stream: true,
+      think: false,
+      options: {
+        top_p: this.config.options?.topP,
+        temperature: this.config.options?.temperature,
+        num_predict: this.config.options?.maxTokens,
+        frequency_penalty: this.config.options?.frequencyPenalty,
+        presence_penalty: this.config.options?.presencePenalty,
+        stop: this.config.options?.stopSequences,
+      },
+    });
+
+    for await (const chunk of stream) {
+      recievedObj += chunk.message.content;
+
+      try {
+        yield parse(recievedObj) as T;
+      } catch (err) {
+        console.log('Error parsing partial object from Ollama:', err);
+        yield {} as T;
+      }
+    }
+  }
+}
+
+export default OllamaLLM;

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

@@ -1,10 +1,13 @@
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { Model, ModelList, ProviderMetadata } from '../types';
-import BaseModelProvider from './baseProvider';
-import { ChatOpenAI, OpenAIEmbeddings } from '@langchain/openai';
 import { Embeddings } from '@langchain/core/embeddings';
 import { UIConfigField } from '@/lib/config/types';
 import { getConfiguredModelProviderById } from '@/lib/config/serverRegistry';
+import { Model, ModelList, ProviderMetadata } from '../../types';
+import OpenAIEmbedding from './openaiEmbedding';
+import BaseEmbedding from '../../base/embedding';
+import BaseModelProvider from '../../base/provider';
+import BaseLLM from '../../base/llm';
+import OpenAILLM from './openaiLLM';
 
 interface OpenAIConfig {
   apiKey: string;
@@ -145,7 +148,7 @@ class OpenAIProvider extends BaseModelProvider<OpenAIConfig> {
     };
   }
 
-  async loadChatModel(key: string): Promise<BaseChatModel> {
+  async loadChatModel(key: string): Promise<BaseLLM<any>> {
     const modelList = await this.getModelList();
 
     const exists = modelList.chat.find((m) => m.key === key);
@@ -156,17 +159,14 @@ class OpenAIProvider extends BaseModelProvider<OpenAIConfig> {
       );
     }
 
-    return new ChatOpenAI({
+    return new OpenAILLM({
       apiKey: this.config.apiKey,
-      temperature: 0.7,
       model: key,
-      configuration: {
       baseURL: this.config.baseURL,
-      },
     });
   }
 
-  async loadEmbeddingModel(key: string): Promise<Embeddings> {
+  async loadEmbeddingModel(key: string): Promise<BaseEmbedding<any>> {
     const modelList = await this.getModelList();
     const exists = modelList.embedding.find((m) => m.key === key);
 
@@ -176,12 +176,10 @@ class OpenAIProvider extends BaseModelProvider<OpenAIConfig> {
       );
     }
 
-    return new OpenAIEmbeddings({
+    return new OpenAIEmbedding({
       apiKey: this.config.apiKey,
       model: key,
-      configuration: {
       baseURL: this.config.baseURL,
-      },
     });
   }
 

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

@@ -0,0 +1,41 @@
+import OpenAI from 'openai';
+import BaseEmbedding from '../../base/embedding';
+
+type OpenAIConfig = {
+  apiKey: string;
+  model: string;
+  baseURL?: string;
+};
+
+class OpenAIEmbedding extends BaseEmbedding<OpenAIConfig> {
+  openAIClient: OpenAI;
+
+  constructor(protected config: OpenAIConfig) {
+    super(config);
+
+    this.openAIClient = new OpenAI({
+      apiKey: config.apiKey,
+      baseURL: config.baseURL,
+    });
+  }
+
+  async embedText(texts: string[]): Promise<number[][]> {
+    const response = await this.openAIClient.embeddings.create({
+      model: this.config.model,
+      input: texts,
+    });
+
+    return response.data.map((embedding) => embedding.embedding);
+  }
+
+  async embedChunks(chunks: Chunk[]): Promise<number[][]> {
+    const response = await this.openAIClient.embeddings.create({
+      model: this.config.model,
+      input: chunks.map((c) => c.content),
+    });
+
+    return response.data.map((embedding) => embedding.embedding);
+  }
+}
+
+export default OpenAIEmbedding;

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

@@ -0,0 +1,163 @@
+import OpenAI from 'openai';
+import BaseLLM from '../../base/llm';
+import { zodTextFormat, zodResponseFormat } from 'openai/helpers/zod';
+import {
+  GenerateObjectInput,
+  GenerateOptions,
+  GenerateTextInput,
+  GenerateTextOutput,
+  StreamTextOutput,
+} from '../../types';
+import { parse } from 'partial-json';
+
+type OpenAIConfig = {
+  apiKey: string;
+  model: string;
+  baseURL?: string;
+  options?: GenerateOptions;
+};
+
+class OpenAILLM extends BaseLLM<OpenAIConfig> {
+  openAIClient: OpenAI;
+
+  constructor(protected config: OpenAIConfig) {
+    super(config);
+
+    this.openAIClient = new OpenAI({
+      apiKey: this.config.apiKey,
+      baseURL: this.config.baseURL || 'https://api.openai.com/v1',
+    });
+  }
+
+  withOptions(options: GenerateOptions) {
+    this.config.options = {
+      ...this.config.options,
+      ...options,
+    };
+
+    return this;
+  }
+
+  async generateText(input: GenerateTextInput): Promise<GenerateTextOutput> {
+    this.withOptions(input.options || {});
+
+    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,
+    });
+
+    if (response.choices && response.choices.length > 0) {
+      return {
+        content: response.choices[0].message.content!,
+        additionalInfo: {
+          finishReason: response.choices[0].finish_reason,
+        },
+      };
+    }
+
+    throw new Error('No response from OpenAI');
+  }
+
+  async *streamText(
+    input: GenerateTextInput,
+  ): AsyncGenerator<StreamTextOutput> {
+    this.withOptions(input.options || {});
+
+    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,
+      stream: true,
+    });
+
+    for await (const chunk of stream) {
+      if (chunk.choices && chunk.choices.length > 0) {
+        yield {
+          contentChunk: chunk.choices[0].delta.content || '',
+          done: chunk.choices[0].finish_reason !== null,
+          additionalInfo: {
+            finishReason: chunk.choices[0].finish_reason,
+          },
+        };
+      }
+    }
+  }
+
+  async generateObject<T>(input: GenerateObjectInput): Promise<T> {
+    this.withOptions(input.options || {});
+
+    const response = await this.openAIClient.chat.completions.parse({
+      messages: 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,
+      response_format: zodResponseFormat(input.schema, 'object'),
+    });
+
+    if (response.choices && response.choices.length > 0) {
+      try {
+        return input.schema.parse(response.choices[0].message.parsed) as T;
+      } catch (err) {
+        throw new Error(`Error parsing response from OpenAI: ${err}`);
+      }
+    }
+
+    throw new Error('No response from OpenAI');
+  }
+
+  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,
+      text: {
+        format: zodTextFormat(input.schema, 'object'),
+      },
+    });
+
+    for await (const chunk of stream) {
+      if (chunk.type === 'response.output_text.delta' && chunk.delta) {
+        recievedObj += chunk.delta;
+
+        try {
+          yield parse(recievedObj) as T;
+        } catch (err) {
+          console.log('Error parsing partial object from OpenAI:', err);
+          yield {} as T;
+        }
+      } else if (chunk.type === 'response.output_text.done' && chunk.text) {
+        try {
+          yield parse(chunk.text) as T;
+        } catch (err) {
+          throw new Error(`Error parsing response from OpenAI: ${err}`);
+        }
+      }
+    }
+  }
+}
+
+export default OpenAILLM;

src/lib/models/providers/transformers.ts

@@ -4,8 +4,7 @@ import BaseModelProvider from './baseProvider';
 import { Embeddings } from '@langchain/core/embeddings';
 import { UIConfigField } from '@/lib/config/types';
 import { getConfiguredModelProviderById } from '@/lib/config/serverRegistry';
-import { HuggingFaceTransformersEmbeddings } from '@/lib/huggingfaceTransformer';
-
+import { HuggingFaceTransformersEmbeddings } from '@langchain/community/embeddings/huggingface_transformers';
 interface TransformersConfig {}
 
 const defaultEmbeddingModels: Model[] = [

src/lib/models/types.ts

@@ -1,3 +1,5 @@
+import z from 'zod';
+
 type Model = {
   name: string;
   key: string;
@@ -25,10 +27,59 @@ type ModelWithProvider = {
   providerId: string;
 };
 
+type GenerateOptions = {
+  temperature?: number;
+  maxTokens?: number;
+  topP?: number;
+  stopSequences?: string[];
+  frequencyPenalty?: number;
+  presencePenalty?: number;
+};
+
+type GenerateTextInput = {
+  messages: Message[];
+  options?: GenerateOptions;
+};
+
+type GenerateTextOutput = {
+  content: string;
+  additionalInfo?: Record<string, any>;
+};
+
+type StreamTextOutput = {
+  contentChunk: string;
+  additionalInfo?: Record<string, any>;
+  done?: boolean;
+};
+
+type GenerateObjectInput = {
+  schema: z.ZodTypeAny;
+  messages: Message[];
+  options?: GenerateOptions;
+};
+
+type GenerateObjectOutput<T> = {
+  object: T;
+  additionalInfo?: Record<string, any>;
+};
+
+type StreamObjectOutput<T> = {
+  objectChunk: Partial<T>;
+  additionalInfo?: Record<string, any>;
+  done?: boolean;
+};
+
 export type {
   Model,
   ModelList,
   ProviderMetadata,
   MinimalProvider,
   ModelWithProvider,
+  GenerateOptions,
+  GenerateTextInput,
+  GenerateTextOutput,
+  StreamTextOutput,
+  GenerateObjectInput,
+  GenerateObjectOutput,
+  StreamObjectOutput,
 };

src/lib/prompts/media/image.ts

@@ -0,0 +1,26 @@
+import { BaseMessageLike } from "@langchain/core/messages";
+
+export const imageSearchPrompt = `
+You will be given a conversation below and a follow up question. You need to rephrase the follow-up question so it is a standalone question that can be used by the LLM to search the web for images.
+You need to make sure the rephrased question agrees with the conversation and is relevant to the conversation.
+Output only the rephrased query wrapped in an XML <query> element. Do not include any explanation or additional text.
+`;
+
+export const imageSearchFewShots: BaseMessageLike[] = [
+    [
+        'user',
+        '<conversation>\n</conversation>\n<follow_up>\nWhat is a cat?\n</follow_up>',
+    ],
+    ['assistant', '<query>A cat</query>'],
+
+    [
+        'user',
+        '<conversation>\n</conversation>\n<follow_up>\nWhat is a car? How does it work?\n</follow_up>',
+    ],
+    ['assistant', '<query>Car working</query>'],
+    [
+        'user',
+        '<conversation>\n</conversation>\n<follow_up>\nHow does an AC work?\n</follow_up>',
+    ],
+    ['assistant', '<query>AC working</query>']
+]

src/lib/prompts/media/videos.ts

@@ -0,0 +1,25 @@
+import { BaseMessageLike } from "@langchain/core/messages";
+
+export const videoSearchPrompt = `
+You will be given a conversation below and a follow up question. You need to rephrase the follow-up question so it is a standalone question that can be used by the LLM to search Youtube for videos.
+You need to make sure the rephrased question agrees with the conversation and is relevant to the conversation.
+Output only the rephrased query wrapped in an XML <query> element. Do not include any explanation or additional text.
+`;
+
+export const videoSearchFewShots: BaseMessageLike[] = [
+    [
+        'user',
+        '<conversation>\n</conversation>\n<follow_up>\nHow does a car work?\n</follow_up>',
+    ],
+    ['assistant', '<query>How does a car work?</query>'],
+    [
+        'user',
+        '<conversation>\n</conversation>\n<follow_up>\nWhat is the theory of relativity?\n</follow_up>',
+    ],
+    ['assistant', '<query>Theory of relativity</query>'],
+    [
+        'user',
+        '<conversation>\n</conversation>\n<follow_up>\nHow does an AC work?\n</follow_up>',
+    ],
+    ['assistant', '<query>AC working</query>'],
+]

src/lib/prompts/search/classifier.ts

@@ -0,0 +1,176 @@
+export const getClassifierPrompt = (input: {
+  intentDesc: string;
+  widgetDesc: string;
+}) => {
+  return `
+<role>
+You are an expert query classifier for an intelligent search agent. Your task is to analyze user queries and determine the optimal way to answer them—selecting the right intent(s) and widgets.
+</role>
+
+<task>
+Given a conversation history and follow-up question, you must:
+1. Determine if search should be skipped (skipSearch: boolean)
+2. Generate a standalone, self-contained version of the question (standaloneFollowUp: string)
+3. Identify the intent(s) that describe how to fulfill the query (intent: array)
+4. Select appropriate widgets (widgets: array)
+</task>
+
+<critical_decision_rule>
+**THE MOST IMPORTANT RULE**: skipSearch should be TRUE only in TWO cases:
+1. Widget-only queries (weather, stocks, calculator)
+2. Greetings or simple writing tasks (NOT questions)
+
+**DEFAULT TO skipSearch: false** for everything else, including:
+- Any question ("what is", "how does", "explain", "tell me about")
+- Any request for information or facts
+- Anything you're unsure about
+
+Ask yourself: "Is the user ASKING about something or requesting INFORMATION?"
+- YES → skipSearch: false (use web_search)
+- NO (just greeting or simple writing) → skipSearch: true
+</critical_decision_rule>
+
+<skip_search_decision_tree>
+Follow this decision tree IN ORDER:
+
+1. **Widget-Only Queries** → skipSearch: TRUE, intent: ['widget_response']
+   - Weather queries: "weather in NYC", "temperature in Paris", "is it raining in Seattle"
+   - Stock queries: "AAPL stock price", "how is Tesla doing", "MSFT stock"
+   - Calculator queries: "what is 25% of 80", "calculate 15*23", "sqrt(144)"
+   - These are COMPLETE answers—no search needed
+
+2. **Writing/Greeting Tasks** → skipSearch: TRUE, intent: ['writing_task']
+   - ONLY for greetings and simple writing:
+   - Greetings: "hello", "hi", "how are you", "thanks", "goodbye"
+   - Simple writing needing NO facts: "write a thank you email", "draft a birthday message", "compose a poem"
+   - NEVER for: questions, "what is X", "how does X work", explanations, definitions, facts, code help
+   - If user is ASKING about something (not requesting writing), use web_search
+
+3. **Image Display Queries** → skipSearch: FALSE, intent: ['image_preview']
+   - "Show me images of cats"
+   - "Pictures of the Eiffel Tower"
+   - "Visual examples of modern architecture"
+   - Requests for images to visualize something
+
+4. **Widget + Additional Info** → skipSearch: FALSE, intent: ['web_search', 'widget_response']
+   - "weather in NYC and best things to do there"
+   - "AAPL stock and recent Apple news"
+   - "calculate my mortgage and explain how interest works"
+
+5. **Pure Search Queries** → skipSearch: FALSE
+   - Default to web_search for general questions
+   - Use discussions_search when user explicitly mentions Reddit, forums, opinions, experiences
+   - Use academic_search when user explicitly mentions research, papers, studies, scientific
+   - Can combine multiple search intents when appropriate
+
+6. **Fallback when web_search unavailable** → skipSearch: TRUE, intent: ['writing_task'] or []
+   - If no search intents are available and no widgets apply
+   - Set skipSearch to true and use writing_task or empty intent
+</skip_search_decision_tree>
+
+<examples>
+Example 1: Widget-only query
+Query: "What is the weather in New York?"
+Reasoning: User wants current weather → weather widget provides this completely
+Output: skipSearch: true, intent: ['widget_response'], widgets: [weather widget for New York]
+
+Example 2: Widget-only query
+Query: "AAPL stock price"
+Reasoning: User wants stock price → stock_ticker widget provides this completely
+Output: skipSearch: true, intent: ['widget_response'], widgets: [stock_ticker for AAPL]
+
+Example 3: Widget + search query
+Query: "What's the weather in NYC and what are some good outdoor activities?"
+Reasoning: Weather widget handles weather, but outdoor activities need web search
+Output: skipSearch: false, intent: ['web_search', 'widget_response'], widgets: [weather widget for NYC]
+
+Example 4: Pure search query
+Query: "What are the latest developments in AI?"
+Reasoning: No widget applies, needs current web information
+Output: skipSearch: false, intent: ['web_search'], widgets: []
+
+Example 5: Writing task (greeting/simple writing only)
+Query: "Write me a thank you email for a job interview"
+Reasoning: Simple writing task needing no external facts → writing_task
+Output: skipSearch: true, intent: ['writing_task'], widgets: []
+
+Example 5b: Question about something - ALWAYS needs search
+Query: "What is Kimi K2?"
+Reasoning: User is ASKING about something → needs web search for accurate info
+Output: skipSearch: false, intent: ['web_search'], widgets: []
+
+Example 5c: Another question - needs search
+Query: "Explain how photosynthesis works"
+Reasoning: User is ASKING for explanation → needs web search
+Output: skipSearch: false, intent: ['web_search'], widgets: []
+
+Example 6: Image display
+Query: "Show me images of cats"
+Reasoning: User wants to see images → requires image search
+Output: skipSearch: false, intent: ['image_preview'], widgets: []
+
+Example 7: Multiple search sources
+Query: "What does the research say about meditation benefits?"
+Reasoning: Benefits from both academic papers and web articles
+Output: skipSearch: false, intent: ['academic_search', 'web_search'], widgets: []
+
+Example 8: Discussions search
+Query: "What do people on Reddit think about the new iPhone?"
+Reasoning: User explicitly wants forum/community opinions → discussions_search
+Output: skipSearch: false, intent: ['discussions_search'], widgets: []
+
+Example 9: Academic search only
+Query: "Find scientific papers on climate change effects"
+Reasoning: User explicitly wants academic/research papers
+Output: skipSearch: false, intent: ['academic_search'], widgets: []
+</examples>
+
+<standalone_follow_up_guidelines>
+Transform the follow-up into a self-contained question:
+- Include ALL necessary context from chat history
+- Replace pronouns (it, they, this, that) with specific nouns
+- Replace references ("the previous one", "what you mentioned") with actual content
+- Preserve the original complexity—don't over-elaborate simple questions
+- The question should be answerable without seeing the conversation
+</standalone_follow_up_guidelines>
+
+<intent_selection_rules>
+Available intents:
+${input.intentDesc}
+
+Rules:
+- Include at least one intent when applicable
+- For questions/information requests:
+  - Default to web_search unless user explicitly requests another source
+  - Use discussions_search when user mentions: Reddit, forums, opinions, experiences, "what do people think"
+  - Use academic_search when user mentions: research, papers, studies, scientific, scholarly
+  - Can combine intents (e.g., ['academic_search', 'web_search'])
+- If web_search is NOT in available intents and query needs search:
+  - Check if discussions_search or academic_search applies
+  - If no search intent available and no widgets: use writing_task or empty array []
+- private_search: ONLY when user provides specific URLs/documents
+- widget_response: when widgets fully answer the query
+- writing_task: ONLY for greetings and simple writing (never for questions)
+</intent_selection_rules>
+
+<widget_selection_rules>
+Available widgets:
+${input.widgetDesc}
+
+Rules:
+- Include ALL applicable widgets regardless of skipSearch value
+- Each widget type can only be included once
+- Widgets provide structured, real-time data that enhances any response
+</widget_selection_rules>
+
+<output_format>
+Your classification must be precise and consistent:
+{
+    "skipSearch": <true|false>,
+    "standaloneFollowUp": "<self-contained question>",
+    "intent": [<array of selected intents>],
+    "widgets": [<array of selected widgets>]
+}
+</output_format>
+    `;
+};

src/lib/prompts/suggestions/index.ts

@@ -0,0 +1,15 @@
+export const suggestionGeneratorPrompt = `
+You are an AI suggestion generator for an AI powered search engine. You will be given a conversation below. You need to generate 4-5 suggestions based on the conversation. The suggestion should be relevant to the conversation that can be used by the user to ask the chat model for more information.
+You need to make sure the suggestions are relevant to the conversation and are helpful to the user. Keep a note that the user might use these suggestions to ask a chat model for more information. 
+Make sure the suggestions are medium in length and are informative and relevant to the conversation.
+
+Provide these suggestions separated by newlines between the XML tags <suggestions> and </suggestions>. For example:
+
+<suggestions>
+Tell me more about SpaceX and their recent projects
+What is the latest news on SpaceX?
+Who is the CEO of SpaceX?
+</suggestions>
+
+Today's date is ${new Date().toISOString()}
+`;

src/lib/session.ts

@@ -0,0 +1,45 @@
+import { EventEmitter } from 'stream';
+/* todo implement history saving and better artifact typing and handling */
+class SessionManager {
+  private static sessions = new Map<string, SessionManager>();
+  readonly id: string;
+  private artifacts = new Map<string, Artifact>();
+  private emitter = new EventEmitter();
+
+  constructor() {
+    this.id = crypto.randomUUID();
+  }
+
+  static getSession(id: string): SessionManager | undefined {
+    return this.sessions.get(id);
+  }
+
+  static getAllSessions(): SessionManager[] {
+    return Array.from(this.sessions.values());
+  }
+
+  emit(event: string, data: any) {
+    this.emitter.emit(event, data);
+  }
+
+  emitArtifact(artifact: Artifact) {
+    this.artifacts.set(artifact.id, artifact);
+    this.emitter.emit('addArtifact', artifact);
+  }
+
+  appendToArtifact(artifactId: string, data: any) {
+    const artifact = this.artifacts.get(artifactId);
+    if (artifact) {
+      if (typeof artifact.data === 'string') {
+        artifact.data += data;
+      } else if (Array.isArray(artifact.data)) {
+        artifact.data.push(data);
+      } else if (typeof artifact.data === 'object') {
+        Object.assign(artifact.data, data);
+      }
+      this.emitter.emit('updateArtifact', artifact);
+    }
+  }
+}
+
+export default SessionManager;

src/lib/types.ts

@@ -0,0 +1,15 @@
+type Message = {
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+};
+
+type Chunk = {
+  content: string;
+  metadata: Record<string, any>;
+};
+
+type Artifact = {
+  id: string;
+  type: string;
+  data: any;
+};

yarn.lock

@@ -746,19 +746,19 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@langchain/anthropic@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@langchain/anthropic/-/anthropic-1.0.0.tgz#48535c5682851bf8fddcf37aa7ca78d4d93da932"
-  integrity sha512-Lud/FrkFmXMYW5R9y0FC+RGdgjBBVQ2JAnG3A8E1I4+sqv5JgJttw3HKRpFkyBUSyacs6LMfSn5dbJ6TT9nMiQ==
+"@langchain/anthropic@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@langchain/anthropic/-/anthropic-1.0.1.tgz#a9f836b11ecbce282fc2afb8d707c52fd37711c4"
+  integrity sha512-yVKePAT+nNHtybyyPlWqiq6lqcoDlIuMgL9B4WMEU5gbmzL170iodiqcgcZNFQLOC1V2wCOzywq6Zr0kB24AFg==
   dependencies:
     "@anthropic-ai/sdk" "^0.65.0"
 
-"@langchain/classic@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@langchain/classic/-/classic-1.0.0.tgz#acbc15eebba03499cf93e73d2c93703a3da0a46e"
-  integrity sha512-darZFvO5g5e3TqZ4rvZ938F94D4a34v2ZdWfyipmyu7WB4RXMshmYtWCp98o4ec3bfRD9S4+oHMmaPcnk5cs5A==
+"@langchain/classic@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@langchain/classic/-/classic-1.0.3.tgz#92482cb4cb8692407b4ecde0df312f035934472f"
+  integrity sha512-XyoaiJSi4y7SzrZMCb3DdDfC+M3gqIQpVH2cOCh9xQf4244jNrncpLXF/MwOJYWxzTsjfcCAHIbFJ0kSH5nqmg==
   dependencies:
-    "@langchain/openai" "1.0.0-alpha.3"
+    "@langchain/openai" "1.1.1"
     "@langchain/textsplitters" "1.0.0"
     handlebars "^4.7.8"
     js-yaml "^4.1.0"
@@ -771,24 +771,24 @@
   optionalDependencies:
     langsmith "^0.3.64"
 
-"@langchain/community@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@langchain/community/-/community-1.0.0.tgz#8e587605b7c981882e20281aa9e644a166620145"
-  integrity sha512-CM4vUZHaFHq8HpWBMIWPO5bo/rmRPJ1/iaJk7s8CghkkQ0WLaZzDtoG/wJKJZMDJOUVCtZKTw+TytlGu00/9dg==
+"@langchain/community@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@langchain/community/-/community-1.0.3.tgz#278c82eee22ff37b120e182b07b7c23ffc6786ab"
+  integrity sha512-86L7qooSY8Fh5Sf2Tu/X8PvDJqvEXohyZUGusuv0XtnWGivwtecBm0vEbVPkLF07I2ZMtyAGzHJOblbveq6Nmg==
   dependencies:
-    "@langchain/classic" "1.0.0"
-    "@langchain/openai" "1.0.0"
+    "@langchain/classic" "1.0.3"
+    "@langchain/openai" "1.1.1"
     binary-extensions "^2.2.0"
-    expr-eval "^2.0.2"
     flat "^5.0.2"
     js-yaml "^4.1.0"
+    math-expression-evaluator "^2.0.0"
     uuid "^10.0.0"
     zod "^3.25.76 || ^4"
 
-"@langchain/core@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@langchain/core/-/core-1.0.1.tgz#c2bdbdff87649fe17b2c86bf535d749ac73a586c"
-  integrity sha512-hVM3EkojYOk4ISJQKjLuWYSH6kyyOFlZIrLFETDA1L0Z2/Iu0q32aJawZ0FDn6rlXE8QZjBt/9OaOL36rXc05w==
+"@langchain/core@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@langchain/core/-/core-1.0.5.tgz#1e20ecce80fa4d0b979ea05b24b879b8357d8092"
+  integrity sha512-9Hy/b9+j+mm0Bhnm8xD9B0KpBYTidroLrDHdbrHoMC2DqXoY2umvi1M3M/9D744qsMSaIMP0ZwFcy5YbqI/dGw==
   dependencies:
     "@cfworker/json-schema" "^4.0.2"
     ansi-styles "^5.0.0"
@@ -802,18 +802,18 @@
     uuid "^10.0.0"
     zod "^3.25.76 || ^4"
 
-"@langchain/google-genai@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@langchain/google-genai/-/google-genai-1.0.0.tgz#2785fa163788cb6214dffc1dc29fcd5bbb751493"
-  integrity sha512-ICUBZl/46nG6+Yhe5v7kp/2TQBGOzqEkpfKPLDeNyJ4x9OOL46xsW3ZZrHJjhGMQuR6/JMmQMTU9kLoYgsd1Tg==
+"@langchain/google-genai@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@langchain/google-genai/-/google-genai-1.0.1.tgz#3601645f652f24e3beb55acc61878070b49c24ed"
+  integrity sha512-a9Bzaswp1P+eA2V8hAWSBypqjxmH+/zhOY1TBdalQuPQBTRH35jBMVgX3CTTAheAzBUGQtlDD4/dR9tyemDbhw==
   dependencies:
     "@google/generative-ai" "^0.24.0"
     uuid "^11.1.0"
 
-"@langchain/groq@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@langchain/groq/-/groq-1.0.0.tgz#413b02158761ff406238467325cd4f9fe0990f3a"
-  integrity sha512-6fG9MEQHNXnxgObFHSPh+BPYyTGcoDnKd+GhI9l96cpHh+QNI+IvypicRCZVSsLdqzRCFHISvBQaH+SP5vgjIw==
+"@langchain/groq@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@langchain/groq/-/groq-1.0.1.tgz#7ec8822cd2f29eef4ae0f9c20f67268d1924ab96"
+  integrity sha512-vDQzv6A3mjG0/W/7vL4Iq+dnmhSbMHln+b7Rna810trjZzfNPZhAP6omqZyzCKIqjsQYUH4ODLnSUCNiarfYsQ==
   dependencies:
     groq-sdk "^0.19.0"
 
@@ -842,30 +842,30 @@
     "@langchain/langgraph-sdk" "~1.0.0"
     uuid "^10.0.0"
 
-"@langchain/ollama@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@langchain/ollama/-/ollama-1.0.0.tgz#803c353e9dfb1a9e7b20f1460a6a201fec29bb77"
-  integrity sha512-zqn6i7haMjvZW4FQWo0GrF4wYL5mLurdL0qoe+moYWYSCGaay4K7e/4dqM5C/MR16/HPFDzFbBRMkni2PDRBgA==
+"@langchain/langgraph@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@langchain/langgraph/-/langgraph-1.0.1.tgz#d0be714653e8a27665f86ea795c5c34189455406"
+  integrity sha512-7y8OTDLrHrpJ55Y5x7c7zU2BbqNllXwxM106Xrd+NaQB5CpEb4hbUfIwe4XmhhscKPwvhXAq3tjeUxw9MCiurQ==
+  dependencies:
+    "@langchain/langgraph-checkpoint" "^1.0.0"
+    "@langchain/langgraph-sdk" "~1.0.0"
+    uuid "^10.0.0"
+
+"@langchain/ollama@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@langchain/ollama/-/ollama-1.0.1.tgz#c63ac6db65110beef4020a5e2b167ad0bc678d33"
+  integrity sha512-Pe32hhTpMvnRlNFJxkdu6r1QzsONGz5uvoLiMU1TpgAUu7EyKr2osymlgjBLqDe2vMKUmqHb+yWRH0IppDBUOg==
   dependencies:
     ollama "^0.5.12"
     uuid "^10.0.0"
 
-"@langchain/openai@1.0.0", "@langchain/openai@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@langchain/openai/-/openai-1.0.0.tgz#03b15312286b30ce0149f6052620c6c95b4387bc"
-  integrity sha512-olKEUIjb3HBOiD/NR056iGJz4wiN6HhQ/u65YmGWYadWWoKOcGwheBw/FE0x6SH4zDlI3QmP+vMhuQoaww19BQ==
+"@langchain/openai@1.1.1", "@langchain/openai@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@langchain/openai/-/openai-1.1.1.tgz#67ddcf54ee7ac402f6b75b4b9e25447e78c56a93"
+  integrity sha512-0kUaXejo/sn6QAohWHDaAUapC4CJRkJIajGaWfJC+llSqpDBnmBE1oHg1M2fi1OCeP+ns9SxB6BTsq4Qbiqmig==
   dependencies:
     js-tiktoken "^1.0.12"
-    openai "^6.3.0"
-    zod "^3.25.76 || ^4"
-
-"@langchain/openai@1.0.0-alpha.3":
-  version "1.0.0-alpha.3"
-  resolved "https://registry.yarnpkg.com/@langchain/openai/-/openai-1.0.0-alpha.3.tgz#35c4e770e3421b75a226087af54fbeff147e201a"
-  integrity sha512-re2NXLYeLatPzoB6YRoFgB1fW6i5ygcLGa7PlNOhi3f93uU1vSlWMgjkO9dcN9ALmr/bhoruqJEn7U0Eva+6/w==
-  dependencies:
-    js-tiktoken "^1.0.12"
-    openai "^6.3.0"
+    openai "^6.9.0"
     zod "^3.25.76 || ^4"
 
 "@langchain/textsplitters@1.0.0", "@langchain/textsplitters@^1.0.0":
@@ -2607,11 +2607,6 @@ expand-template@^2.0.3:
   resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c"
   integrity sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==
 
-expr-eval@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/expr-eval/-/expr-eval-2.0.2.tgz#fa6f044a7b0c93fde830954eb9c5b0f7fbc7e201"
-  integrity sha512-4EMSHGOPSwAfBiibw3ndnP0AvjDWLsMvGOvWEZ2F96IGk0bIVdjQisOHxReSkE13mHcfbuCiXw+G4y0zv6N8Eg==
-
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -3514,17 +3509,16 @@ kuler@^2.0.0:
   resolved "https://registry.yarnpkg.com/kuler/-/kuler-2.0.0.tgz#e2c570a3800388fb44407e851531c1d670b061b3"
   integrity sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==
 
-langchain@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/langchain/-/langchain-1.0.1.tgz#fb181176f4aa443ef02e9e5b563bcb4e170dfeb6"
-  integrity sha512-IT4JBVbKBh2AjaUFT9OsmOfeK3UbKy3SgdzZOuvet25sAaMpAR8IaM9XVddRs+OXQqVg6sOS01KUUVCJksVhHg==
+langchain@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/langchain/-/langchain-1.0.4.tgz#c4fa22d927f41d56c356ecfccea5c08ae7b682ef"
+  integrity sha512-g7z2kKvnXOecybbVGHfI2ZmdmP309mxC1FYlq6WC/7RsKgX5MwY9gBjwK16mpKOaozOD9QCo1Ia7o2UcUBRb9Q==
   dependencies:
     "@langchain/langgraph" "^1.0.0"
     "@langchain/langgraph-checkpoint" "^1.0.0"
+    langsmith "~0.3.74"
     uuid "^10.0.0"
     zod "^3.25.76 || ^4"
-  optionalDependencies:
-    langsmith "^0.3.64"
 
 langsmith@^0.3.64:
   version "0.3.74"
@@ -3539,6 +3533,19 @@ langsmith@^0.3.64:
     semver "^7.6.3"
     uuid "^10.0.0"
 
+langsmith@~0.3.74:
+  version "0.3.79"
+  resolved "https://registry.yarnpkg.com/langsmith/-/langsmith-0.3.79.tgz#6c845644da26e7fdd8e9b80706091669fc43bda4"
+  integrity sha512-j5uiAsyy90zxlxaMuGjb7EdcL51Yx61SpKfDOI1nMPBbemGju+lf47he4e59Hp5K63CY8XWgFP42WeZ+zuIU4Q==
+  dependencies:
+    "@types/uuid" "^10.0.0"
+    chalk "^4.1.2"
+    console-table-printer "^2.12.1"
+    p-queue "^6.6.2"
+    p-retry "4"
+    semver "^7.6.3"
+    uuid "^10.0.0"
+
 language-subtag-registry@^0.3.20:
   version "0.3.22"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
@@ -3686,6 +3693,11 @@ matcher@^3.0.0:
   dependencies:
     escape-string-regexp "^4.0.0"
 
+math-expression-evaluator@^2.0.0:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-2.0.7.tgz#dc99a80ce2bf7f9b7df878126feb5c506c1fdf5f"
+  integrity sha512-uwliJZ6BPHRq4eiqNWxZBDzKUiS5RIynFFcgchqhBOloVLVBpZpNG8jRYkedLcBvhph8TnRyWEuxPqiQcwIdog==
+
 math-intrinsics@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
@@ -4025,10 +4037,10 @@ onnxruntime-web@1.22.0-dev.20250409-89f8206ba4:
     platform "^1.3.6"
     protobufjs "^7.2.4"
 
-openai@^6.3.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/openai/-/openai-6.5.0.tgz#7dd9c4c0ca6e394c1d1e738b2000e084024685b2"
-  integrity sha512-bNqJ15Ijbs41KuJ2iYz/mGAruFHzQQt7zXo4EvjNLoB64aJdgn1jlMeDTsXjEg+idVYafg57QB/5Rd16oqvZ6A==
+openai@^6.9.0:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/openai/-/openai-6.9.0.tgz#acd15b2233c42b165981f3de8f4cfce27f844fce"
+  integrity sha512-n2sJRYmM+xfJ0l3OfH8eNnIyv3nQY7L08gZQu3dw6wSdfPtKAk92L83M2NIP5SS8Cl/bsBBG3yKzEOjkx0O+7A==
 
 openapi-types@^12.1.3:
   version "12.1.3"
@@ -5491,12 +5503,7 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-zod@^3.22.4:
-  version "3.22.4"
-  resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
-  integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==
-
-"zod@^3.25.76 || ^4":
+"zod@^3.25.76 || ^4", zod@^4.1.12:
   version "4.1.12"
   resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.12.tgz#64f1ea53d00eab91853195653b5af9eee68970f0"
   integrity sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==