Compare commits

..

3 Commits

Author SHA1 Message Date
a40c7f6aa2 Merge 78cf3f9d5f into 7ec201d011 2025-02-07 15:38:49 +08:00
78cf3f9d5f test2 2025-02-02 12:20:25 +02:00
7844ca9343 zizo 2025-02-02 12:14:15 +02:00
48 changed files with 1419 additions and 1665 deletions

View File

@ -1,23 +1,8 @@
# 🚀 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/>
[![Discord](https://dcbadge.vercel.app/api/server/26aArMy8tT?style=flat&compact=true)](https://discord.gg/26aArMy8tT)
![preview](.assets/perplexica-screenshot.png?)
## Table of Contents <!-- omit in toc -->
@ -59,7 +44,7 @@ Want to know more about its architecture and how it works? You can read it [here
- **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.
- **Writing Assistant Mode:** Helpful for writing tasks that does 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.
@ -158,7 +143,6 @@ You can access Perplexica over your home network by following our networking gui
## One-Click Deployment
[![Deploy to Sealos](https://raw.githubusercontent.com/labring-actions/templates/main/Deploy-on-Sealos.svg)](https://usw.sealos.io/?openapp=system-template%3FtemplateName%3Dperplexica)
[![Deploy to RepoCloud](https://d16t0pc4846x52.cloudfront.net/deploylobe.svg)](https://repocloud.io/details/?app_id=267)
## Upcoming Features

View File

@ -7,43 +7,34 @@ To update Perplexica to the latest version, follow these steps:
1. Clone the latest version of Perplexica from GitHub:
```bash
git clone https://github.com/ItzCrazyKns/Perplexica.git
git clone https://github.com/ItzCrazyKns/Perplexica.git
```
2. Navigate to the project directory.
2. Navigate to the Project Directory.
3. Check for changes in the configuration files. If the `sample.config.toml` file contains new fields, delete your existing `config.toml` file, rename `sample.config.toml` to `config.toml`, and update the configuration accordingly.
4. Pull the latest images from the registry.
3. Pull latest images from registry.
```bash
docker compose pull
```
5. Update and recreate the containers.
4. Update and Recreate containers.
```bash
docker compose up -d
```
6. Once the command completes, go to http://localhost:3000 and verify the latest changes.
5. Once the command completes running go to http://localhost:3000 and verify the latest changes.
## For non-Docker users
## For non Docker users
1. Clone the latest version of Perplexica from GitHub:
```bash
git clone https://github.com/ItzCrazyKns/Perplexica.git
git clone https://github.com/ItzCrazyKns/Perplexica.git
```
2. Navigate to the project directory.
3. Check for changes in the configuration files. If the `sample.config.toml` file contains new fields, delete your existing `config.toml` file, rename `sample.config.toml` to `config.toml`, and update the configuration accordingly.
4. Execute `npm i` in both the `ui` folder and the root directory.
5. Once the packages are updated, execute `npm run build` in both the `ui` folder and the root directory.
6. Finally, start both the frontend and the backend by running `npm run start` in both the `ui` folder and the root directory.
---
2. Navigate to the Project Directory
3. Execute `npm i` in both the `ui` folder and the root directory.
4. Once packages are updated, execute `npm run build` in both the `ui` folder and the root directory.
5. Finally, start both the frontend and the backend by running `npm run start` in both the `ui` folder and the root directory.

View File

@ -1,6 +1,6 @@
{
"name": "perplexica-backend",
"version": "1.10.0-rc3",
"version": "1.10.0-rc2",
"license": "MIT",
"author": "ItzCrazyKns",
"scripts": {

117
project_structure.txt Normal file
View File

@ -0,0 +1,117 @@
.
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── app.dockerfile
├── backend.dockerfile
├── config.toml
├── data
├── docker-compose.yaml
├── docs
│   ├── API
│   │   └── SEARCH.md
│   ├── architecture
│   │   ├── README.md
│   │   └── WORKING.md
│   └── installation
│   ├── NETWORKING.md
│   └── UPDATING.md
├── drizzle.config.ts
├── package.json
├── project_structure.txt
├── searxng
│   ├── limiter.toml
│   ├── settings.yml
│   └── uwsgi.ini
├── src
│   ├── app.ts
│   ├── chains
│   │   ├── imageSearchAgent.ts
│   │   ├── suggestionGeneratorAgent.ts
│   │   └── videoSearchAgent.ts
│   ├── config.ts
│   ├── db
│   │   ├── index.ts
│   │   └── schema.ts
│   ├── lib
│   │   ├── huggingfaceTransformer.ts
│   │   ├── outputParsers
│   │   ├── providers
│   │   └── searxng.ts
│   ├── prompts
│   │   ├── academicSearch.ts
│   │   ├── index.ts
│   │   ├── redditSearch.ts
│   │   ├── webSearch.ts
│   │   ├── wolframAlpha.ts
│   │   ├── writingAssistant.ts
│   │   └── youtubeSearch.ts
│   ├── routes
│   │   ├── chats.ts
│   │   ├── config.ts
│   │   ├── discover.ts
│   │   ├── images.ts
│   │   ├── index.ts
│   │   ├── models.ts
│   │   ├── search.ts
│   │   ├── suggestions.ts
│   │   ├── uploads.ts
│   │   └── videos.ts
│   ├── search
│   │   └── metaSearchAgent.ts
│   ├── utils
│   │   ├── computeSimilarity.ts
│   │   ├── documents.ts
│   │   ├── files.ts
│   │   ├── formatHistory.ts
│   │   └── logger.ts
│   └── websocket
│   ├── connectionManager.ts
│   ├── index.ts
│   ├── messageHandler.ts
│   └── websocketServer.ts
├── tsconfig.json
├── ui
│   ├── app
│   │   ├── c
│   │   ├── discover
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   ├── library
│   │   └── page.tsx
│   ├── components
│   │   ├── Chat.tsx
│   │   ├── ChatWindow.tsx
│   │   ├── DeleteChat.tsx
│   │   ├── EmptyChat.tsx
│   │   ├── EmptyChatMessageInput.tsx
│   │   ├── Layout.tsx
│   │   ├── MessageActions
│   │   ├── MessageBox.tsx
│   │   ├── MessageBoxLoading.tsx
│   │   ├── MessageInput.tsx
│   │   ├── MessageInputActions
│   │   ├── MessageSources.tsx
│   │   ├── Navbar.tsx
│   │   ├── SearchImages.tsx
│   │   ├── SearchVideos.tsx
│   │   ├── SettingsDialog.tsx
│   │   ├── Sidebar.tsx
│   │   └── theme
│   ├── lib
│   │   ├── actions.ts
│   │   └── utils.ts
│   ├── next.config.mjs
│   ├── package.json
│   ├── postcss.config.js
│   ├── public
│   │   ├── next.svg
│   │   └── vercel.svg
│   ├── tailwind.config.ts
│   ├── tsconfig.json
│   └── yarn.lock
├── uploads
└── yarn.lock
30 directories, 85 files

View File

@ -1,31 +0,0 @@
[GENERAL]
PORT = 3001 # Port to run the server on
SIMILARITY_MEASURE = "cosine" # "cosine" or "dot"
CONFIG_PASSWORD = "lorem_ipsum" # Password to access config
DISCOVER_ENABLED = true
LIBRARY_ENABLED = true
COPILOT_ENABLED = true
KEEP_ALIVE = "5m" # How long to keep Ollama models loaded into memory. (Instead of using -1 use "-1m")
[MODELS.OPENAI]
API_KEY = ""
[MODELS.GROQ]
API_KEY = ""
[MODELS.ANTHROPIC]
API_KEY = ""
[MODELS.GEMINI]
API_KEY = ""
[MODELS.CUSTOM_OPENAI]
API_KEY = ""
API_URL = ""
MODEL_NAME = ""
[MODELS.OLLAMA]
API_URL = "" # Ollama API URL - http://host.docker.internal:11434
[API_ENDPOINTS]
SEARXNG = "http://localhost:32768" # SearxNG API URL

View File

@ -15,24 +15,42 @@ const corsOptions = {
origin: '*',
};
logger.info(`🚀 Initializing Server Setup...`);
logger.info(`🛠 CORS Policy Applied: ${JSON.stringify(corsOptions)}`);
app.use(cors(corsOptions));
app.use(express.json());
// ✅ Middleware to log incoming requests
app.use((req, res, next) => {
logger.info(`📩 API Request - ${req.method} ${req.originalUrl}`);
next();
});
logger.info(`✅ API Routes Initialized`);
app.use('/api', routes);
app.get('/api', (_, res) => {
logger.info(`🟢 Health Check Endpoint Hit`);
res.status(200).json({ status: 'ok' });
});
// ✅ Log when the server starts listening
server.listen(port, () => {
logger.info(`Server is running on port ${port}`);
logger.info(`Server is running on port ${port}`);
});
// ✅ Log WebSocket Initialization
logger.info(`📡 Starting WebSocket Server...`);
startWebSocketServer(server);
// ✅ Better Logging for Uncaught Errors
process.on('uncaughtException', (err, origin) => {
logger.error(`Uncaught Exception at ${origin}: ${err}`);
logger.error(`🔥 Uncaught Exception at ${origin}: ${err.message}`);
logger.error(err.stack);
});
process.on('unhandledRejection', (reason, promise) => {
logger.error(`Unhandled Rejection at: ${promise}, reason: ${reason}`);
logger.error(`🚨 Unhandled Rejection at: ${promise}`);
logger.error(`💥 Reason: ${reason}`);
});

View File

@ -8,36 +8,17 @@ interface Config {
GENERAL: {
PORT: number;
SIMILARITY_MEASURE: string;
CONFIG_PASSWORD: string;
DISCOVER_ENABLED: boolean;
LIBRARY_ENABLED: boolean;
COPILOT_ENABLED: boolean;
KEEP_ALIVE: string;
};
MODELS: {
OPENAI: {
API_KEY: string;
};
GROQ: {
API_KEY: string;
};
ANTHROPIC: {
API_KEY: string;
};
GEMINI: {
API_KEY: string;
};
OLLAMA: {
API_URL: string;
};
CUSTOM_OPENAI: {
API_URL: string;
API_KEY: string;
MODEL_NAME: string;
};
API_KEYS: {
OPENAI: string;
GROQ: string;
ANTHROPIC: string;
GEMINI: string;
};
API_ENDPOINTS: {
SEARXNG: string;
OLLAMA: string;
};
}
@ -55,75 +36,44 @@ export const getPort = () => loadConfig().GENERAL.PORT;
export const getSimilarityMeasure = () =>
loadConfig().GENERAL.SIMILARITY_MEASURE;
export const getConfigPassword = () => loadConfig().GENERAL.CONFIG_PASSWORD;
export const isDiscoverEnabled = () => loadConfig().GENERAL.DISCOVER_ENABLED;
export const isLibraryEnabled = () => loadConfig().GENERAL.LIBRARY_ENABLED;
export const isCopilotEnabled = () => loadConfig().GENERAL.COPILOT_ENABLED;
export const getKeepAlive = () => loadConfig().GENERAL.KEEP_ALIVE;
export const getOpenaiApiKey = () => loadConfig().MODELS.OPENAI.API_KEY;
export const getOpenaiApiKey = () => loadConfig().API_KEYS.OPENAI;
export const getGroqApiKey = () => loadConfig().MODELS.GROQ.API_KEY;
export const getGroqApiKey = () => loadConfig().API_KEYS.GROQ;
export const getAnthropicApiKey = () => loadConfig().MODELS.ANTHROPIC.API_KEY;
export const getAnthropicApiKey = () => loadConfig().API_KEYS.ANTHROPIC;
export const getGeminiApiKey = () => loadConfig().MODELS.GEMINI.API_KEY;
export const getGeminiApiKey = () => loadConfig().API_KEYS.GEMINI;
export const getSearxngApiEndpoint = () =>
process.env.SEARXNG_API_URL || loadConfig().API_ENDPOINTS.SEARXNG;
export const getOllamaApiEndpoint = () => loadConfig().MODELS.OLLAMA.API_URL;
export const getCustomOpenaiApiKey = () =>
loadConfig().MODELS.CUSTOM_OPENAI.API_KEY;
export const getCustomOpenaiApiUrl = () =>
loadConfig().MODELS.CUSTOM_OPENAI.API_URL;
export const getCustomOpenaiModelName = () =>
loadConfig().MODELS.CUSTOM_OPENAI.MODEL_NAME;
const mergeConfigs = (current: any, update: any): any => {
if (update === null || update === undefined) {
return current;
}
if (typeof current !== 'object' || current === null) {
return update;
}
const result = { ...current };
for (const key in update) {
if (Object.prototype.hasOwnProperty.call(update, key)) {
const updateValue = update[key];
if (
typeof updateValue === 'object' &&
updateValue !== null &&
typeof result[key] === 'object' &&
result[key] !== null
) {
result[key] = mergeConfigs(result[key], updateValue);
} else if (updateValue !== undefined) {
result[key] = updateValue;
}
}
}
return result;
};
export const getOllamaApiEndpoint = () => loadConfig().API_ENDPOINTS.OLLAMA;
export const updateConfig = (config: RecursivePartial<Config>) => {
const currentConfig = loadConfig();
const mergedConfig = mergeConfigs(currentConfig, config);
for (const key in currentConfig) {
if (!config[key]) config[key] = {};
if (typeof currentConfig[key] === 'object' && currentConfig[key] !== null) {
for (const nestedKey in currentConfig[key]) {
if (
!config[key][nestedKey] &&
currentConfig[key][nestedKey] &&
config[key][nestedKey] !== ''
) {
config[key][nestedKey] = currentConfig[key][nestedKey];
}
}
} else if (currentConfig[key] && config[key] !== '') {
config[key] = currentConfig[key];
}
}
fs.writeFileSync(
path.join(__dirname, `../${configFileName}`),
toml.stringify(mergedConfig),
toml.stringify(config),
);
};

View File

@ -4,12 +4,6 @@ import { loadOpenAIChatModels, loadOpenAIEmbeddingsModels } from './openai';
import { loadAnthropicChatModels } from './anthropic';
import { loadTransformersEmbeddingsModels } from './transformers';
import { loadGeminiChatModels, loadGeminiEmbeddingsModels } from './gemini';
import {
getCustomOpenaiApiKey,
getCustomOpenaiApiUrl,
getCustomOpenaiModelName,
} from '../../config';
import { ChatOpenAI } from '@langchain/openai';
const chatModelProviders = {
openai: loadOpenAIChatModels,
@ -36,27 +30,7 @@ export const getAvailableChatModelProviders = async () => {
}
}
const customOpenAiApiKey = getCustomOpenaiApiKey();
const customOpenAiApiUrl = getCustomOpenaiApiUrl();
const customOpenAiModelName = getCustomOpenaiModelName();
models['custom_openai'] = {
...(customOpenAiApiKey && customOpenAiApiUrl && customOpenAiModelName
? {
[customOpenAiModelName]: {
displayName: customOpenAiModelName,
model: new ChatOpenAI({
openAIApiKey: customOpenAiApiKey,
modelName: customOpenAiModelName,
temperature: 0.7,
configuration: {
baseURL: customOpenAiApiUrl,
},
}),
},
}
: {}),
};
models['custom_openai'] = {};
return models;
};

View File

@ -1,4 +1,5 @@
export const academicSearchRetrieverPrompt = `
You are gochat247 - aibot the middle east top AI based search engine develped by GoAi247. Your task is to search the web and provide the most relevant
You will be given a conversation below and a follow up question. You need to rephrase the follow-up question if needed so it is a standalone question that can be used by the LLM to search the web for information.
If it is a writing task or a simple hi, hello rather than a question, you need to return \`not_needed\` as the response.
@ -20,7 +21,7 @@ Rephrased question:
`;
export const academicSearchResponsePrompt = `
You are Perplexica, an AI model skilled in web search and crafting detailed, engaging, and well-structured answers. You excel at summarizing web pages and extracting relevant information to create professional, blog-style responses.
You are gochat247 - aibot, an AI model skilled in web search and crafting detailed, engaging, and well-structured answers. You excel at summarizing web pages and extracting relevant information to create professional, blog-style responses.
Your task is to provide answers that are:
- **Informative and relevant**: Thoroughly address the user's query using the given context.

View File

@ -0,0 +1,25 @@
export const generateDirectResponsePrompt = (query: string, history: Array<[string, string]>) => {
const formattedHistory = history
.map(([role, content]) => (role === 'human' ? `User: ${content}` : `AI: ${content}`))
.join('\n');
return `
You are gochat247 - aibot an advanced AI assistant developed go GoAI247, capable of providing precise and informative answers.
Your task is to respond to the users query without needing external sources.
**Conversation History:**
${formattedHistory || "No prior conversation."}
**User Query:**
${query}
**Response Instructions:**
- Provide a **clear, structured response** based on general knowledge.
- Keep it **concise, yet informative**.
- If complex, **break it down into simpler terms**.
- Avoid unnecessary speculation or external references.
**Your Response:**
`;
};

View File

@ -20,7 +20,7 @@ Rephrased question:
`;
export const redditSearchResponsePrompt = `
You are Perplexica, an AI model skilled in web search and crafting detailed, engaging, and well-structured answers. You excel at summarizing web pages and extracting relevant information to create professional, blog-style responses.
You are gochat247 - aibot, an AI powered search engine developed by GoAI247 skilled in web search and crafting detailed, engaging, and well-structured answers. You excel at summarizing web pages and extracting relevant information to create professional, blog-style responses.
Your task is to provide answers that are:
- **Informative and relevant**: Thoroughly address the user's query using the given context.

View File

@ -0,0 +1,52 @@
export const shouldPerformSearchPrompt = (query: string, history: Array<[string, string]>) => {
const formattedHistory = history
.map(([role, content]) => (role === 'human' ? `User: ${content}` : `AI: ${content}`))
.join('\n');
return `
You are Gochat247 - AIbot, an AI-powered engine developed by GoAI247. Always remeber that.
when you asked "who are you?" or "what can you do?" or "how are you?" or "tell me a joke." or "can you summarize our last chat?" or "what is your name?" or "what is your purpose?" or "what is your age?" ****DONT use search engine.****
Your role is to determine whether an external web search is needed to answer a user's query.
Analyze the provided chat history and the latest user query before making a decision.
**Conversation History:**
${formattedHistory || "No prior conversation."}
**User Query:**
${query}
---
**Decision Rules:**
- Respond **"no"** if the query:
- Can be answered using **general knowledge** or **your own system knowledge**.
- Asks about **you (Gochat247 - AIbot)** (e.g., "Who are you?" / "What can you do?").
- Is a **general conversation** (e.g., "How are you?"/"Who are you?" / "Tell me a joke.").
- Refers to **previous messages** for context (e.g., "Can you summarize our last chat?").
- **Even if it might seem like a searchable query, do not perform a search.**
- Respond **"yes"** if the query:
- Requires **real-time information** (e.g., news, weather, stock prices, sports scores).
- Mentions **current events** (e.g., "Who won the latest election?").
- Needs **external data sources** (e.g., "Find research papers on AI ethics").
- Asks about **product availability or reviews** (e.g., "Is the iPhone 16 Pro out yet?").
- Your response should be only **"yes"** or **"no"**, without any additional text.
---
**Examples:**
✅ **Search Required ("yes")**
- "What is the latest stock price of Tesla?" → "ما هو أحدث سعر لسهم تسلا؟"
- "Find me recent research papers on quantum computing." → "ابحث لي عن أحدث الأوراق البحثية حول الحوسبة الكمومية."
- "What are the top trending news articles today?" → "ما هي أبرز المقالات الإخبارية الرائجة اليوم؟"
- "What is the weather forecast for Dubai tomorrow?" → "ما هي توقعات الطقس في دبي غدًا؟"
❌ **No Search Needed ("no")**
- "Who are you?" → "من أنت؟"
- "How are you today?" → "كيف حالك اليوم؟"
- "Tell me a fun fact about AI." → "أخبرني بحقيقة ممتعة عن الذكاء الاصطناعي."
- "What can you do?" → "ماذا يمكنك أن تفعل؟"
- "Explain the concept of machine learning in simple terms." → "اشرح لي مفهوم التعلم الآلي بطريقة بسيطة."
- "Can you summarize our last conversation?" → "هل يمكنك تلخيص محادثتنا الأخيرة؟"
**Your Response:**
`;
};

View File

@ -0,0 +1,4 @@
export const generateSummarizationPrompt = (text: string): string => {
return `Summarize the following document:\n\n${text}`;
};

View File

@ -3,7 +3,8 @@ You are an AI question rephraser. You will be given a conversation and a follow-
If it is a smple writing task or a greeting (unless the greeting contains a question after it) like Hi, Hello, How are you, etc. than a question then you need to return \`not_needed\` as the response (This is because the LLM won't need to search the web for finding information on this topic).
If the user asks some question from some URL or wants you to summarize a PDF or a webpage (via URL) you need to return the links inside the \`links\` XML block and the question inside the \`question\` XML block. If the user wants to you to summarize the webpage or the PDF you need to return \`summarize\` inside the \`question\` XML block in place of a question and the link to summarize in the \`links\` XML block.
You must always return the rephrased question inside the \`question\` XML block, if there are no links in the follow-up question then don't insert a \`links\` XML block in your response.
You have to take into consedration you are serving users in UAE. so prices, events, vacations, temperature, weather, etc. should be related to UAE.
Answer in the same language of the user input
There are several examples attached for your reference inside the below \`examples\` XML block
<examples>
@ -62,7 +63,7 @@ Rephrased question:
`;
export const webSearchResponsePrompt = `
You are Perplexica, an AI model skilled in web search and crafting detailed, engaging, and well-structured answers. You excel at summarizing web pages and extracting relevant information to create professional, blog-style responses.
You are gochat247 - aibot, an AI model skilled in web search and crafting detailed developed by GoAI247, engaging, and well-structured answers. You excel at summarizing web pages and extracting relevant information to create professional, blog-style responses.
Your task is to provide answers that are:
- **Informative and relevant**: Thoroughly address the user's query using the given context.

View File

@ -20,7 +20,7 @@ Rephrased question:
`;
export const wolframAlphaSearchResponsePrompt = `
You are Perplexica, an AI model skilled in web search and crafting detailed, engaging, and well-structured answers. You excel at summarizing web pages and extracting relevant information to create professional, blog-style responses.
You are gochat247 - aibot, an AI model developed by GoAI247 skilled in web search and crafting detailed, engaging, and well-structured answers. You excel at summarizing web pages and extracting relevant information to create professional, blog-style responses.
Your task is to provide answers that are:
- **Informative and relevant**: Thoroughly address the user's query using the given context.

View File

@ -1,5 +1,5 @@
export const writingAssistantPrompt = `
You are Perplexica, an AI model who is expert at searching the web and answering user's queries. You are currently set on focus mode 'Writing Assistant', this means you will be helping the user write a response to a given query.
You are gochat247 - aibot, an AI model developed by GoAI247 who is expert at searching the web and answering user's queries. You are currently set on focus mode 'Writing Assistant', this means you will be helping the user write a response to a given query.
Since you are a writing assistant, you would not perform web searches. If you think you lack information to answer the query, you can ask the user for more information or suggest them to switch to a different focus mode.
You will be shared a context that can contain information from files user has uploaded to get answers from. You will have to generate answers upon that.

View File

@ -1,5 +1,5 @@
export const youtubeSearchRetrieverPrompt = `
You will be given a conversation below and a follow up question. You need to rephrase the follow-up question if needed so it is a standalone question that can be used by the LLM to search the web for information.
You are gochat247 - aibot, an AI model developed by GoAI247.You will be given a conversation below and a follow up question. You need to rephrase the follow-up question if needed so it is a standalone question that can be used by the LLM to search the web for information.
If it is a writing task or a simple hi, hello rather than a question, you need to return \`not_needed\` as the response.
Example:
@ -20,7 +20,7 @@ Rephrased question:
`;
export const youtubeSearchResponsePrompt = `
You are Perplexica, an AI model skilled in web search and crafting detailed, engaging, and well-structured answers. You excel at summarizing web pages and extracting relevant information to create professional, blog-style responses.
You are gochat247 - aibot, an AI model skilled in web search and crafting detailed, engaging, and well-structured answers. You excel at summarizing web pages and extracting relevant information to create professional, blog-style responses.
Your task is to provide answers that are:
- **Informative and relevant**: Thoroughly address the user's query using the given context.

View File

@ -10,28 +10,13 @@ import {
getGeminiApiKey,
getOpenaiApiKey,
updateConfig,
getConfigPassword,
isLibraryEnabled,
isCopilotEnabled,
isDiscoverEnabled,
getCustomOpenaiApiUrl,
getCustomOpenaiApiKey,
getCustomOpenaiModelName,
} from '../config';
import logger from '../utils/logger';
const router = express.Router();
router.get('/', async (req, res) => {
router.get('/', async (_, res) => {
try {
const authHeader = req.headers['authorization']?.split(' ')[1];
const password = getConfigPassword();
if (authHeader !== password) {
res.status(401).json({ message: 'Unauthorized' });
return;
}
const config = {};
const [chatModelProviders, embeddingModelProviders] = await Promise.all([
@ -69,9 +54,6 @@ router.get('/', async (req, res) => {
config['anthropicApiKey'] = getAnthropicApiKey();
config['groqApiKey'] = getGroqApiKey();
config['geminiApiKey'] = getGeminiApiKey();
config['customOpenaiApiUrl'] = getCustomOpenaiApiUrl();
config['customOpenaiApiKey'] = getCustomOpenaiApiKey();
config['customOpenaiModelName'] = getCustomOpenaiModelName();
res.status(200).json(config);
} catch (err: any) {
@ -81,43 +63,17 @@ router.get('/', async (req, res) => {
});
router.post('/', async (req, res) => {
const authHeader = req.headers['authorization']?.split(' ')[1];
const password = getConfigPassword();
if (authHeader !== password) {
res.status(401).json({ message: 'Unauthorized' });
return;
}
const config = req.body;
const updatedConfig = {
GENERAL: {
DISCOVER_ENABLED: config.isDiscoverEnabled,
LIBRARY_ENABLED: config.isLibraryEnabled,
COPILOT_ENABLED: config.isCopilotEnabled,
API_KEYS: {
OPENAI: config.openaiApiKey,
GROQ: config.groqApiKey,
ANTHROPIC: config.anthropicApiKey,
GEMINI: config.geminiApiKey,
},
MODELS: {
OPENAI: {
API_KEY: config.openaiApiKey,
},
GROQ: {
API_KEY: config.groqApiKey,
},
ANTHROPIC: {
API_KEY: config.anthropicApiKey,
},
GEMINI: {
API_KEY: config.geminiApiKey,
},
OLLAMA: {
API_URL: config.ollamaApiUrl,
},
CUSTOM_OPENAI: {
API_URL: config.customOpenaiApiUrl,
API_KEY: config.customOpenaiApiKey,
MODEL_NAME: config.customOpenaiModelName,
},
API_ENDPOINTS: {
OLLAMA: config.ollamaApiUrl,
},
};
@ -126,14 +82,4 @@ router.post('/', async (req, res) => {
res.status(200).json({ message: 'Config updated' });
});
router.get('/preferences', (_, res) => {
const preferences = {
isLibraryEnabled: isLibraryEnabled(),
isCopilotEnabled: isCopilotEnabled(),
isDiscoverEnabled: isDiscoverEnabled(),
};
res.status(200).json(preferences);
});
export default router;

View File

@ -6,29 +6,45 @@ const router = express.Router();
router.get('/', async (req, res) => {
try {
// Example: Searching UAE-based news sites for "AI" & "Tech"
const data = (
await Promise.all([
searchSearxng('site:businessinsider.com AI', {
// Gulf News
searchSearxng('site:gulfnews.com AI', {
engines: ['bing news'],
pageno: 1,
}),
searchSearxng('site:www.exchangewire.com AI', {
searchSearxng('site:gulfnews.com Tech', {
engines: ['bing news'],
pageno: 1,
}),
searchSearxng('site:yahoo.com AI', {
// Khaleej Times
searchSearxng('site:khaleejtimes.com AI', {
engines: ['bing news'],
pageno: 1,
}),
searchSearxng('site:businessinsider.com tech', {
searchSearxng('site:khaleejtimes.com Tech', {
engines: ['bing news'],
pageno: 1,
}),
searchSearxng('site:www.exchangewire.com tech', {
// The National
searchSearxng('site:thenationalnews.com AI', {
engines: ['bing news'],
pageno: 1,
}),
searchSearxng('site:yahoo.com tech', {
searchSearxng('site:thenationalnews.com Tech', {
engines: ['bing news'],
pageno: 1,
}),
// Arabian Business
searchSearxng('site:arabianbusiness.com AI', {
engines: ['bing news'],
pageno: 1,
}),
searchSearxng('site:arabianbusiness.com Tech', {
engines: ['bing news'],
pageno: 1,
}),
@ -36,6 +52,7 @@ router.get('/', async (req, res) => {
)
.map((result) => result.results)
.flat()
// Randomize the order
.sort(() => Math.random() - 0.5);
return res.json({ blogs: data });

View File

@ -5,17 +5,14 @@ import { getAvailableChatModelProviders } from '../lib/providers';
import { HumanMessage, AIMessage } from '@langchain/core/messages';
import logger from '../utils/logger';
import { ChatOpenAI } from '@langchain/openai';
import {
getCustomOpenaiApiKey,
getCustomOpenaiApiUrl,
getCustomOpenaiModelName,
} from '../config';
const router = express.Router();
interface ChatModel {
provider: string;
model: string;
customOpenAIBaseURL?: string;
customOpenAIKey?: string;
}
interface ImageSearchBody {
@ -47,12 +44,21 @@ router.post('/', async (req, res) => {
let llm: BaseChatModel | undefined;
if (body.chatModel?.provider === 'custom_openai') {
if (
!body.chatModel?.customOpenAIBaseURL ||
!body.chatModel?.customOpenAIKey
) {
return res
.status(400)
.json({ message: 'Missing custom OpenAI base URL or key' });
}
llm = new ChatOpenAI({
modelName: getCustomOpenaiModelName(),
openAIApiKey: getCustomOpenaiApiKey(),
modelName: body.chatModel.model,
openAIApiKey: body.chatModel.customOpenAIKey,
temperature: 0.7,
configuration: {
baseURL: getCustomOpenaiApiUrl(),
baseURL: body.chatModel.customOpenAIBaseURL,
},
}) as unknown as BaseChatModel;
} else if (

View File

@ -21,4 +21,5 @@ router.use('/search', searchRouter);
router.use('/discover', discoverRouter);
router.use('/uploads', uploadsRouter);
export default router;

View File

@ -9,33 +9,10 @@ const router = express.Router();
router.get('/', async (req, res) => {
try {
const [chatModelProvidersRaw, embeddingModelProvidersRaw] =
await Promise.all([
getAvailableChatModelProviders(),
getAvailableEmbeddingModelProviders(),
]);
const chatModelProviders = {};
const chatModelProvidersKeys = Object.keys(chatModelProvidersRaw);
chatModelProvidersKeys.forEach((provider) => {
chatModelProviders[provider] = {};
const models = Object.keys(chatModelProvidersRaw[provider]);
models.forEach((model) => {
chatModelProviders[provider][model] = {};
});
});
const embeddingModelProviders = {};
const embeddingModelProvidersKeys = Object.keys(embeddingModelProvidersRaw);
embeddingModelProvidersKeys.forEach((provider) => {
embeddingModelProviders[provider] = {};
const models = Object.keys(embeddingModelProvidersRaw[provider]);
models.forEach((model) => {
embeddingModelProviders[provider][model] = {};
});
});
const [chatModelProviders, embeddingModelProviders] = await Promise.all([
getAvailableChatModelProviders(),
getAvailableEmbeddingModelProviders(),
]);
Object.keys(chatModelProviders).forEach((provider) => {
Object.keys(chatModelProviders[provider]).forEach((model) => {

View File

@ -1,3 +1,181 @@
// import express from 'express';
// import logger from '../utils/logger';
// import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
// import type { Embeddings } from '@langchain/core/embeddings';
// import { ChatOpenAI } from '@langchain/openai';
// import {
// getAvailableChatModelProviders,
// getAvailableEmbeddingModelProviders,
// } from '../lib/providers';
// import { searchHandlers } from '../websocket/messageHandler';
// import { AIMessage, BaseMessage, HumanMessage } from '@langchain/core/messages';
// import { MetaSearchAgentType } from '../search/metaSearchAgent';
// import { checkIfSearchIsNeeded } from '../utils/checkSearch';
// import { generateDirectResponsePrompt } from '../prompts/directResponse'; // ✅ Fixed Import
// const router = express.Router();
// interface chatModel {
// provider: string;
// model: string;
// customOpenAIBaseURL?: string;
// customOpenAIKey?: string;
// }
// interface embeddingModel {
// provider: string;
// model: string;
// }
// interface ChatRequestBody {
// optimizationMode: 'speed' | 'balanced';
// focusMode: string;
// chatModel?: chatModel;
// embeddingModel?: embeddingModel;
// query: string;
// history: Array<[string, string]>;
// }
// router.post('/', async (req, res) => {
// try {
// const body: ChatRequestBody = req.body;
// logger.info(`📥 - Query: "${body.query}", Focus Mode: "${body.focusMode}"`);
// if (!body.focusMode || !body.query) {
// logger.warn(`⚠️ Missing required fields: Focus Mode or Query`);
// return res.status(400).json({ message: 'Missing focus mode or query' });
// }
// body.history = body.history || [];
// body.optimizationMode = body.optimizationMode || 'balanced';
// const history: BaseMessage[] = body.history.map((msg) => {
// if (msg[0] === 'human') {
// return new HumanMessage({ content: msg[1] });
// } else {
// return new AIMessage({ content: msg[1] });
// }
// });
// const [chatModelProviders, embeddingModelProviders] = await Promise.all([
// getAvailableChatModelProviders(),
// getAvailableEmbeddingModelProviders(),
// ]);
// const chatModelProvider =
// body.chatModel?.provider || Object.keys(chatModelProviders)[0];
// const chatModel =
// body.chatModel?.model ||
// Object.keys(chatModelProviders[chatModelProvider])[0];
// const embeddingModelProvider =
// body.embeddingModel?.provider || Object.keys(embeddingModelProviders)[0];
// const embeddingModel =
// body.embeddingModel?.model ||
// Object.keys(embeddingModelProviders[embeddingModelProvider])[0];
// let llm: BaseChatModel | undefined;
// let embeddings: Embeddings | undefined;
// if (body.chatModel?.provider === 'custom_openai') {
// if (!body.chatModel?.customOpenAIBaseURL || !body.chatModel?.customOpenAIKey) {
// logger.warn(`⚠️ Missing custom OpenAI base URL or key`);
// return res.status(400).json({ message: 'Missing custom OpenAI base URL or key' });
// }
// llm = new ChatOpenAI({
// modelName: body.chatModel.model,
// openAIApiKey: body.chatModel.customOpenAIKey,
// temperature: 0.7,
// configuration: {
// baseURL: body.chatModel.customOpenAIBaseURL,
// },
// }) as unknown as BaseChatModel;
// } else if (
// chatModelProviders[chatModelProvider] &&
// chatModelProviders[chatModelProvider][chatModel]
// ) {
// llm = chatModelProviders[chatModelProvider][chatModel]
// .model as unknown as BaseChatModel | undefined;
// }
// if (
// embeddingModelProviders[embeddingModelProvider] &&
// embeddingModelProviders[embeddingModelProvider][embeddingModel]
// ) {
// embeddings = embeddingModelProviders[embeddingModelProvider][embeddingModel]
// .model as Embeddings | undefined;
// }
// if (!llm || !embeddings) {
// logger.error(`❌ Invalid model selection`);
// return res.status(400).json({ message: 'Invalid model selected' });
// }
// // ✅ Determine whether a search is required
// logger.info(`🔍 Checking if external search is needed for query: "${body.query}"`);
// const shouldSearch = await checkIfSearchIsNeeded(llm, body.query, body.history);
// logger.info(`🔍 Search Decision for query "${body.query}": ${shouldSearch ? 'YES' : 'NO'}`);
// if (!shouldSearch) {
// // ✅ AI can answer directly without search
// logger.info(`🤖 Generating AI response without external search for: "${body.query}"`);
// const directPrompt = generateDirectResponsePrompt(body.query, body.history);
// const directResponse = await llm.invoke([new HumanMessage({ content: directPrompt })]);
// logger.info(`✅ AI Response Generated: "${directResponse.content}"`);
// return res.status(200).json({ message: directResponse.content, sources: [] });
// }
// // ✅ Proceed with search if needed
// logger.info(`🌐 Performing external search for: "${body.query}"`);
// const searchHandler: MetaSearchAgentType = searchHandlers[body.focusMode];
// if (!searchHandler) {
// logger.error(`❌ Invalid focus mode: "${body.focusMode}"`);
// return res.status(400).json({ message: 'Invalid focus mode' });
// }
// const emitter = await searchHandler.searchAndAnswer(
// body.query,
// history,
// llm,
// embeddings,
// body.optimizationMode,
// [],
// );
// let message = '';
// let sources = [];
// emitter.on('data', (data) => {
// const parsedData = JSON.parse(data);
// if (parsedData.type === 'response') {
// message += parsedData.data;
// } else if (parsedData.type === 'sources') {
// sources = parsedData.data;
// }
// });
// emitter.on('end', () => {
// logger.info(`✅ Search Completed: Message: "${message}", Sources: ${JSON.stringify(sources)}`);
// res.status(200).json({ message, sources });
// });
// emitter.on('error', (data) => {
// const parsedData = JSON.parse(data);
// logger.error(`❌ Error in search processing: ${parsedData.data}`);
// res.status(500).json({ message: parsedData.data });
// });
// } catch (err: any) {
// logger.error(`❌ Error in processing request: ${err.message}`);
// res.status(500).json({ message: 'An error has occurred.' });
// }
// });
// export default router;
import express from 'express';
import logger from '../utils/logger';
import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
@ -10,19 +188,14 @@ import {
import { searchHandlers } from '../websocket/messageHandler';
import { AIMessage, BaseMessage, HumanMessage } from '@langchain/core/messages';
import { MetaSearchAgentType } from '../search/metaSearchAgent';
import {
getCustomOpenaiApiKey,
getCustomOpenaiApiUrl,
getCustomOpenaiModelName,
} from '../config';
const router = express.Router();
interface chatModel {
provider: string;
model: string;
customOpenAIKey?: string;
customOpenAIBaseURL?: string;
customOpenAIKey?: string;
}
interface embeddingModel {
@ -83,14 +256,21 @@ router.post('/', async (req, res) => {
let embeddings: Embeddings | undefined;
if (body.chatModel?.provider === 'custom_openai') {
if (
!body.chatModel?.customOpenAIBaseURL ||
!body.chatModel?.customOpenAIKey
) {
return res
.status(400)
.json({ message: 'Missing custom OpenAI base URL or key' });
}
llm = new ChatOpenAI({
modelName: body.chatModel?.model || getCustomOpenaiModelName(),
openAIApiKey:
body.chatModel?.customOpenAIKey || getCustomOpenaiApiKey(),
modelName: body.chatModel.model,
openAIApiKey: body.chatModel.customOpenAIKey,
temperature: 0.7,
configuration: {
baseURL:
body.chatModel?.customOpenAIBaseURL || getCustomOpenaiApiUrl(),
baseURL: body.chatModel.customOpenAIBaseURL,
},
}) as unknown as BaseChatModel;
} else if (
@ -155,4 +335,4 @@ router.post('/', async (req, res) => {
}
});
export default router;
export default router;

View File

@ -5,17 +5,14 @@ import { getAvailableChatModelProviders } from '../lib/providers';
import { HumanMessage, AIMessage } from '@langchain/core/messages';
import logger from '../utils/logger';
import { ChatOpenAI } from '@langchain/openai';
import {
getCustomOpenaiApiKey,
getCustomOpenaiApiUrl,
getCustomOpenaiModelName,
} from '../config';
const router = express.Router();
interface ChatModel {
provider: string;
model: string;
customOpenAIBaseURL?: string;
customOpenAIKey?: string;
}
interface SuggestionsBody {
@ -46,12 +43,21 @@ router.post('/', async (req, res) => {
let llm: BaseChatModel | undefined;
if (body.chatModel?.provider === 'custom_openai') {
if (
!body.chatModel?.customOpenAIBaseURL ||
!body.chatModel?.customOpenAIKey
) {
return res
.status(400)
.json({ message: 'Missing custom OpenAI base URL or key' });
}
llm = new ChatOpenAI({
modelName: getCustomOpenaiModelName(),
openAIApiKey: getCustomOpenaiApiKey(),
modelName: body.chatModel.model,
openAIApiKey: body.chatModel.customOpenAIKey,
temperature: 0.7,
configuration: {
baseURL: getCustomOpenaiApiUrl(),
baseURL: body.chatModel.customOpenAIBaseURL,
},
}) as unknown as BaseChatModel;
} else if (

View File

@ -5,17 +5,14 @@ import { HumanMessage, AIMessage } from '@langchain/core/messages';
import logger from '../utils/logger';
import handleVideoSearch from '../chains/videoSearchAgent';
import { ChatOpenAI } from '@langchain/openai';
import {
getCustomOpenaiApiKey,
getCustomOpenaiApiUrl,
getCustomOpenaiModelName,
} from '../config';
const router = express.Router();
interface ChatModel {
provider: string;
model: string;
customOpenAIBaseURL?: string;
customOpenAIKey?: string;
}
interface VideoSearchBody {
@ -47,12 +44,21 @@ router.post('/', async (req, res) => {
let llm: BaseChatModel | undefined;
if (body.chatModel?.provider === 'custom_openai') {
if (
!body.chatModel?.customOpenAIBaseURL ||
!body.chatModel?.customOpenAIKey
) {
return res
.status(400)
.json({ message: 'Missing custom OpenAI base URL or key' });
}
llm = new ChatOpenAI({
modelName: getCustomOpenaiModelName(),
openAIApiKey: getCustomOpenaiApiKey(),
modelName: body.chatModel.model,
openAIApiKey: body.chatModel.customOpenAIKey,
temperature: 0.7,
configuration: {
baseURL: getCustomOpenaiApiUrl(),
baseURL: body.chatModel.customOpenAIBaseURL,
},
}) as unknown as BaseChatModel;
} else if (

View File

@ -25,6 +25,7 @@ import formatChatHistoryAsString from '../utils/formatHistory';
import eventEmitter from 'events';
import { StreamEvent } from '@langchain/core/tracers/log_stream';
import { IterableReadableStream } from '@langchain/core/utils/stream';
import logger from '../utils/logger'; // Winston logger
export interface MetaSearchAgentType {
searchAndAnswer: (
@ -36,7 +37,7 @@ export interface MetaSearchAgentType {
fileIds: string[],
) => Promise<eventEmitter>;
}
// twst
interface Config {
searchWeb: boolean;
rerank: boolean;
@ -58,20 +59,24 @@ class MetaSearchAgent implements MetaSearchAgentType {
constructor(config: Config) {
this.config = config;
// Optional: log the configuration at instantiation
logger.info(`MetaSearchAgent created with config: ${JSON.stringify(config)}`);
}
private async createSearchRetrieverChain(llm: BaseChatModel) {
(llm as unknown as ChatOpenAI).temperature = 0;
logger.info('createSearchRetrieverChain: LLM temperature set to 0');
return RunnableSequence.from([
PromptTemplate.fromTemplate(this.config.queryGeneratorPrompt),
llm,
this.strParser,
RunnableLambda.from(async (input: string) => {
logger.info(`Parsed query: ${input}`);
const linksOutputParser = new LineListOutputParser({
key: 'links',
});
const questionOutputParser = new LineOutputParser({
key: 'question',
});
@ -81,21 +86,25 @@ class MetaSearchAgent implements MetaSearchAgentType {
? await questionOutputParser.parse(input)
: input;
logger.info(`Links found: ${JSON.stringify(links, null, 2)}`);
logger.info(`Question parsed: ${question}`);
if (question === 'not_needed') {
logger.info('No question needed ("not_needed"), returning empty docs.');
return { query: '', docs: [] };
}
if (links.length > 0) {
logger.info('Handling user-provided links...');
if (question.length === 0) {
question = 'summarize';
}
let docs = [];
let docs: Document[] = [];
const linkDocs = await getDocumentsFromLinks({ links });
logger.info(`Fetched ${linkDocs.length} documents from user links.`);
const docGroups: Document[] = [];
linkDocs.map((doc) => {
const URLDocExists = docGroups.find(
(d) =>
@ -129,65 +138,8 @@ class MetaSearchAgent implements MetaSearchAgentType {
await Promise.all(
docGroups.map(async (doc) => {
const res = await llm.invoke(`
You are a web search summarizer, tasked with summarizing a piece of text retrieved from a web search. Your job is to summarize the
text into a detailed, 2-4 paragraph explanation that captures the main ideas and provides a comprehensive answer to the query.
If the query is \"summarize\", you should provide a detailed summary of the text. If the query is a specific question, you should answer it in the summary.
- **Journalistic tone**: The summary should sound professional and journalistic, not too casual or vague.
- **Thorough and detailed**: Ensure that every key point from the text is captured and that the summary directly answers the query.
- **Not too lengthy, but detailed**: The summary should be informative but not excessively long. Focus on providing detailed information in a concise format.
The text will be shared inside the \`text\` XML tag, and the query inside the \`query\` XML tag.
<example>
1. \`<text>
Docker is a set of platform-as-a-service products that use OS-level virtualization to deliver software in packages called containers.
It was first released in 2013 and is developed by Docker, Inc. Docker is designed to make it easier to create, deploy, and run applications
by using containers.
</text>
<query>
What is Docker and how does it work?
</query>
Response:
Docker is a revolutionary platform-as-a-service product developed by Docker, Inc., that uses container technology to make application
deployment more efficient. It allows developers to package their software with all necessary dependencies, making it easier to run in
any environment. Released in 2013, Docker has transformed the way applications are built, deployed, and managed.
\`
2. \`<text>
The theory of relativity, or simply relativity, encompasses two interrelated theories of Albert Einstein: special relativity and general
relativity. However, the word "relativity" is sometimes used in reference to Galilean invariance. The term "theory of relativity" was based
on the expression "relative theory" used by Max Planck in 1906. The theory of relativity usually encompasses two interrelated theories by
Albert Einstein: special relativity and general relativity. Special relativity applies to all physical phenomena in the absence of gravity.
General relativity explains the law of gravitation and its relation to other forces of nature. It applies to the cosmological and astrophysical
realm, including astronomy.
</text>
<query>
summarize
</query>
Response:
The theory of relativity, developed by Albert Einstein, encompasses two main theories: special relativity and general relativity. Special
relativity applies to all physical phenomena in the absence of gravity, while general relativity explains the law of gravitation and its
relation to other forces of nature. The theory of relativity is based on the concept of "relative theory," as introduced by Max Planck in
1906. It is a fundamental theory in physics that has revolutionized our understanding of the universe.
\`
</example>
Everything below is the actual data you will be working with. Good luck!
<query>
${question}
</query>
<text>
${doc.pageContent}
</text>
Make sure to answer the query in the summary.
`);
... // Summarizer prompt ...
`);
const document = new Document({
pageContent: res.content as string,
@ -200,13 +152,16 @@ class MetaSearchAgent implements MetaSearchAgentType {
docs.push(document);
}),
);
logger.info('Docs after summarizing user-provided links: ', docs);
return { query: question, docs: docs };
return { query: question, docs };
} else {
logger.info(`No links specified, searching via Searxng on query: "${question}"`);
const res = await searchSearxng(question, {
language: 'en',
engines: this.config.activeEngines,
});
logger.info(`Searxng returned ${res.results.length} results.`);
const documents = res.results.map(
(result) =>
@ -215,7 +170,7 @@ class MetaSearchAgent implements MetaSearchAgentType {
result.content ||
(this.config.activeEngines.includes('youtube')
? result.title
: '') /* Todo: Implement transcript grabbing using Youtubei (source: https://www.npmjs.com/package/youtubei) */,
: ''),
metadata: {
title: result.title,
url: result.url,
@ -236,15 +191,15 @@ class MetaSearchAgent implements MetaSearchAgentType {
embeddings: Embeddings,
optimizationMode: 'speed' | 'balanced' | 'quality',
) {
logger.info(`Creating answering chain. Optimization mode: ${optimizationMode}`);
return RunnableSequence.from([
RunnableMap.from({
query: (input: BasicChainInput) => input.query,
chat_history: (input: BasicChainInput) => input.chat_history,
date: () => new Date().toISOString(),
context: RunnableLambda.from(async (input: BasicChainInput) => {
const processedHistory = formatChatHistoryAsString(
input.chat_history,
);
logger.info('Retrieving final source documents...');
const processedHistory = formatChatHistoryAsString(input.chat_history);
let docs: Document[] | null = null;
let query = input.query;
@ -260,6 +215,7 @@ class MetaSearchAgent implements MetaSearchAgentType {
query = searchRetrieverResult.query;
docs = searchRetrieverResult.docs;
logger.info(`Got ${docs.length} docs from searchRetriever.`);
}
const sortedDocs = await this.rerankDocs(
@ -269,6 +225,7 @@ class MetaSearchAgent implements MetaSearchAgentType {
embeddings,
optimizationMode,
);
logger.info(`Sorted docs length: ${sortedDocs?.length ?? 0}`);
return sortedDocs;
})
@ -296,7 +253,9 @@ class MetaSearchAgent implements MetaSearchAgentType {
embeddings: Embeddings,
optimizationMode: 'speed' | 'balanced' | 'quality',
) {
logger.info(`Reranking. Query="${query}", initial docs=${docs.length}, fileIds=${fileIds.length}`);
if (docs.length === 0 && fileIds.length === 0) {
logger.info('No docs or fileIds to rerank. Returning empty.');
return docs;
}
@ -307,32 +266,34 @@ class MetaSearchAgent implements MetaSearchAgentType {
const contentPath = filePath + '-extracted.json';
const embeddingsPath = filePath + '-embeddings.json';
logger.info(`Reading content from ${contentPath}`);
logger.info(`Reading embeddings from ${embeddingsPath}`);
const content = JSON.parse(fs.readFileSync(contentPath, 'utf8'));
const embeddings = JSON.parse(fs.readFileSync(embeddingsPath, 'utf8'));
const fileEmbeddings = JSON.parse(fs.readFileSync(embeddingsPath, 'utf8'));
const fileSimilaritySearchObject = content.contents.map(
(c: string, i) => {
return {
fileName: content.title,
content: c,
embeddings: embeddings.embeddings[i],
};
},
(c: string, i: number) => ({
fileName: content.title,
content: c,
embeddings: fileEmbeddings.embeddings[i],
}),
);
return fileSimilaritySearchObject;
})
.flat();
// If only summarizing, just return top docs
if (query.toLocaleLowerCase() === 'summarize') {
logger.info(`Query is "summarize". Returning top 15 docs from web sources.`);
return docs.slice(0, 15);
}
const docsWithContent = docs.filter(
(doc) => doc.pageContent && doc.pageContent.length > 0,
);
const docsWithContent = docs.filter((doc) => doc.pageContent && doc.pageContent.length > 0);
if (optimizationMode === 'speed' || this.config.rerank === false) {
logger.info(`Reranking in 'speed' mode or no rerank. Docs with content: ${docsWithContent.length}`);
if (filesData.length > 0) {
const [queryEmbedding] = await Promise.all([
embeddings.embedQuery(query),
@ -343,14 +304,13 @@ class MetaSearchAgent implements MetaSearchAgentType {
pageContent: fileData.content,
metadata: {
title: fileData.fileName,
url: `File`,
url: 'File',
},
});
});
const similarity = filesData.map((fileData, i) => {
const sim = computeSimilarity(queryEmbedding, fileData.embeddings);
return {
index: i,
similarity: sim,
@ -358,28 +318,23 @@ class MetaSearchAgent implements MetaSearchAgentType {
});
let sortedDocs = similarity
.filter(
(sim) => sim.similarity > (this.config.rerankThreshold ?? 0.3),
)
.filter((sim) => sim.similarity > (this.config.rerankThreshold ?? 0.3))
.sort((a, b) => b.similarity - a.similarity)
.slice(0, 15)
.map((sim) => fileDocs[sim.index]);
sortedDocs =
docsWithContent.length > 0 ? sortedDocs.slice(0, 8) : sortedDocs;
return [
...sortedDocs,
...docsWithContent.slice(0, 15 - sortedDocs.length),
];
sortedDocs = docsWithContent.length > 0 ? sortedDocs.slice(0, 8) : sortedDocs;
logger.info(`Final sorted docs in 'speed' mode: ${sortedDocs.length}`);
return [...sortedDocs, ...docsWithContent.slice(0, 15 - sortedDocs.length)];
} else {
logger.info('No file data, returning top 15 from docsWithContent.');
return docsWithContent.slice(0, 15);
}
} else if (optimizationMode === 'balanced') {
logger.info('Reranking in balanced mode.');
const [docEmbeddings, queryEmbedding] = await Promise.all([
embeddings.embedDocuments(
docsWithContent.map((doc) => doc.pageContent),
),
embeddings.embedDocuments(docsWithContent.map((doc) => doc.pageContent)),
embeddings.embedQuery(query),
]);
@ -389,7 +344,7 @@ class MetaSearchAgent implements MetaSearchAgentType {
pageContent: fileData.content,
metadata: {
title: fileData.fileName,
url: `File`,
url: 'File',
},
});
}),
@ -399,7 +354,6 @@ class MetaSearchAgent implements MetaSearchAgentType {
const similarity = docEmbeddings.map((docEmbedding, i) => {
const sim = computeSimilarity(queryEmbedding, docEmbedding);
return {
index: i,
similarity: sim,
@ -412,8 +366,13 @@ class MetaSearchAgent implements MetaSearchAgentType {
.slice(0, 15)
.map((sim) => docsWithContent[sim.index]);
logger.info(`Final sorted docs in 'balanced' mode: ${sortedDocs.length}`);
return sortedDocs;
}
// If "quality" is passed but not implemented, you might want to log or fallback
logger.warn(`Optimization mode "${optimizationMode}" not fully implemented. Returning docs as-is.`);
return docsWithContent.slice(0, 15);
}
private processDocs(docs: Document[]) {
@ -429,12 +388,16 @@ class MetaSearchAgent implements MetaSearchAgentType {
stream: IterableReadableStream<StreamEvent>,
emitter: eventEmitter,
) {
logger.info('Starting to stream chain events...');
for await (const event of stream) {
// You can add debug logs here to see each event
// logger.info(`Event: ${JSON.stringify(event, null, 2)}`);
if (
event.event === 'on_chain_end' &&
event.name === 'FinalSourceRetriever'
) {
``;
logger.info('FinalSourceRetriever ended, sending docs to front-end...');
emitter.emit(
'data',
JSON.stringify({ type: 'sources', data: event.data.output }),
@ -444,6 +407,7 @@ class MetaSearchAgent implements MetaSearchAgentType {
event.event === 'on_chain_stream' &&
event.name === 'FinalResponseGenerator'
) {
logger.info('Response chunk received, streaming to client...');
emitter.emit(
'data',
JSON.stringify({ type: 'response', data: event.data.chunk }),
@ -453,9 +417,11 @@ class MetaSearchAgent implements MetaSearchAgentType {
event.event === 'on_chain_end' &&
event.name === 'FinalResponseGenerator'
) {
logger.info('FinalResponseGenerator ended, signaling end of stream.');
emitter.emit('end');
}
}
logger.info('Finished streaming chain events.');
}
async searchAndAnswer(
@ -468,6 +434,11 @@ class MetaSearchAgent implements MetaSearchAgentType {
) {
const emitter = new eventEmitter();
logger.info(`Received query: "${message}"`);
logger.info(`History length: ${history.length}`);
logger.info(`Optimization mode: ${optimizationMode}`);
logger.info(`File IDs: ${fileIds.join(', ') || 'None'}`);
const answeringChain = await this.createAnsweringChain(
llm,
fileIds,
@ -475,17 +446,17 @@ class MetaSearchAgent implements MetaSearchAgentType {
optimizationMode,
);
const stream = answeringChain.streamEvents(
{
chat_history: history,
query: message,
},
{
version: 'v1',
},
);
this.handleStream(stream, emitter);
// .streamEvents(...) can throw, so a try/catch can help you catch/log errors
try {
const stream = answeringChain.streamEvents(
{ chat_history: history, query: message },
{ version: 'v1' },
);
this.handleStream(stream, emitter);
} catch (error: any) {
logger.error(`Error in searchAndAnswer streaming: ${error.message}`);
emitter.emit('error', error);
}
return emitter;
}

48
src/utils/checkSearch.ts Normal file
View File

@ -0,0 +1,48 @@
import { shouldPerformSearchPrompt } from '../prompts/shouldSearch';
import { HumanMessage } from '@langchain/core/messages';
import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
import logger from './logger'; // Ensure the logger module is correctly imported
/**
* Determines whether an external search is required.
* @param llm - The AI language model instance.
* @param query - The user's message.
* @param history - Chat history.
* @returns {Promise<boolean>} - True if search is needed, False otherwise.
*/
export const checkIfSearchIsNeeded = async (
llm: BaseChatModel,
query: string,
history: Array<[string, string]>
): Promise<boolean> => {
const prompt = shouldPerformSearchPrompt(query, history);
logger.info(`📜 Generated Search Decision Prompt for query "${query}":\n${prompt}`);
try {
const response = await llm.invoke([new HumanMessage({ content: prompt })]);
// Log the raw response from LLM
logger.info(`🔍 Raw Response from LLM for query "${query}": ${JSON.stringify(response)}`);
const decision = String(response?.content || '').trim().toLowerCase();
// Log the decision for debugging
logger.info(`🔍 Search Decision for query "${query}": "${decision}"`);
if (decision === 'yes') {
logger.debug(`✅ Search Required for Query: "${query}"`);
return true;
} else if (decision === 'no') {
logger.debug(`❌ No Search Needed for Query: "${query}"`);
return false;
} else {
logger.warn(`⚠️ Unexpected Search Decision Output: "${decision}" (Defaulting to NO)`);
return false;
}
} catch (error) {
logger.error(`❌ Error in Search Decision: ${error}`);
return false;
}
};

View File

@ -1,22 +1,28 @@
import winston from 'winston';
const { combine, timestamp, printf, colorize } = winston.format;
const logFormat = printf(({ timestamp, level, message }) => {
return `${timestamp} [${level.toUpperCase()}]: ${message}`;
});
const logger = winston.createLogger({
level: 'info',
level: process.env.LOG_LEVEL || 'info',
format: combine(
timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }),
colorize(), // optional color in dev
logFormat
),
transports: [
new winston.transports.Console({
format: winston.format.combine(
winston.format.colorize(),
winston.format.simple(),
),
}),
new winston.transports.File({
filename: 'app.log',
format: winston.format.combine(
winston.format.timestamp(),
winston.format.json(),
),
}),
// Console transport ensures Docker sees logs on stdout
new winston.transports.Console(),
new winston.transports.File({ filename: 'app.log' }),
// Optional: file transport if you also want to persist logs on the containers filesystem
// new winston.transports.File({ filename: 'app.log' }),
],
});
logger.info("✅ Winston logger active, logging to console!");
export default logger;

View File

@ -9,17 +9,14 @@ import type { Embeddings } from '@langchain/core/embeddings';
import type { IncomingMessage } from 'http';
import logger from '../utils/logger';
import { ChatOpenAI } from '@langchain/openai';
import {
getCustomOpenaiApiKey,
getCustomOpenaiApiUrl,
getCustomOpenaiModelName,
} from '../config';
export const handleConnection = async (
ws: WebSocket,
request: IncomingMessage,
) => {
try {
logger.info(`🔗 New WebSocket connection from ${request.socket.remoteAddress}`);
const searchParams = new URL(request.url, `http://${request.headers.host}`)
.searchParams;
@ -28,9 +25,11 @@ export const handleConnection = async (
getAvailableEmbeddingModelProviders(),
]);
// Retrieve query parameters
const chatModelProvider =
searchParams.get('chatModelProvider') ||
Object.keys(chatModelProviders)[0];
const chatModel =
searchParams.get('chatModel') ||
Object.keys(chatModelProviders[chatModelProvider])[0];
@ -38,47 +37,52 @@ export const handleConnection = async (
const embeddingModelProvider =
searchParams.get('embeddingModelProvider') ||
Object.keys(embeddingModelProviders)[0];
const embeddingModel =
searchParams.get('embeddingModel') ||
Object.keys(embeddingModelProviders[embeddingModelProvider])[0];
logger.debug(
`📜 WebSocket Connection - Model Selection:
🔹 Chat Model Provider: ${chatModelProvider}
🔹 Chat Model: ${chatModel}
🔹 Embedding Model Provider: ${embeddingModelProvider}
🔹 Embedding Model: ${embeddingModel}`
);
let llm: BaseChatModel | undefined;
let embeddings: Embeddings | undefined;
// Handle model selection
if (
chatModelProviders[chatModelProvider] &&
chatModelProviders[chatModelProvider][chatModel] &&
chatModelProvider != 'custom_openai'
chatModelProvider !== 'custom_openai'
) {
llm = chatModelProviders[chatModelProvider][chatModel]
.model as unknown as BaseChatModel | undefined;
} else if (chatModelProvider == 'custom_openai') {
const customOpenaiApiKey = getCustomOpenaiApiKey();
const customOpenaiApiUrl = getCustomOpenaiApiUrl();
const customOpenaiModelName = getCustomOpenaiModelName();
if (customOpenaiApiKey && customOpenaiApiUrl && customOpenaiModelName) {
llm = new ChatOpenAI({
modelName: customOpenaiModelName,
openAIApiKey: customOpenaiApiKey,
temperature: 0.7,
configuration: {
baseURL: customOpenaiApiUrl,
},
}) as unknown as BaseChatModel;
}
} else if (chatModelProvider === 'custom_openai') {
logger.info(`🛠 Using custom OpenAI model: ${chatModel}`);
llm = new ChatOpenAI({
modelName: chatModel,
openAIApiKey: searchParams.get('openAIApiKey'),
temperature: 0.7,
configuration: {
baseURL: searchParams.get('openAIBaseURL'),
},
}) as unknown as BaseChatModel;
}
if (
embeddingModelProviders[embeddingModelProvider] &&
embeddingModelProviders[embeddingModelProvider][embeddingModel]
) {
embeddings = embeddingModelProviders[embeddingModelProvider][
embeddingModel
].model as Embeddings | undefined;
embeddings = embeddingModelProviders[embeddingModelProvider][embeddingModel]
.model as Embeddings | undefined;
}
if (!llm || !embeddings) {
logger.error(`❌ Invalid LLM or embeddings model selection!`);
ws.send(
JSON.stringify({
type: 'error',
@ -87,10 +91,15 @@ export const handleConnection = async (
}),
);
ws.close();
return;
}
logger.info(`✅ WebSocket setup complete - Ready for messages`);
// Send an initial "open" signal once connection is ready
const interval = setInterval(() => {
if (ws.readyState === ws.OPEN) {
logger.debug(`📡 Sending initial 'open' signal to client`);
ws.send(
JSON.stringify({
type: 'signal',
@ -101,14 +110,19 @@ export const handleConnection = async (
}
}, 5);
ws.on(
'message',
async (message) =>
await handleMessage(message.toString(), ws, llm, embeddings),
);
// Handle incoming messages
ws.on('message', async (message) => {
logger.info(`📩 Received message from client: ${message.toString()}`);
await handleMessage(message.toString(), ws, llm, embeddings);
});
// Handle WebSocket closure
ws.on('close', () => {
logger.warn(`❌ WebSocket connection closed for ${request.socket.remoteAddress}`);
});
ws.on('close', () => logger.debug('Connection closed'));
} catch (err) {
logger.error(`❌ WebSocket error: ${err.message}`);
ws.send(
JSON.stringify({
type: 'error',
@ -117,6 +131,5 @@ export const handleConnection = async (
}),
);
ws.close();
logger.error(err);
}
};

View File

@ -5,9 +5,8 @@ import type { Embeddings } from '@langchain/core/embeddings';
import logger from '../utils/logger';
import db from '../db';
import { chats, messages as messagesSchema } from '../db/schema';
import { eq, gt, and } from 'drizzle-orm';
import { eq, asc, gt, and } from 'drizzle-orm';
import crypto from 'crypto';
import { isLibraryEnabled } from '../config';
import { getFileDetails } from '../utils/files';
import MetaSearchAgent, {
MetaSearchAgentType,
@ -95,8 +94,6 @@ const handleEmitterEvents = (
let recievedMessage = '';
let sources = [];
const libraryEnabled = isLibraryEnabled();
emitter.on('data', (data) => {
const parsedData = JSON.parse(data);
if (parsedData.type === 'response') {
@ -122,23 +119,23 @@ const handleEmitterEvents = (
emitter.on('end', () => {
ws.send(JSON.stringify({ type: 'messageEnd', messageId: messageId }));
if (libraryEnabled) {
db.insert(messagesSchema)
.values({
content: recievedMessage,
chatId: chatId,
messageId: messageId,
role: 'assistant',
metadata: JSON.stringify({
createdAt: new Date(),
...(sources && sources.length > 0 && { sources }),
}),
})
.execute();
}
db.insert(messagesSchema)
.values({
content: recievedMessage,
chatId: chatId,
messageId: messageId,
role: 'assistant',
metadata: JSON.stringify({
createdAt: new Date(),
...(sources && sources.length > 0 && { sources }),
}),
})
.execute();
});
emitter.on('error', (data) => {
const parsedData = JSON.parse(data);
logger.debug(`📡 Emitter received data: ${JSON.stringify(parsedData)}`);
ws.send(
JSON.stringify({
type: 'error',
@ -156,6 +153,7 @@ export const handleMessage = async (
embeddings: Embeddings,
) => {
try {
logger.debug('Handling message...');
const parsedWSMessage = JSON.parse(message) as WSMessage;
const parsedMessage = parsedWSMessage.message;
@ -193,8 +191,6 @@ export const handleMessage = async (
const handler: MetaSearchAgentType =
searchHandlers[parsedWSMessage.focusMode];
const libraryEnabled = isLibraryEnabled();
if (handler) {
try {
const emitter = await handler.searchAndAnswer(
@ -208,52 +204,50 @@ export const handleMessage = async (
handleEmitterEvents(emitter, ws, aiMessageId, parsedMessage.chatId);
if (libraryEnabled) {
const chat = await db.query.chats.findFirst({
where: eq(chats.id, parsedMessage.chatId),
});
const chat = await db.query.chats.findFirst({
where: eq(chats.id, parsedMessage.chatId),
});
if (!chat) {
await db
.insert(chats)
.values({
id: parsedMessage.chatId,
title: parsedMessage.content,
createdAt: new Date().toString(),
focusMode: parsedWSMessage.focusMode,
files: parsedWSMessage.files.map(getFileDetails),
})
.execute();
}
if (!chat) {
await db
.insert(chats)
.values({
id: parsedMessage.chatId,
title: parsedMessage.content,
createdAt: new Date().toString(),
focusMode: parsedWSMessage.focusMode,
files: parsedWSMessage.files.map(getFileDetails),
})
.execute();
}
const messageExists = await db.query.messages.findFirst({
where: eq(messagesSchema.messageId, humanMessageId),
});
const messageExists = await db.query.messages.findFirst({
where: eq(messagesSchema.messageId, humanMessageId),
});
if (!messageExists) {
await db
.insert(messagesSchema)
.values({
content: parsedMessage.content,
chatId: parsedMessage.chatId,
messageId: humanMessageId,
role: 'user',
metadata: JSON.stringify({
createdAt: new Date(),
}),
})
.execute();
} else {
await db
.delete(messagesSchema)
.where(
and(
gt(messagesSchema.id, messageExists.id),
eq(messagesSchema.chatId, parsedMessage.chatId),
),
)
.execute();
}
if (!messageExists) {
await db
.insert(messagesSchema)
.values({
content: parsedMessage.content,
chatId: parsedMessage.chatId,
messageId: humanMessageId,
role: 'user',
metadata: JSON.stringify({
createdAt: new Date(),
}),
})
.execute();
} else {
await db
.delete(messagesSchema)
.where(
and(
gt(messagesSchema.id, messageExists.id),
eq(messagesSchema.chatId, parsedMessage.chatId),
),
)
.execute();
}
} catch (err) {
console.log(err);

View File

@ -14,9 +14,9 @@ const montserrat = Montserrat({
});
export const metadata: Metadata = {
title: 'Perplexica - Chat with the internet',
title: 'gochat247 - aibot - Chat with the internet',
description:
'Perplexica is an AI powered chatbot that is connected to the internet.',
'gochat247 - aibot is an AI powered chatbot that is connected to the internet.',
};
export default function RootLayout({

View File

@ -2,34 +2,10 @@ import { Metadata } from 'next';
import React from 'react';
export const metadata: Metadata = {
title: 'Library - Perplexica',
title: 'Library - gochat247 - aibot',
};
const Layout = async ({ children }: { children: React.ReactNode }) => {
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/config/preferences`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
},
);
const data = await res.json();
const { isLibraryEnabled } = data;
if (!isLibraryEnabled) {
return (
<div className="flex flex-row items-center justify-center min-h-screen w-full">
<p className="text-lg dark:text-white/70 text-black/70">
Library is disabled
</p>
</div>
);
}
const Layout = ({ children }: { children: React.ReactNode }) => {
return <div>{children}</div>;
};

View File

@ -1,9 +1,8 @@
'use client';
import DeleteChat from '@/components/DeleteChat';
import { formatTimeDifference } from '@/lib/utils';
import { cn } from '@/lib/utils';
import { BookOpenText, ClockIcon } from 'lucide-react';
import { cn, formatTimeDifference } from '@/lib/utils';
import { BookOpenText, ClockIcon, Delete, ScanEye } from 'lucide-react';
import Link from 'next/link';
import { useEffect, useState } from 'react';

View File

@ -3,8 +3,8 @@ import { Metadata } from 'next';
import { Suspense } from 'react';
export const metadata: Metadata = {
title: 'Chat - Perplexica',
description: 'Chat with the internet, chat with Perplexica.',
title: 'Chat - gochat247 - aibot',
description: 'Chat with the internet, chat with gochat247 - aibot.',
};
const Home = () => {

View File

@ -1,914 +0,0 @@
'use client';
import { Settings as SettingsIcon, ArrowLeft, Loader2 } from 'lucide-react';
import { useEffect, useState } from 'react';
import { cn } from '@/lib/utils';
import { Switch } from '@headlessui/react';
import ThemeSwitcher from '@/components/theme/Switcher';
import { ImagesIcon, VideoIcon } from 'lucide-react';
import Link from 'next/link';
interface SettingsType {
chatModelProviders: {
[key: string]: [Record<string, any>];
};
embeddingModelProviders: {
[key: string]: [Record<string, any>];
};
openaiApiKey: string;
groqApiKey: string;
anthropicApiKey: string;
geminiApiKey: string;
ollamaApiUrl: string;
customOpenaiApiKey: string;
customOpenaiApiUrl: string;
customOpenaiModelName: string;
}
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
isSaving?: boolean;
onSave?: (value: string) => void;
}
const Input = ({ className, isSaving, onSave, ...restProps }: InputProps) => {
return (
<div className="relative">
<input
{...restProps}
className={cn(
'bg-light-secondary dark:bg-dark-secondary w-full px-3 py-2 flex items-center overflow-hidden border border-light-200 dark:border-dark-200 dark:text-white rounded-lg text-sm',
isSaving && 'pr-10',
className,
)}
onBlur={(e) => onSave?.(e.target.value)}
/>
{isSaving && (
<div className="absolute right-3 top-1/2 -translate-y-1/2">
<Loader2
size={16}
className="animate-spin text-black/70 dark:text-white/70"
/>
</div>
)}
</div>
);
};
const Select = ({
className,
options,
...restProps
}: React.SelectHTMLAttributes<HTMLSelectElement> & {
options: { value: string; label: string; disabled?: boolean }[];
}) => {
return (
<select
{...restProps}
className={cn(
'bg-light-secondary dark:bg-dark-secondary px-3 py-2 flex items-center overflow-hidden border border-light-200 dark:border-dark-200 dark:text-white rounded-lg text-sm',
className,
)}
>
{options.map(({ label, value, disabled }) => (
<option key={value} value={value} disabled={disabled}>
{label}
</option>
))}
</select>
);
};
const SettingsSection = ({
title,
children,
}: {
title: string;
children: React.ReactNode;
}) => (
<div className="flex flex-col space-y-4 p-4 bg-light-secondary/50 dark:bg-dark-secondary/50 rounded-xl border border-light-200 dark:border-dark-200">
<h2 className="text-black/90 dark:text-white/90 font-medium">{title}</h2>
{children}
</div>
);
const Page = () => {
const [config, setConfig] = useState<SettingsType | null>(null);
const [chatModels, setChatModels] = useState<Record<string, any>>({});
const [embeddingModels, setEmbeddingModels] = useState<Record<string, any>>(
{},
);
const [selectedChatModelProvider, setSelectedChatModelProvider] = useState<
string | null
>(null);
const [selectedChatModel, setSelectedChatModel] = useState<string | null>(
null,
);
const [selectedEmbeddingModelProvider, setSelectedEmbeddingModelProvider] =
useState<string | null>(null);
const [selectedEmbeddingModel, setSelectedEmbeddingModel] = useState<
string | null
>(null);
const [isLoading, setIsLoading] = useState(false);
const [automaticImageSearch, setAutomaticImageSearch] = useState(false);
const [automaticVideoSearch, setAutomaticVideoSearch] = useState(false);
const [savingStates, setSavingStates] = useState<Record<string, boolean>>({});
const [password, setPassword] = useState('');
const [passwordSubmitted, setPasswordSubmitted] = useState(false);
const [isPasswordValid, setIsPasswordValid] = useState(true);
const handlePasswordSubmit = async () => {
setIsLoading(true);
setPasswordSubmitted(true);
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/config`, {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${password}`,
},
});
if (res.status === 401) {
setIsPasswordValid(false);
setPasswordSubmitted(false);
setIsLoading(false);
return;
} else {
setIsPasswordValid(true);
}
const data = (await res.json()) as SettingsType;
setConfig(data);
const chatModelProvidersKeys = Object.keys(data.chatModelProviders || {});
const embeddingModelProvidersKeys = Object.keys(
data.embeddingModelProviders || {},
);
const defaultChatModelProvider =
chatModelProvidersKeys.length > 0 ? chatModelProvidersKeys[0] : '';
const defaultEmbeddingModelProvider =
embeddingModelProvidersKeys.length > 0
? embeddingModelProvidersKeys[0]
: '';
const chatModelProvider =
localStorage.getItem('chatModelProvider') ||
defaultChatModelProvider ||
'';
const chatModel =
localStorage.getItem('chatModel') ||
(data.chatModelProviders &&
data.chatModelProviders[chatModelProvider]?.length > 0
? data.chatModelProviders[chatModelProvider][0].name
: undefined) ||
'';
const embeddingModelProvider =
localStorage.getItem('embeddingModelProvider') ||
defaultEmbeddingModelProvider ||
'';
const embeddingModel =
localStorage.getItem('embeddingModel') ||
(data.embeddingModelProviders &&
data.embeddingModelProviders[embeddingModelProvider]?.[0].name) ||
'';
setSelectedChatModelProvider(chatModelProvider);
setSelectedChatModel(chatModel);
setSelectedEmbeddingModelProvider(embeddingModelProvider);
setSelectedEmbeddingModel(embeddingModel);
setChatModels(data.chatModelProviders || {});
setEmbeddingModels(data.embeddingModelProviders || {});
setAutomaticImageSearch(
localStorage.getItem('autoImageSearch') === 'true',
);
setAutomaticVideoSearch(
localStorage.getItem('autoVideoSearch') === 'true',
);
setIsLoading(false);
};
useEffect(() => {
const fetchConfig = async () => {
setIsLoading(true);
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/config`, {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${password}`,
},
});
const data = (await res.json()) as SettingsType;
setConfig(data);
const chatModelProvidersKeys = Object.keys(data.chatModelProviders || {});
const embeddingModelProvidersKeys = Object.keys(
data.embeddingModelProviders || {},
);
const defaultChatModelProvider =
chatModelProvidersKeys.length > 0 ? chatModelProvidersKeys[0] : '';
const defaultEmbeddingModelProvider =
embeddingModelProvidersKeys.length > 0
? embeddingModelProvidersKeys[0]
: '';
const chatModelProvider =
localStorage.getItem('chatModelProvider') ||
defaultChatModelProvider ||
'';
const chatModel =
localStorage.getItem('chatModel') ||
(data.chatModelProviders &&
data.chatModelProviders[chatModelProvider]?.length > 0
? data.chatModelProviders[chatModelProvider][0].name
: undefined) ||
'';
const embeddingModelProvider =
localStorage.getItem('embeddingModelProvider') ||
defaultEmbeddingModelProvider ||
'';
const embeddingModel =
localStorage.getItem('embeddingModel') ||
(data.embeddingModelProviders &&
data.embeddingModelProviders[embeddingModelProvider]?.[0].name) ||
'';
setSelectedChatModelProvider(chatModelProvider);
setSelectedChatModel(chatModel);
setSelectedEmbeddingModelProvider(embeddingModelProvider);
setSelectedEmbeddingModel(embeddingModel);
setChatModels(data.chatModelProviders || {});
setEmbeddingModels(data.embeddingModelProviders || {});
setAutomaticImageSearch(
localStorage.getItem('autoImageSearch') === 'true',
);
setAutomaticVideoSearch(
localStorage.getItem('autoVideoSearch') === 'true',
);
setIsLoading(false);
};
fetchConfig();
}, []);
const saveConfig = async (key: string, value: any) => {
setSavingStates((prev) => ({ ...prev, [key]: true }));
try {
const updatedConfig = {
...config,
[key]: value,
} as SettingsType;
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/config`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${password}`,
},
body: JSON.stringify(updatedConfig),
},
);
if (response.status === 401) {
throw new Error('Unauthorized');
}
if (!response.ok) {
throw new Error('Failed to update config');
}
setConfig(updatedConfig);
if (
key.toLowerCase().includes('api') ||
key.toLowerCase().includes('url')
) {
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/config`, {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${password}`,
},
});
if (!res.ok) {
throw new Error('Failed to fetch updated config');
}
const data = await res.json();
setChatModels(data.chatModelProviders || {});
setEmbeddingModels(data.embeddingModelProviders || {});
const currentChatProvider = selectedChatModelProvider;
const newChatProviders = Object.keys(data.chatModelProviders || {});
if (!currentChatProvider && newChatProviders.length > 0) {
const firstProvider = newChatProviders[0];
const firstModel = data.chatModelProviders[firstProvider]?.[0]?.name;
if (firstModel) {
setSelectedChatModelProvider(firstProvider);
setSelectedChatModel(firstModel);
localStorage.setItem('chatModelProvider', firstProvider);
localStorage.setItem('chatModel', firstModel);
}
} else if (
currentChatProvider &&
(!data.chatModelProviders ||
!data.chatModelProviders[currentChatProvider] ||
!Array.isArray(data.chatModelProviders[currentChatProvider]) ||
data.chatModelProviders[currentChatProvider].length === 0)
) {
const firstValidProvider = Object.entries(
data.chatModelProviders || {},
).find(
([_, models]) => Array.isArray(models) && models.length > 0,
)?.[0];
if (firstValidProvider) {
setSelectedChatModelProvider(firstValidProvider);
setSelectedChatModel(
data.chatModelProviders[firstValidProvider][0].name,
);
localStorage.setItem('chatModelProvider', firstValidProvider);
localStorage.setItem(
'chatModel',
data.chatModelProviders[firstValidProvider][0].name,
);
} else {
setSelectedChatModelProvider(null);
setSelectedChatModel(null);
localStorage.removeItem('chatModelProvider');
localStorage.removeItem('chatModel');
}
}
const currentEmbeddingProvider = selectedEmbeddingModelProvider;
const newEmbeddingProviders = Object.keys(
data.embeddingModelProviders || {},
);
if (!currentEmbeddingProvider && newEmbeddingProviders.length > 0) {
const firstProvider = newEmbeddingProviders[0];
const firstModel =
data.embeddingModelProviders[firstProvider]?.[0]?.name;
if (firstModel) {
setSelectedEmbeddingModelProvider(firstProvider);
setSelectedEmbeddingModel(firstModel);
localStorage.setItem('embeddingModelProvider', firstProvider);
localStorage.setItem('embeddingModel', firstModel);
}
} else if (
currentEmbeddingProvider &&
(!data.embeddingModelProviders ||
!data.embeddingModelProviders[currentEmbeddingProvider] ||
!Array.isArray(
data.embeddingModelProviders[currentEmbeddingProvider],
) ||
data.embeddingModelProviders[currentEmbeddingProvider].length === 0)
) {
const firstValidProvider = Object.entries(
data.embeddingModelProviders || {},
).find(
([_, models]) => Array.isArray(models) && models.length > 0,
)?.[0];
if (firstValidProvider) {
setSelectedEmbeddingModelProvider(firstValidProvider);
setSelectedEmbeddingModel(
data.embeddingModelProviders[firstValidProvider][0].name,
);
localStorage.setItem('embeddingModelProvider', firstValidProvider);
localStorage.setItem(
'embeddingModel',
data.embeddingModelProviders[firstValidProvider][0].name,
);
} else {
setSelectedEmbeddingModelProvider(null);
setSelectedEmbeddingModel(null);
localStorage.removeItem('embeddingModelProvider');
localStorage.removeItem('embeddingModel');
}
}
setConfig(data);
}
if (key === 'automaticImageSearch') {
localStorage.setItem('autoImageSearch', value.toString());
} else if (key === 'automaticVideoSearch') {
localStorage.setItem('autoVideoSearch', value.toString());
} else if (key === 'chatModelProvider') {
localStorage.setItem('chatModelProvider', value);
} else if (key === 'chatModel') {
localStorage.setItem('chatModel', value);
} else if (key === 'embeddingModelProvider') {
localStorage.setItem('embeddingModelProvider', value);
} else if (key === 'embeddingModel') {
localStorage.setItem('embeddingModel', value);
}
} catch (err) {
console.error('Failed to save:', err);
setConfig((prev) => ({ ...prev! }));
} finally {
setTimeout(() => {
setSavingStates((prev) => ({ ...prev, [key]: false }));
}, 500);
}
};
return (
<div className="max-w-3xl mx-auto">
<div className="flex flex-col pt-4">
<div className="flex items-center space-x-2">
<Link href="/" className="lg:hidden">
<ArrowLeft className="text-black/70 dark:text-white/70" />
</Link>
<div className="flex flex-row space-x-0.5 items-center">
<SettingsIcon size={23} />
<h1 className="text-3xl font-medium p-2">Settings</h1>
</div>
</div>
<hr className="border-t border-[#2B2C2C] my-4 w-full" />
</div>
{isLoading ? (
<div className="flex flex-row items-center justify-center min-h-[50vh]">
<svg
aria-hidden="true"
className="w-8 h-8 text-light-200 fill-light-secondary dark:text-[#202020] animate-spin dark:fill-[#ffffff3b]"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M100 50.5908C100.003 78.2051 78.1951 100.003 50.5908 100C22.9765 99.9972 0.997224 78.018 1 50.4037C1.00281 22.7993 22.8108 0.997224 50.4251 1C78.0395 1.00281 100.018 22.8108 100 50.4251ZM9.08164 50.594C9.06312 73.3997 27.7909 92.1272 50.5966 92.1457C73.4023 92.1642 92.1298 73.4365 92.1483 50.6308C92.1669 27.8251 73.4392 9.0973 50.6335 9.07878C27.8278 9.06026 9.10003 27.787 9.08164 50.594Z"
fill="currentColor"
/>
<path
d="M93.9676 39.0409C96.393 38.4037 97.8624 35.9116 96.9801 33.5533C95.1945 28.8227 92.871 24.3692 90.0681 20.348C85.6237 14.1775 79.4473 9.36872 72.0454 6.45794C64.6435 3.54717 56.3134 2.65431 48.3133 3.89319C45.869 4.27179 44.3768 6.77534 45.014 9.20079C45.6512 11.6262 48.1343 13.0956 50.5786 12.717C56.5073 11.8281 62.5542 12.5399 68.0406 14.7911C73.527 17.0422 78.2187 20.7487 81.5841 25.4923C83.7976 28.5886 85.4467 32.059 86.4416 35.7474C87.1273 38.1189 89.5423 39.6781 91.9676 39.0409Z"
fill="currentFill"
/>
</svg>
</div>
) : !passwordSubmitted ? (
<div className="flex flex-col max-w-md mx-auto mt-10 p-6 bg-light-secondary dark:bg-dark-secondary border border-light-200 dark:border-dark-200 rounded-2xl">
<h2 className="text-sm text-black/80 dark:text-white/80">
Enter the password to access the settings
</h2>
<div className="flex flex-col">
<Input
type="password"
placeholder="Password"
className="mt-4"
disabled={isLoading}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
{!isPasswordValid && (
<p className="text-xs text-red-500 mt-2">
Password is incorrect
</p>
)}
<button
onClick={handlePasswordSubmit}
disabled={isLoading}
className="bg-[#24A0ED] flex flex-row items-center text-xs mt-4 text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full px-4 py-2"
>
Submit
</button>
</div>
) : (
config && (
<div className="flex flex-col space-y-6 pb-28 lg:pb-8">
<SettingsSection title="Appearance">
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Theme
</p>
<ThemeSwitcher />
</div>
</SettingsSection>
<SettingsSection title="Automatic Search">
<div className="flex flex-col space-y-4">
<div className="flex items-center justify-between p-3 bg-light-secondary dark:bg-dark-secondary rounded-lg hover:bg-light-200 dark:hover:bg-dark-200 transition-colors">
<div className="flex items-center space-x-3">
<div className="p-2 bg-light-200 dark:bg-dark-200 rounded-lg">
<ImagesIcon
size={18}
className="text-black/70 dark:text-white/70"
/>
</div>
<div>
<p className="text-sm text-black/90 dark:text-white/90 font-medium">
Automatic Image Search
</p>
<p className="text-xs text-black/60 dark:text-white/60 mt-0.5">
Automatically search for relevant images in chat
responses
</p>
</div>
</div>
<Switch
checked={automaticImageSearch}
onChange={(checked) => {
setAutomaticImageSearch(checked);
saveConfig('automaticImageSearch', checked);
}}
className={cn(
automaticImageSearch
? 'bg-[#24A0ED]'
: 'bg-light-200 dark:bg-dark-200',
'relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none',
)}
>
<span
className={cn(
automaticImageSearch
? 'translate-x-6'
: 'translate-x-1',
'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
)}
/>
</Switch>
</div>
<div className="flex items-center justify-between p-3 bg-light-secondary dark:bg-dark-secondary rounded-lg hover:bg-light-200 dark:hover:bg-dark-200 transition-colors">
<div className="flex items-center space-x-3">
<div className="p-2 bg-light-200 dark:bg-dark-200 rounded-lg">
<VideoIcon
size={18}
className="text-black/70 dark:text-white/70"
/>
</div>
<div>
<p className="text-sm text-black/90 dark:text-white/90 font-medium">
Automatic Video Search
</p>
<p className="text-xs text-black/60 dark:text-white/60 mt-0.5">
Automatically search for relevant videos in chat
responses
</p>
</div>
</div>
<Switch
checked={automaticVideoSearch}
onChange={(checked) => {
setAutomaticVideoSearch(checked);
saveConfig('automaticVideoSearch', checked);
}}
className={cn(
automaticVideoSearch
? 'bg-[#24A0ED]'
: 'bg-light-200 dark:bg-dark-200',
'relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none',
)}
>
<span
className={cn(
automaticVideoSearch
? 'translate-x-6'
: 'translate-x-1',
'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
)}
/>
</Switch>
</div>
</div>
</SettingsSection>
<SettingsSection title="Model Settings">
{config.chatModelProviders && (
<div className="flex flex-col space-y-4">
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Chat Model Provider
</p>
<Select
value={selectedChatModelProvider ?? undefined}
onChange={(e) => {
const value = e.target.value;
setSelectedChatModelProvider(value);
saveConfig('chatModelProvider', value);
const firstModel =
config.chatModelProviders[value]?.[0]?.name;
if (firstModel) {
setSelectedChatModel(firstModel);
saveConfig('chatModel', firstModel);
}
}}
options={Object.keys(config.chatModelProviders).map(
(provider) => ({
value: provider,
label:
provider.charAt(0).toUpperCase() +
provider.slice(1),
}),
)}
/>
</div>
{selectedChatModelProvider &&
selectedChatModelProvider != 'custom_openai' && (
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Chat Model
</p>
<Select
value={selectedChatModel ?? undefined}
onChange={(e) => {
const value = e.target.value;
setSelectedChatModel(value);
saveConfig('chatModel', value);
}}
options={(() => {
const chatModelProvider =
config.chatModelProviders[
selectedChatModelProvider
];
return chatModelProvider
? chatModelProvider.length > 0
? chatModelProvider.map((model) => ({
value: model.name,
label: model.displayName,
}))
: [
{
value: '',
label: 'No models available',
disabled: true,
},
]
: [
{
value: '',
label:
'Invalid provider, please check backend logs',
disabled: true,
},
];
})()}
/>
</div>
)}
</div>
)}
{selectedChatModelProvider &&
selectedChatModelProvider === 'custom_openai' && (
<div className="flex flex-col space-y-4">
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Model Name
</p>
<Input
type="text"
placeholder="Model name"
value={config.customOpenaiModelName}
isSaving={savingStates['customOpenaiModelName']}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setConfig((prev) => ({
...prev!,
customOpenaiModelName: e.target.value,
}));
}}
onSave={(value) =>
saveConfig('customOpenaiModelName', value)
}
/>
</div>
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Custom OpenAI API Key
</p>
<Input
type="text"
placeholder="Custom OpenAI API Key"
value={config.customOpenaiApiKey}
isSaving={savingStates['customOpenaiApiKey']}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setConfig((prev) => ({
...prev!,
customOpenaiApiKey: e.target.value,
}));
}}
onSave={(value) =>
saveConfig('customOpenaiApiKey', value)
}
/>
</div>
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Custom OpenAI Base URL
</p>
<Input
type="text"
placeholder="Custom OpenAI Base URL"
value={config.customOpenaiApiUrl}
isSaving={savingStates['customOpenaiApiUrl']}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setConfig((prev) => ({
...prev!,
customOpenaiApiUrl: e.target.value,
}));
}}
onSave={(value) =>
saveConfig('customOpenaiApiUrl', value)
}
/>
</div>
</div>
)}
{config.embeddingModelProviders && (
<div className="flex flex-col space-y-4 mt-4 pt-4 border-t border-light-200 dark:border-dark-200">
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Embedding Model Provider
</p>
<Select
value={selectedEmbeddingModelProvider ?? undefined}
onChange={(e) => {
const value = e.target.value;
setSelectedEmbeddingModelProvider(value);
saveConfig('embeddingModelProvider', value);
const firstModel =
config.embeddingModelProviders[value]?.[0]?.name;
if (firstModel) {
setSelectedEmbeddingModel(firstModel);
saveConfig('embeddingModel', firstModel);
}
}}
options={Object.keys(config.embeddingModelProviders).map(
(provider) => ({
value: provider,
label:
provider.charAt(0).toUpperCase() +
provider.slice(1),
}),
)}
/>
</div>
{selectedEmbeddingModelProvider && (
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Embedding Model
</p>
<Select
value={selectedEmbeddingModel ?? undefined}
onChange={(e) => {
const value = e.target.value;
setSelectedEmbeddingModel(value);
saveConfig('embeddingModel', value);
}}
options={(() => {
const embeddingModelProvider =
config.embeddingModelProviders[
selectedEmbeddingModelProvider
];
return embeddingModelProvider
? embeddingModelProvider.length > 0
? embeddingModelProvider.map((model) => ({
value: model.name,
label: model.displayName,
}))
: [
{
value: '',
label: 'No models available',
disabled: true,
},
]
: [
{
value: '',
label:
'Invalid provider, please check backend logs',
disabled: true,
},
];
})()}
/>
</div>
)}
</div>
)}
</SettingsSection>
<SettingsSection title="API Keys">
<div className="flex flex-col space-y-4">
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
OpenAI API Key
</p>
<Input
type="text"
placeholder="OpenAI API Key"
value={config.openaiApiKey}
isSaving={savingStates['openaiApiKey']}
onChange={(e) => {
setConfig((prev) => ({
...prev!,
openaiApiKey: e.target.value,
}));
}}
onSave={(value) => saveConfig('openaiApiKey', value)}
/>
</div>
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Ollama API URL
</p>
<Input
type="text"
placeholder="Ollama API URL"
value={config.ollamaApiUrl}
isSaving={savingStates['ollamaApiUrl']}
onChange={(e) => {
setConfig((prev) => ({
...prev!,
ollamaApiUrl: e.target.value,
}));
}}
onSave={(value) => saveConfig('ollamaApiUrl', value)}
/>
</div>
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
GROQ API Key
</p>
<Input
type="text"
placeholder="GROQ API Key"
value={config.groqApiKey}
isSaving={savingStates['groqApiKey']}
onChange={(e) => {
setConfig((prev) => ({
...prev!,
groqApiKey: e.target.value,
}));
}}
onSave={(value) => saveConfig('groqApiKey', value)}
/>
</div>
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Anthropic API Key
</p>
<Input
type="text"
placeholder="Anthropic API key"
value={config.anthropicApiKey}
isSaving={savingStates['anthropicApiKey']}
onChange={(e) => {
setConfig((prev) => ({
...prev!,
anthropicApiKey: e.target.value,
}));
}}
onSave={(value) => saveConfig('anthropicApiKey', value)}
/>
</div>
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Gemini API Key
</p>
<Input
type="text"
placeholder="Gemini API key"
value={config.geminiApiKey}
isSaving={savingStates['geminiApiKey']}
onChange={(e) => {
setConfig((prev) => ({
...prev!,
geminiApiKey: e.target.value,
}));
}}
onSave={(value) => saveConfig('geminiApiKey', value)}
/>
</div>
</div>
</SettingsSection>
</div>
)
)}
</div>
);
};
export default Page;

View File

@ -10,7 +10,7 @@ import { toast } from 'sonner';
import { useSearchParams } from 'next/navigation';
import { getSuggestions } from '@/lib/actions';
import { Settings } from 'lucide-react';
import Link from 'next/link';
import SettingsDialog from './SettingsDialog';
import NextError from 'next/error';
export type Message = {
@ -40,7 +40,6 @@ const useSocket = (
const isCleaningUpRef = useRef(false);
const MAX_RETRIES = 3;
const INITIAL_BACKOFF = 1000; // 1 second
const isConnectionErrorRef = useRef(false);
const getBackoffDelay = (retryCount: number) => {
return Math.min(INITIAL_BACKOFF * Math.pow(2, retryCount), 10000); // Cap at 10 seconds
@ -59,17 +58,14 @@ const useSocket = (
let embeddingModelProvider = localStorage.getItem(
'embeddingModelProvider',
);
const autoImageSearch = localStorage.getItem('autoImageSearch');
const autoVideoSearch = localStorage.getItem('autoVideoSearch');
if (!autoImageSearch) {
localStorage.setItem('autoImageSearch', 'true');
}
if (!autoVideoSearch) {
localStorage.setItem('autoVideoSearch', 'false');
}
let openAIBaseURL =
chatModelProvider === 'custom_openai'
? localStorage.getItem('openAIBaseURL')
: null;
let openAIPIKey =
chatModelProvider === 'custom_openai'
? localStorage.getItem('openAIApiKey')
: null;
const providers = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/models`,
@ -98,13 +94,21 @@ const useSocket = (
chatModelProvider =
chatModelProvider || Object.keys(chatModelProviders)[0];
chatModel = Object.keys(chatModelProviders[chatModelProvider])[0];
if (chatModelProvider === 'custom_openai') {
toast.error(
'Seems like you are using the custom OpenAI provider, please open the settings and enter a model name to use.',
);
setError(true);
return;
} else {
chatModel = Object.keys(chatModelProviders[chatModelProvider])[0];
if (
!chatModelProviders ||
Object.keys(chatModelProviders).length === 0
)
return toast.error('No chat models available');
if (
!chatModelProviders ||
Object.keys(chatModelProviders).length === 0
)
return toast.error('No chat models available');
}
}
if (!embeddingModel || !embeddingModelProvider) {
@ -135,7 +139,9 @@ const useSocket = (
if (
Object.keys(chatModelProviders).length > 0 &&
!chatModelProviders[chatModelProvider]
(((!openAIBaseURL || !openAIPIKey) &&
chatModelProvider === 'custom_openai') ||
!chatModelProviders[chatModelProvider])
) {
const chatModelProvidersKeys = Object.keys(chatModelProviders);
chatModelProvider =
@ -143,11 +149,23 @@ const useSocket = (
(key) => Object.keys(chatModelProviders[key]).length > 0,
) || chatModelProvidersKeys[0];
if (
chatModelProvider === 'custom_openai' &&
(!openAIBaseURL || !openAIPIKey)
) {
toast.error(
'Seems like you are using the custom OpenAI provider, please open the settings and configure the API key and base URL',
);
setError(true);
return;
}
localStorage.setItem('chatModelProvider', chatModelProvider);
}
if (
chatModelProvider &&
(!openAIBaseURL || !openAIPIKey) &&
!chatModelProviders[chatModelProvider][chatModel]
) {
chatModel = Object.keys(
@ -233,8 +251,6 @@ const useSocket = (
console.debug(new Date(), 'ws:connected');
}
if (data.type === 'error') {
isConnectionErrorRef.current = true;
setError(true);
toast.error(data.data);
}
});
@ -249,7 +265,7 @@ const useSocket = (
clearTimeout(timeoutId);
setIsWSReady(false);
console.debug(new Date(), 'ws:disconnected');
if (!isCleaningUpRef.current && !isConnectionErrorRef.current) {
if (!isCleaningUpRef.current) {
toast.error('Connection lost. Attempting to reconnect...');
attemptReconnect();
}
@ -579,17 +595,6 @@ const ChatWindow = ({ id }: { id?: string }) => {
}),
);
}
const autoImageSearch = localStorage.getItem('autoImageSearch');
const autoVideoSearch = localStorage.getItem('autoVideoSearch');
if (autoImageSearch === 'true') {
document.getElementById('search-images')?.click();
}
if (autoVideoSearch === 'true') {
document.getElementById('search-videos')?.click();
}
}
};
@ -624,15 +629,17 @@ const ChatWindow = ({ id }: { id?: string }) => {
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>
<Settings
className="cursor-pointer lg:hidden"
onClick={() => setIsSettingsOpen(true)}
/>
</div>
<div className="flex flex-col items-center justify-center min-h-screen">
<p className="dark:text-white/70 text-black/70 text-sm">
Failed to connect to the server. Please try again later.
</p>
</div>
<SettingsDialog isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} />
</div>
);
}

View File

@ -1,8 +1,8 @@
import { Settings } from 'lucide-react';
import EmptyChatMessageInput from './EmptyChatMessageInput';
import SettingsDialog from './SettingsDialog';
import { useState } from 'react';
import { File } from './ChatWindow';
import Link from 'next/link';
const EmptyChat = ({
sendMessage,
@ -29,14 +29,16 @@ const EmptyChat = ({
return (
<div className="relative">
<SettingsDialog isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} />
<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>
<Settings
className="cursor-pointer lg:hidden"
onClick={() => setIsSettingsOpen(true)}
/>
</div>
<div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-8">
<h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
Research begins here.
gochat247 - aibot : knowledge with some privacy
</h2>
<EmptyChatMessageInput
sendMessage={sendMessage}

View File

@ -68,7 +68,7 @@ const MessageBox = ({
return (
<div>
{message.role === 'user' && (
<div className={cn('w-full', messageIndex === 0 ? 'pt-16' : 'pt-8', 'break-words')}>
<div className={cn('w-full', messageIndex === 0 ? 'pt-16' : 'pt-8')}>
<h2 className="text-black dark:text-white font-medium text-3xl lg:w-9/12">
{message.content}
</h2>

View File

@ -110,7 +110,7 @@ const Attach = ({
<button
type="button"
onClick={() => fileInputRef.current.click()}
className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
className="flex flex-row items-center space-x-1 text-white/70 hover:text-white transition duration-200"
>
<input
type="file"
@ -128,7 +128,7 @@ const Attach = ({
setFiles([]);
setFileIds([]);
}}
className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
className="flex flex-row items-center space-x-1 text-white/70 hover:text-white transition duration-200"
>
<Trash size={14} />
<p className="text-xs">Clear</p>
@ -145,7 +145,7 @@ const Attach = ({
<div className="bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
<File size={16} className="text-white/70" />
</div>
<p className="text-black/70 dark:text-white/70 text-sm">
<p className="text-white/70 text-sm">
{file.fileName.length > 25
? file.fileName.replace(/\.\w+$/, '').substring(0, 25) +
'...' +

View File

@ -82,7 +82,7 @@ const AttachSmall = ({
<button
type="button"
onClick={() => fileInputRef.current.click()}
className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
className="flex flex-row items-center space-x-1 text-white/70 hover:text-white transition duration-200"
>
<input
type="file"
@ -100,7 +100,7 @@ const AttachSmall = ({
setFiles([]);
setFileIds([]);
}}
className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
className="flex flex-row items-center space-x-1 text-white/70 hover:text-white transition duration-200"
>
<Trash size={14} />
<p className="text-xs">Clear</p>
@ -117,7 +117,7 @@ const AttachSmall = ({
<div className="bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
<File size={16} className="text-white/70" />
</div>
<p className="text-black/70 dark:text-white/70 text-sm">
<p className="text-white/70 text-sm">
{file.fileName.length > 25
? file.fileName.replace(/\.\w+$/, '').substring(0, 25) +
'...' +

View File

@ -1,6 +1,5 @@
import { cn } from '@/lib/utils';
import { Switch } from '@headlessui/react';
import { useEffect } from 'react';
const CopilotToggle = ({
copilotEnabled,
@ -9,33 +8,11 @@ const CopilotToggle = ({
copilotEnabled: boolean;
setCopilotEnabled: (enabled: boolean) => void;
}) => {
const fetchAndSetCopilotEnabled = async () => {
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/config/preferences`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
},
);
const preferences = await res.json();
setCopilotEnabled(preferences.isCopilotEnabled);
};
useEffect(() => {
fetchAndSetCopilotEnabled();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<div className="group flex flex-row items-center space-x-1 active:scale-95 duration-200 transition cursor-pointer">
<Switch
checked={copilotEnabled}
onChange={setCopilotEnabled}
disabled={true}
className="bg-light-secondary dark:bg-dark-secondary border border-light-200/70 dark:border-dark-200 relative inline-flex h-5 w-10 sm:h-6 sm:w-11 items-center rounded-full"
>
<span className="sr-only">Copilot</span>

View File

@ -27,7 +27,6 @@ const SearchImages = ({
<>
{!loading && images === null && (
<button
id="search-images"
onClick={async () => {
setLoading(true);

View File

@ -42,7 +42,6 @@ const Searchvideos = ({
<>
{!loading && videos === null && (
<button
id="search-videos"
onClick={async () => {
setLoading(true);

View File

@ -0,0 +1,528 @@
import { cn } from '@/lib/utils';
import {
Dialog,
DialogPanel,
DialogTitle,
Transition,
TransitionChild,
} from '@headlessui/react';
import { CloudUpload, RefreshCcw, RefreshCw } from 'lucide-react';
import React, {
Fragment,
useEffect,
useState,
type SelectHTMLAttributes,
} from 'react';
import ThemeSwitcher from './theme/Switcher';
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
const Input = ({ className, ...restProps }: InputProps) => {
return (
<input
{...restProps}
className={cn(
'bg-light-secondary dark:bg-dark-secondary px-3 py-2 flex items-center overflow-hidden border border-light-200 dark:border-dark-200 dark:text-white rounded-lg text-sm',
className,
)}
/>
);
};
interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
options: { value: string; label: string; disabled?: boolean }[];
}
export const Select = ({ className, options, ...restProps }: SelectProps) => {
return (
<select
{...restProps}
className={cn(
'bg-light-secondary dark:bg-dark-secondary px-3 py-2 flex items-center overflow-hidden border border-light-200 dark:border-dark-200 dark:text-white rounded-lg text-sm',
className,
)}
>
{options.map(({ label, value, disabled }) => {
return (
<option key={value} value={value} disabled={disabled}>
{label}
</option>
);
})}
</select>
);
};
interface SettingsType {
chatModelProviders: {
[key: string]: [Record<string, any>];
};
embeddingModelProviders: {
[key: string]: [Record<string, any>];
};
openaiApiKey: string;
groqApiKey: string;
anthropicApiKey: string;
geminiApiKey: string;
ollamaApiUrl: string;
}
const SettingsDialog = ({
isOpen,
setIsOpen,
}: {
isOpen: boolean;
setIsOpen: (isOpen: boolean) => void;
}) => {
const [config, setConfig] = useState<SettingsType | null>(null);
const [chatModels, setChatModels] = useState<Record<string, any>>({});
const [embeddingModels, setEmbeddingModels] = useState<Record<string, any>>(
{},
);
const [selectedChatModelProvider, setSelectedChatModelProvider] = useState<
string | null
>(null);
const [selectedChatModel, setSelectedChatModel] = useState<string | null>(
null,
);
const [selectedEmbeddingModelProvider, setSelectedEmbeddingModelProvider] =
useState<string | null>(null);
const [selectedEmbeddingModel, setSelectedEmbeddingModel] = useState<
string | null
>(null);
const [customOpenAIApiKey, setCustomOpenAIApiKey] = useState<string>('');
const [customOpenAIBaseURL, setCustomOpenAIBaseURL] = useState<string>('');
const [isLoading, setIsLoading] = useState(false);
const [isUpdating, setIsUpdating] = useState(false);
useEffect(() => {
if (isOpen) {
const fetchConfig = async () => {
setIsLoading(true);
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/config`, {
headers: {
'Content-Type': 'application/json',
},
});
const data = (await res.json()) as SettingsType;
setConfig(data);
const chatModelProvidersKeys = Object.keys(
data.chatModelProviders || {},
);
const embeddingModelProvidersKeys = Object.keys(
data.embeddingModelProviders || {},
);
const defaultChatModelProvider =
chatModelProvidersKeys.length > 0 ? chatModelProvidersKeys[0] : '';
const defaultEmbeddingModelProvider =
embeddingModelProvidersKeys.length > 0
? embeddingModelProvidersKeys[0]
: '';
const chatModelProvider =
localStorage.getItem('chatModelProvider') ||
defaultChatModelProvider ||
'';
const chatModel =
localStorage.getItem('chatModel') ||
(data.chatModelProviders &&
data.chatModelProviders[chatModelProvider]?.length > 0
? data.chatModelProviders[chatModelProvider][0].name
: undefined) ||
'';
const embeddingModelProvider =
localStorage.getItem('embeddingModelProvider') ||
defaultEmbeddingModelProvider ||
'';
const embeddingModel =
localStorage.getItem('embeddingModel') ||
(data.embeddingModelProviders &&
data.embeddingModelProviders[embeddingModelProvider]?.[0].name) ||
'';
setSelectedChatModelProvider(chatModelProvider);
setSelectedChatModel(chatModel);
setSelectedEmbeddingModelProvider(embeddingModelProvider);
setSelectedEmbeddingModel(embeddingModel);
setCustomOpenAIApiKey(localStorage.getItem('openAIApiKey') || '');
setCustomOpenAIBaseURL(localStorage.getItem('openAIBaseURL') || '');
setChatModels(data.chatModelProviders || {});
setEmbeddingModels(data.embeddingModelProviders || {});
setIsLoading(false);
};
fetchConfig();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isOpen]);
const handleSubmit = async () => {
setIsUpdating(true);
try {
await fetch(`${process.env.NEXT_PUBLIC_API_URL}/config`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(config),
});
localStorage.setItem('chatModelProvider', selectedChatModelProvider!);
localStorage.setItem('chatModel', selectedChatModel!);
localStorage.setItem(
'embeddingModelProvider',
selectedEmbeddingModelProvider!,
);
localStorage.setItem('embeddingModel', selectedEmbeddingModel!);
localStorage.setItem('openAIApiKey', customOpenAIApiKey!);
localStorage.setItem('openAIBaseURL', customOpenAIBaseURL!);
} catch (err) {
console.log(err);
} finally {
setIsUpdating(false);
setIsOpen(false);
window.location.reload();
}
};
return (
<Transition appear show={isOpen} as={Fragment}>
<Dialog
as="div"
className="relative z-50"
onClose={() => setIsOpen(false)}
>
<TransitionChild
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-white/50 dark:bg-black/50" />
</TransitionChild>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<TransitionChild
as={Fragment}
enter="ease-out duration-200"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-100"
leaveFrom="opacity-100 scale-200"
leaveTo="opacity-0 scale-95"
>
<DialogPanel className="w-full max-w-md transform rounded-2xl bg-light-secondary dark:bg-dark-secondary border border-light-200 dark:border-dark-200 p-6 text-left align-middle shadow-xl transition-all">
<DialogTitle className="text-xl font-medium leading-6 dark:text-white">
Settings
</DialogTitle>
{config && !isLoading && (
<div className="flex flex-col space-y-4 mt-6">
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Theme
</p>
<ThemeSwitcher />
</div>
{config.chatModelProviders && (
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Chat model Provider
</p>
<Select
value={selectedChatModelProvider ?? undefined}
onChange={(e) => {
setSelectedChatModelProvider(e.target.value);
if (e.target.value === 'custom_openai') {
setSelectedChatModel('');
} else {
setSelectedChatModel(
config.chatModelProviders[e.target.value][0]
.name,
);
}
}}
options={Object.keys(config.chatModelProviders).map(
(provider) => ({
value: provider,
label:
provider.charAt(0).toUpperCase() +
provider.slice(1),
}),
)}
/>
</div>
)}
{selectedChatModelProvider &&
selectedChatModelProvider != 'custom_openai' && (
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Chat Model
</p>
<Select
value={selectedChatModel ?? undefined}
onChange={(e) =>
setSelectedChatModel(e.target.value)
}
options={(() => {
const chatModelProvider =
config.chatModelProviders[
selectedChatModelProvider
];
return chatModelProvider
? chatModelProvider.length > 0
? chatModelProvider.map((model) => ({
value: model.name,
label: model.displayName,
}))
: [
{
value: '',
label: 'No models available',
disabled: true,
},
]
: [
{
value: '',
label:
'Invalid provider, please check backend logs',
disabled: true,
},
];
})()}
/>
</div>
)}
{selectedChatModelProvider &&
selectedChatModelProvider === 'custom_openai' && (
<>
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Model name
</p>
<Input
type="text"
placeholder="Model name"
defaultValue={selectedChatModel!}
onChange={(e) =>
setSelectedChatModel(e.target.value)
}
/>
</div>
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Custom OpenAI API Key
</p>
<Input
type="text"
placeholder="Custom OpenAI API Key"
defaultValue={customOpenAIApiKey!}
onChange={(e) =>
setCustomOpenAIApiKey(e.target.value)
}
/>
</div>
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Custom OpenAI Base URL
</p>
<Input
type="text"
placeholder="Custom OpenAI Base URL"
defaultValue={customOpenAIBaseURL!}
onChange={(e) =>
setCustomOpenAIBaseURL(e.target.value)
}
/>
</div>
</>
)}
{/* Embedding models */}
{config.embeddingModelProviders && (
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Embedding model Provider
</p>
<Select
value={selectedEmbeddingModelProvider ?? undefined}
onChange={(e) => {
setSelectedEmbeddingModelProvider(e.target.value);
setSelectedEmbeddingModel(
config.embeddingModelProviders[e.target.value][0]
.name,
);
}}
options={Object.keys(
config.embeddingModelProviders,
).map((provider) => ({
label:
provider.charAt(0).toUpperCase() +
provider.slice(1),
value: provider,
}))}
/>
</div>
)}
{selectedEmbeddingModelProvider && (
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Embedding Model
</p>
<Select
value={selectedEmbeddingModel ?? undefined}
onChange={(e) =>
setSelectedEmbeddingModel(e.target.value)
}
options={(() => {
const embeddingModelProvider =
config.embeddingModelProviders[
selectedEmbeddingModelProvider
];
return embeddingModelProvider
? embeddingModelProvider.length > 0
? embeddingModelProvider.map((model) => ({
label: model.displayName,
value: model.name,
}))
: [
{
label: 'No embedding models available',
value: '',
disabled: true,
},
]
: [
{
label:
'Invalid provider, please check backend logs',
value: '',
disabled: true,
},
];
})()}
/>
</div>
)}
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
OpenAI API Key
</p>
<Input
type="text"
placeholder="OpenAI API Key"
defaultValue={config.openaiApiKey}
onChange={(e) =>
setConfig({
...config,
openaiApiKey: e.target.value,
})
}
/>
</div>
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Ollama API URL
</p>
<Input
type="text"
placeholder="Ollama API URL"
defaultValue={config.ollamaApiUrl}
onChange={(e) =>
setConfig({
...config,
ollamaApiUrl: e.target.value,
})
}
/>
</div>
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
GROQ API Key
</p>
<Input
type="text"
placeholder="GROQ API Key"
defaultValue={config.groqApiKey}
onChange={(e) =>
setConfig({
...config,
groqApiKey: e.target.value,
})
}
/>
</div>
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Anthropic API Key
</p>
<Input
type="text"
placeholder="Anthropic API key"
defaultValue={config.anthropicApiKey}
onChange={(e) =>
setConfig({
...config,
anthropicApiKey: e.target.value,
})
}
/>
</div>
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Gemini API Key
</p>
<Input
type="text"
placeholder="Gemini API key"
defaultValue={config.geminiApiKey}
onChange={(e) =>
setConfig({
...config,
geminiApiKey: e.target.value,
})
}
/>
</div>
</div>
)}
{isLoading && (
<div className="w-full flex items-center justify-center mt-6 text-black/70 dark:text-white/70 py-6">
<RefreshCcw className="animate-spin" />
</div>
)}
<div className="w-full mt-6 space-y-2">
<p className="text-xs text-black/50 dark:text-white/50">
We&apos;ll refresh the page after updating the settings.
</p>
<button
onClick={handleSubmit}
className="bg-[#24A0ED] flex flex-row items-center space-x-2 text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full px-4 py-2"
disabled={isLoading || isUpdating}
>
{isUpdating ? (
<RefreshCw size={20} className="animate-spin" />
) : (
<CloudUpload size={20} />
)}
</button>
</div>
</DialogPanel>
</TransitionChild>
</div>
</div>
</Dialog>
</Transition>
);
};
export default SettingsDialog;

View File

@ -4,14 +4,9 @@ import { cn } from '@/lib/utils';
import { BookOpenText, Home, Search, SquarePen, Settings } from 'lucide-react';
import Link from 'next/link';
import { useSelectedLayoutSegments } from 'next/navigation';
import React, { useEffect, useMemo, useState, type ReactNode } from 'react';
import React, { useState, type ReactNode } from 'react';
import Layout from './Layout';
export type Preferences = {
isLibraryEnabled: boolean;
isDiscoverEnabled: boolean;
isCopilotEnabled: boolean;
};
import SettingsDialog from './SettingsDialog';
const VerticalIconContainer = ({ children }: { children: ReactNode }) => {
return (
@ -23,31 +18,6 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
const segments = useSelectedLayoutSegments();
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
const [preferences, setPreferences] = useState<Preferences | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchPreferences = async () => {
setLoading(true);
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/config/preferences`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
},
);
const data = await res.json();
setPreferences(data);
setLoading(false);
};
fetchPreferences();
}, []);
const navLinks = [
{
@ -55,44 +25,22 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
href: '/',
active: segments.length === 0 || segments.includes('c'),
label: 'Home',
show: true,
},
{
icon: Search,
href: '/discover',
active: segments.includes('discover'),
label: 'Discover',
show: preferences?.isDiscoverEnabled,
},
{
icon: BookOpenText,
href: '/library',
active: segments.includes('library'),
label: 'Library',
show: preferences?.isLibraryEnabled,
},
];
return loading ? (
<div className="flex flex-row items-center justify-center h-full">
<svg
aria-hidden="true"
className="w-8 h-8 text-light-200 fill-light-secondary dark:text-[#202020] animate-spin dark:fill-[#ffffff3b]"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M100 50.5908C100.003 78.2051 78.1951 100.003 50.5908 100C22.9765 99.9972 0.997224 78.018 1 50.4037C1.00281 22.7993 22.8108 0.997224 50.4251 1C78.0395 1.00281 100.018 22.8108 100 50.4251ZM9.08164 50.594C9.06312 73.3997 27.7909 92.1272 50.5966 92.1457C73.4023 92.1642 92.1298 73.4365 92.1483 50.6308C92.1669 27.8251 73.4392 9.0973 50.6335 9.07878C27.8278 9.06026 9.10003 27.787 9.08164 50.594Z"
fill="currentColor"
/>
<path
d="M93.9676 39.0409C96.393 38.4037 97.8624 35.9116 96.9801 33.5533C95.1945 28.8227 92.871 24.3692 90.0681 20.348C85.6237 14.1775 79.4473 9.36872 72.0454 6.45794C64.6435 3.54717 56.3134 2.65431 48.3133 3.89319C45.869 4.27179 44.3768 6.77534 45.014 9.20079C45.6512 11.6262 48.1343 13.0956 50.5786 12.717C56.5073 11.8281 62.5542 12.5399 68.0406 14.7911C73.527 17.0422 78.2187 20.7487 81.5841 25.4923C83.7976 28.5886 85.4467 32.059 86.4416 35.7474C87.1273 38.1189 89.5423 39.6781 91.9676 39.0409Z"
fill="currentFill"
/>
</svg>
</div>
) : (
return (
<div>
<div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-20 lg:flex-col">
<div className="flex grow flex-col items-center justify-between gap-y-5 overflow-y-auto bg-light-secondary dark:bg-dark-secondary px-2 py-8">
@ -100,31 +48,34 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
<SquarePen className="cursor-pointer" />
</a>
<VerticalIconContainer>
{navLinks.map(
(link, i) =>
link.show === true && (
<Link
key={i}
href={link.href}
className={cn(
'relative flex flex-row items-center justify-center cursor-pointer hover:bg-black/10 dark:hover:bg-white/10 duration-150 transition w-full py-2 rounded-lg',
link.active
? 'text-black dark:text-white'
: 'text-black/70 dark:text-white/70',
)}
>
<link.icon />
{link.active && (
<div className="absolute right-0 -mr-2 h-full w-1 rounded-l-lg bg-black dark:bg-white" />
)}
</Link>
),
)}
{navLinks.map((link, i) => (
<Link
key={i}
href={link.href}
className={cn(
'relative flex flex-row items-center justify-center cursor-pointer hover:bg-black/10 dark:hover:bg-white/10 duration-150 transition w-full py-2 rounded-lg',
link.active
? 'text-black dark:text-white'
: 'text-black/70 dark:text-white/70',
)}
>
<link.icon />
{link.active && (
<div className="absolute right-0 -mr-2 h-full w-1 rounded-l-lg bg-black dark:bg-white" />
)}
</Link>
))}
</VerticalIconContainer>
<Link href="/settings">
<Settings className="cursor-pointer" />
</Link>
<Settings
onClick={() => setIsSettingsOpen(!isSettingsOpen)}
className="cursor-pointer"
/>
<SettingsDialog
isOpen={isSettingsOpen}
setIsOpen={setIsSettingsOpen}
/>
</div>
</div>

View File

@ -1,7 +1,8 @@
'use client';
import { useTheme } from 'next-themes';
import { SunIcon, MoonIcon, MonitorIcon } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';
import Select from '../ui/Select';
import { Select } from '../SettingsDialog';
type Theme = 'dark' | 'light' | 'system';

View File

@ -1,28 +0,0 @@
import { cn } from '@/lib/utils';
import { SelectHTMLAttributes } from 'react';
interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
options: { value: string; label: string; disabled?: boolean }[];
}
export const Select = ({ className, options, ...restProps }: SelectProps) => {
return (
<select
{...restProps}
className={cn(
'bg-light-secondary dark:bg-dark-secondary px-3 py-2 flex items-center overflow-hidden border border-light-200 dark:border-dark-200 dark:text-white rounded-lg text-sm',
className,
)}
>
{options.map(({ label, value, disabled }) => {
return (
<option key={value} value={value} disabled={disabled}>
{label}
</option>
);
})}
</select>
);
};
export default Select;

View File

@ -1,6 +1,6 @@
{
"name": "perplexica-frontend",
"version": "1.10.0-rc3",
"version": "1.10.0-rc2",
"license": "MIT",
"author": "ItzCrazyKns",
"scripts": {