diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..600e365 --- /dev/null +++ b/.dockerignore @@ -0,0 +1 @@ +**/node_modules \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9fb5e4c --- /dev/null +++ b/.gitignore @@ -0,0 +1,41 @@ +# Node.js +node_modules/ +npm-debug.log +yarn-error.log + +# Build output +.next/ +out/ +dist/ + +# IDE/Editor specific +.vscode/ +.idea/ +*.iml + +# Environment variables +.env +.env.local +.env.development.local +.env.test.local +.env.production.local + +# Config files +config.toml + +# Log files +logs/ +*.log + +# Testing +/coverage/ + +# Miscellaneous +.DS_Store +Thumbs.db + +# Db +db.sqlite +/searxng + +certificates \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..55d3c7c --- /dev/null +++ b/.prettierignore @@ -0,0 +1,41 @@ +# Ignore all files in the node_modules directory +node_modules + +# Ignore all files in the .next directory (Next.js build output) +.next + +# Ignore all files in the .out directory (TypeScript build output) +.out + +# Ignore all files in the .cache directory (Prettier cache) +.cache + +# Ignore all files in the .vscode directory (Visual Studio Code settings) +.vscode + +# Ignore all files in the .idea directory (IntelliJ IDEA settings) +.idea + +# Ignore all files in the dist directory (build output) +dist + +# Ignore all files in the build directory (build output) +build + +# Ignore all files in the coverage directory (test coverage reports) +coverage + +# Ignore all files with the .log extension +*.log + +# Ignore all files with the .tmp extension +*.tmp + +# Ignore all files with the .swp extension +*.swp + +# Ignore all files with the .DS_Store extension (macOS specific) +.DS_Store + +# Ignore all files in uploads directory +uploads \ No newline at end of file diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..8ca480f --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,11 @@ +/** @type {import("prettier").Config} */ + +const config = { + printWidth: 80, + trailingComma: 'all', + endOfLine: 'auto', + singleQuote: true, + tabWidth: 2, +}; + +module.exports = config; diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..6b4ce5b --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,82 @@ +# How to Contribute to Perplexica + +Thanks for your interest in contributing to Perplexica! Your help makes this project better. This guide explains how to contribute effectively. + +Perplexica is a modern AI chat application with advanced search capabilities. + +## Project Structure + +Perplexica's codebase is organized as follows: + +- **UI Components and Pages**: + - **Components (`src/components`)**: Reusable UI components. + - **Pages and Routes (`src/app`)**: Next.js app directory structure with page components. + - Main app routes include: home (`/`), chat (`/c`), discover (`/discover`), and library (`/library`). + - **API Routes (`src/app/api`)**: Server endpoints implemented with Next.js route handlers. +- **Backend Logic (`src/lib`)**: Contains all the backend functionality including search, database, and API logic. + - The search system lives in `src/lib/agents/search`. + - The search pipeline is split into classification, research, widgets, and writing. + - Database functionality is in `src/lib/db`. + - Chat model and embedding model providers are in `src/lib/models/providers`, and models are loaded via `src/lib/models/registry.ts`. + - Prompt templates are in `src/lib/prompts`. + - SearXNG integration is in `src/lib/searxng.ts`. + - Upload search lives in `src/lib/uploads`. + +### Where to make changes + +If you are not sure where to start, use this section as a map. + +- **Search behavior and reasoning** + + - `src/lib/agents/search` contains the core chat and search pipeline. + - `classifier.ts` decides whether research is needed and what should run. + - `researcher/` gathers information in the background. + +- **Add or change a search capability** + + - Research tools (web, academic, discussions, uploads, scraping) live in `src/lib/agents/search/researcher/actions`. + - Tools are registered in `src/lib/agents/search/researcher/actions/index.ts`. + +- **Add or change widgets** + + - Widgets live in `src/lib/agents/search/widgets`. + - Widgets run in parallel with research and show structured results in the UI. + +- **Model integrations** + + - Providers live in `src/lib/models/providers`. + - Add new providers there and wire them into the model registry so they show up in the app. + +- **Architecture docs** + - High level overview: `docs/architecture/README.md` + - High level flow: `docs/architecture/WORKING.md` + +## API Documentation + +Perplexica includes API documentation for programmatic access. + +- **Search API**: For detailed documentation, see `docs/API/SEARCH.md`. + +## Setting Up Your Environment + +Before diving into coding, setting up your local environment is key. Here's what you need to do: + +1. Run `npm install` to install all dependencies. +2. Use `npm run dev` to start the application in development mode. +3. Open http://localhost:3000 and complete the setup in the UI (API keys, models, search backend URL, etc.). + +Database migrations are applied automatically on startup. + +For full installation options (Docker and non Docker), see the installation guide in the repository README. + +**Please note**: Docker configurations are present for setting up production environments, whereas `npm run dev` is used for development purposes. + +## Coding and Contribution Practices + +Before committing changes: + +1. Ensure that your code functions correctly by thorough testing. +2. Always run `npm run format:write` to format your code according to the project's coding standards. This helps maintain consistency and code quality. +3. We currently do not have a code of conduct, but it is in the works. In the meantime, please be mindful of how you engage with the project and its community. + +Following these steps will help maintain the integrity of Perplexica's codebase and facilitate a smoother integration of your valuable contributions. Thank you for your support and commitment to improving Perplexica. diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..b94fc3d --- /dev/null +++ b/Dockerfile @@ -0,0 +1,74 @@ +FROM node:24.5.0-slim AS builder + +RUN apt-get update && apt-get install -y python3 python3-pip sqlite3 && rm -rf /var/lib/apt/lists/* + +WORKDIR /home/perplexica + +COPY package.json yarn.lock ./ +RUN yarn install --frozen-lockfile --network-timeout 600000 + +COPY tsconfig.json next.config.mjs next-env.d.ts postcss.config.js drizzle.config.ts tailwind.config.ts ./ +COPY src ./src +COPY public ./public +COPY drizzle ./drizzle + +RUN mkdir -p /home/perplexica/data +RUN yarn build + +FROM node:24.5.0-slim + +RUN apt-get update && apt-get install -y \ + python3-dev python3-babel python3-venv python-is-python3 \ + uwsgi uwsgi-plugin-python3 \ + git build-essential libxslt-dev zlib1g-dev libffi-dev libssl-dev \ + curl sudo \ + && rm -rf /var/lib/apt/lists/* + +WORKDIR /home/perplexica + +COPY --from=builder /home/perplexica/public ./public +COPY --from=builder /home/perplexica/.next/static ./public/_next/static +COPY --from=builder /home/perplexica/.next/standalone ./ +COPY --from=builder /home/perplexica/data ./data +COPY drizzle ./drizzle + +RUN mkdir /home/perplexica/uploads + +RUN useradd --shell /bin/bash --system \ + --home-dir "/usr/local/searxng" \ + --comment 'Privacy-respecting metasearch engine' \ + searxng + +RUN mkdir "/usr/local/searxng" +RUN mkdir -p /etc/searxng +RUN chown -R "searxng:searxng" "/usr/local/searxng" + +COPY searxng/settings.yml /etc/searxng/settings.yml +COPY searxng/limiter.toml /etc/searxng/limiter.toml +COPY searxng/uwsgi.ini /etc/searxng/uwsgi.ini +RUN chown -R searxng:searxng /etc/searxng + +USER searxng + +RUN git clone "https://github.com/searxng/searxng" \ + "/usr/local/searxng/searxng-src" + +RUN python3 -m venv "/usr/local/searxng/searx-pyenv" +RUN "/usr/local/searxng/searx-pyenv/bin/pip" install --upgrade pip setuptools wheel pyyaml msgspec +RUN cd "/usr/local/searxng/searxng-src" && \ + "/usr/local/searxng/searx-pyenv/bin/pip" install --use-pep517 --no-build-isolation -e . + +USER root + +WORKDIR /home/perplexica +COPY entrypoint.sh ./entrypoint.sh +RUN chmod +x ./entrypoint.sh +RUN sed -i 's/\r$//' ./entrypoint.sh || true + +RUN echo "searxng ALL=(ALL) NOPASSWD: ALL" >> /etc/sudoers + +EXPOSE 3000 8080 + +ENV SEARXNG_API_URL=http://localhost:8080 + +CMD ["/home/perplexica/entrypoint.sh"] diff --git a/Dockerfile.slim b/Dockerfile.slim new file mode 100644 index 0000000..d44dea4 --- /dev/null +++ b/Dockerfile.slim @@ -0,0 +1,35 @@ +FROM node:24.5.0-slim AS builder + +RUN apt-get update && apt-get install -y python3 python3-pip sqlite3 && rm -rf /var/lib/apt/lists/* + +WORKDIR /home/perplexica + +COPY package.json yarn.lock ./ +RUN yarn install --frozen-lockfile --network-timeout 600000 + +COPY tsconfig.json next.config.mjs next-env.d.ts postcss.config.js drizzle.config.ts tailwind.config.ts ./ +COPY src ./src +COPY public ./public +COPY drizzle ./drizzle + +RUN mkdir -p /home/perplexica/data +RUN yarn build + +FROM node:24.5.0-slim + +RUN apt-get update && apt-get install -y python3 python3-pip sqlite3 && rm -rf /var/lib/apt/lists/* + +WORKDIR /home/perplexica + +COPY --from=builder /home/perplexica/public ./public +COPY --from=builder /home/perplexica/.next/static ./public/_next/static + +COPY --from=builder /home/perplexica/.next/standalone ./ +COPY --from=builder /home/perplexica/data ./data +COPY drizzle ./drizzle + +RUN mkdir /home/perplexica/uploads + +EXPOSE 3000 + +CMD ["node", "server.js"] diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..f94c7b0 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2026 ItzCrazyKns + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..e093ee0 --- /dev/null +++ b/README.md @@ -0,0 +1,266 @@ +# Perplexica πŸ” + +[![GitHub Repo stars](https://img.shields.io/github/stars/ItzCrazyKns/Perplexica?style=social)](https://github.com/ItzCrazyKns/Perplexica/stargazers) +[![GitHub forks](https://img.shields.io/github/forks/ItzCrazyKns/Perplexica?style=social)](https://github.com/ItzCrazyKns/Perplexica/network/members) +[![GitHub watchers](https://img.shields.io/github/watchers/ItzCrazyKns/Perplexica?style=social)](https://github.com/ItzCrazyKns/Perplexica/watchers) +[![Docker Pulls](https://img.shields.io/docker/pulls/itzcrazykns1337/perplexica?color=blue)](https://hub.docker.com/r/itzcrazykns1337/perplexica) +[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/ItzCrazyKns/Perplexica/blob/master/LICENSE) +[![GitHub last commit](https://img.shields.io/github/last-commit/ItzCrazyKns/Perplexica?color=green)](https://github.com/ItzCrazyKns/Perplexica/commits/master) +[![Discord](https://dcbadge.limes.pink/api/server/26aArMy8tT?style=flat)](https://discord.gg/26aArMy8tT) + +Perplexica is a **privacy-focused AI answering engine** that runs entirely on your own hardware. It combines knowledge from the vast internet with support for **local LLMs** (Ollama) and cloud providers (OpenAI, Claude, Groq), delivering accurate answers with **cited sources** while keeping your searches completely private. + +![preview](.assets/perplexica-screenshot.png) + +Want to know more about its architecture and how it works? You can read it [here](https://github.com/ItzCrazyKns/Perplexica/tree/master/docs/architecture/README.md). + +## ✨ Features + +πŸ€– **Support for all major AI providers** - Use local LLMs through Ollama or connect to OpenAI, Anthropic Claude, Google Gemini, Groq, and more. Mix and match models based on your needs. + +⚑ **Smart search modes** - Choose Speed Mode when you need quick answers, Balanced Mode for everyday searches, or Quality Mode for deep research. + +🧭 **Pick your sources** - Search the web, discussions, or academic papers. More sources and integrations are in progress. + +🧩 **Widgets** - Helpful UI cards that show up when relevant, like weather, calculations, stock prices, and other quick lookups. + +πŸ” **Web search powered by SearxNG** - Access multiple search engines while keeping your identity private. Support for Tavily and Exa coming soon for even better results. + +πŸ“· **Image and video search** - Find visual content alongside text results. Search isn't limited to just articles anymore. + +πŸ“„ **File uploads** - Upload documents and ask questions about them. PDFs, text files, images - Perplexica understands them all. + +🌐 **Search specific domains** - Limit your search to specific websites when you know where to look. Perfect for technical documentation or research papers. + +πŸ’‘ **Smart suggestions** - Get intelligent search suggestions as you type, helping you formulate better queries. + +πŸ“š **Discover** - Browse interesting articles and trending content throughout the day. Stay informed without even searching. + +πŸ•’ **Search history** - Every search is saved locally so you can revisit your discoveries anytime. Your research is never lost. + +✨ **More coming soon** - We're actively developing new features based on community feedback. Join our Discord to help shape Perplexica's future! + +## Sponsors + +Perplexica's development is powered by the generous support of our sponsors. Their contributions help keep this project free, open-source, and accessible to everyone. + +
+ + + + Warp Terminal + + +### **✨ [Try Warp - The AI-Powered Terminal β†’](https://www.warp.dev/perplexica)** + +Warp is revolutionizing development workflows with AI-powered features, modern UX, and blazing-fast performance. Used by developers at top companies worldwide. + +
+ +--- + +We'd also like to thank the following partners for their generous support: + + + + + + +
+ + Exa + + + Exa β€’ The Perfect Web Search API for LLMs - web search, crawling, deep research, and answer APIs +
+ +## Installation + +There are mainly 2 ways of installing Perplexica - With Docker, Without Docker. Using Docker is highly recommended. + +### Getting Started with Docker (Recommended) + +Perplexica can be easily run using Docker. Simply run the following command: + +```bash +docker run -d -p 3000:3000 -v perplexica-data:/home/perplexica/data --name perplexica itzcrazykns1337/perplexica:latest +``` + +This will pull and start the Perplexica container with the bundled SearxNG search engine. Once running, open your browser and navigate to http://localhost:3000. You can then configure your settings (API keys, models, etc.) directly in the setup screen. + +**Note**: The image includes both Perplexica and SearxNG, so no additional setup is required. The `-v` flags create persistent volumes for your data and uploaded files. + +#### Using Perplexica with Your Own SearxNG Instance + +If you already have SearxNG running, you can use the slim version of Perplexica: + +```bash +docker run -d -p 3000:3000 -e SEARXNG_API_URL=http://your-searxng-url:8080 -v perplexica-data:/home/perplexica/data --name perplexica itzcrazykns1337/perplexica:slim-latest +``` + +**Important**: Make sure your SearxNG instance has: + +- JSON format enabled in the settings +- Wolfram Alpha search engine enabled + +Replace `http://your-searxng-url:8080` with your actual SearxNG URL. Then configure your AI provider settings in the setup screen at http://localhost:3000. + +#### Advanced Setup (Building from Source) + +If you prefer to build from source or need more control: + +1. Ensure Docker is installed and running on your system. +2. Clone the Perplexica repository: + + ```bash + git clone https://github.com/ItzCrazyKns/Perplexica.git + ``` + +3. After cloning, navigate to the directory containing the project files. + +4. Build and run using Docker: + + ```bash + docker build -t perplexica . + docker run -d -p 3000:3000 -v perplexica-data:/home/perplexica/data --name perplexica perplexica + ``` + +5. Access Perplexica at http://localhost:3000 and configure your settings in the setup screen. + +**Note**: After the containers are built, you can start Perplexica directly from Docker without having to open a terminal. + +### Non-Docker Installation + +1. Install SearXNG and allow `JSON` format in the SearXNG settings. Make sure Wolfram Alpha search engine is also enabled. +2. Clone the repository: + + ```bash + git clone https://github.com/ItzCrazyKns/Perplexica.git + cd Perplexica + ``` + +3. Install dependencies: + + ```bash + npm i + ``` + +4. Build the application: + + ```bash + npm run build + ``` + +5. Start the application: + + ```bash + npm run start + ``` + +6. Open your browser and navigate to http://localhost:3000 to complete the setup and configure your settings (API keys, models, SearxNG URL, etc.) in the setup screen. + +**Note**: Using Docker is recommended as it simplifies the setup process, especially for managing environment variables and dependencies. + +See the [installation documentation](https://github.com/ItzCrazyKns/Perplexica/tree/master/docs/installation) for more information like updating, etc. + +### Troubleshooting + +#### Local OpenAI-API-Compliant Servers + +If Perplexica tells you that you haven't configured any chat model providers, ensure that: + +1. Your server is running on `0.0.0.0` (not `127.0.0.1`) and on the same port you put in the API URL. +2. You have specified the correct model name loaded by your local LLM server. +3. You have specified the correct API key, or if one is not defined, you have put _something_ in the API key field and not left it empty. + +#### Ollama Connection Errors + +If you're encountering an Ollama connection error, it is likely due to the backend being unable to connect to Ollama's API. To fix this issue you can: + +1. **Check your Ollama API URL:** Ensure that the API URL is correctly set in the settings menu. +2. **Update API URL Based on OS:** + + - **Windows:** Use `http://host.docker.internal:11434` + - **Mac:** Use `http://host.docker.internal:11434` + - **Linux:** Use `http://:11434` + + Adjust the port number if you're using a different one. + +3. **Linux Users - Expose Ollama to Network:** + + - Inside `/etc/systemd/system/ollama.service`, you need to add `Environment="OLLAMA_HOST=0.0.0.0:11434"`. (Change the port number if you are using a different one.) Then reload the systemd manager configuration with `systemctl daemon-reload`, and restart Ollama by `systemctl restart ollama`. For more information see [Ollama docs](https://github.com/ollama/ollama/blob/main/docs/faq.md#setting-environment-variables-on-linux) + + - Ensure that the port (default is 11434) is not blocked by your firewall. + +#### Lemonade Connection Errors + +If you're encountering a Lemonade connection error, it is likely due to the backend being unable to connect to Lemonade's API. To fix this issue you can: + +1. **Check your Lemonade API URL:** Ensure that the API URL is correctly set in the settings menu. +2. **Update API URL Based on OS:** + + - **Windows:** Use `http://host.docker.internal:8000` + - **Mac:** Use `http://host.docker.internal:8000` + - **Linux:** Use `http://:8000` + + Adjust the port number if you're using a different one. + +3. **Ensure Lemonade Server is Running:** + + - Make sure your Lemonade server is running and accessible on the configured port (default is 8000). + - Verify that Lemonade is configured to accept connections from all interfaces (`0.0.0.0`), not just localhost (`127.0.0.1`). + - Ensure that the port (default is 8000) is not blocked by your firewall. + +## Using as a Search Engine + +If you wish to use Perplexica as an alternative to traditional search engines like Google or Bing, or if you want to add a shortcut for quick access from your browser's search bar, follow these steps: + +1. Open your browser's settings. +2. Navigate to the 'Search Engines' section. +3. Add a new site search with the following URL: `http://localhost:3000/?q=%s`. Replace `localhost` with your IP address or domain name, and `3000` with the port number if Perplexica is not hosted locally. +4. Click the add button. Now, you can use Perplexica directly from your browser's search bar. + +## Using Perplexica's API + +Perplexica also provides an API for developers looking to integrate its powerful search engine into their own applications. You can run searches, use multiple models and get answers to your queries. + +For more details, check out the full documentation [here](https://github.com/ItzCrazyKns/Perplexica/tree/master/docs/API/SEARCH.md). + +## Expose Perplexica to network + +Perplexica runs on Next.js and handles all API requests. It works right away on the same network and stays accessible even with port forwarding. + +## 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) +[![Run on ClawCloud](https://raw.githubusercontent.com/ClawCloud/Run-Template/refs/heads/main/Run-on-ClawCloud.svg)](https://template.run.claw.cloud/?referralCode=U11MRQ8U9RM4&openapp=system-fastdeploy%3FtemplateName%3Dperplexica) +[![Deploy on Hostinger](https://assets.hostinger.com/vps/deploy.svg)](https://www.hostinger.com/vps/docker-hosting?compose_url=https://raw.githubusercontent.com/ItzCrazyKns/Perplexica/refs/heads/master/docker-compose.yaml) + +## Upcoming Features + +- [ ] Adding more widgets, integrations, search sources +- [ ] Adding ability to create custom agents (name T.B.D.) +- [ ] Adding authentication + +## Support Us + +If you find Perplexica useful, consider giving us a star on GitHub. This helps more people discover Perplexica and supports the development of new features. Your support is greatly appreciated. + +### Donations + +We also accept donations to help sustain our project. If you would like to contribute, you can use the following options to donate. Thank you for your support! + +| Ethereum | +| ----------------------------------------------------- | +| Address: `0xB025a84b2F269570Eb8D4b05DEdaA41D8525B6DD` | + +## Contribution + +Perplexica is built on the idea that AI and large language models should be easy for everyone to use. If you find bugs or have ideas, please share them in via GitHub Issues. For more information on contributing to Perplexica you can read the [CONTRIBUTING.md](CONTRIBUTING.md) file to learn more about Perplexica and how you can contribute to it. + +## Help and Support + +If you have any questions or feedback, please feel free to reach out to us. You can create an issue on GitHub or join our Discord server. There, you can connect with other users, share your experiences and reviews, and receive more personalized help. [Click here](https://discord.gg/EFwsmQDgAu) to join the Discord server. To discuss matters outside of regular support, feel free to contact me on Discord at `itzcrazykns`. + +Thank you for exploring Perplexica, the AI-powered search engine designed to enhance your search experience. We are constantly working to improve Perplexica and expand its capabilities. We value your feedback and contributions which help us make Perplexica even better. Don't forget to check back for updates and new features! diff --git a/data/.gitignore b/data/.gitignore new file mode 100644 index 0000000..d6b7ef3 --- /dev/null +++ b/data/.gitignore @@ -0,0 +1,2 @@ +* +!.gitignore diff --git a/docker-compose.yaml b/docker-compose.yaml new file mode 100644 index 0000000..7c0f007 --- /dev/null +++ b/docker-compose.yaml @@ -0,0 +1,14 @@ +services: + perplexica: + image: itzcrazykns1337/perplexica:latest + build: + context: . + ports: + - '3000:3000' + volumes: + - data:/home/perplexica/data + restart: unless-stopped + +volumes: + data: + name: 'perplexica-data' diff --git a/docs/API/SEARCH.md b/docs/API/SEARCH.md new file mode 100644 index 0000000..0c35a81 --- /dev/null +++ b/docs/API/SEARCH.md @@ -0,0 +1,190 @@ +# Perplexica Search API Documentation + +## Overview + +Perplexica’s Search API makes it easy to use our AI-powered search engine. You can run different types of searches, pick the models you want to use, and get the most recent info. Follow the following headings to learn more about Perplexica's search API. + +## Endpoints + +### Get Available Providers and Models + +Before making search requests, you'll need to get the available providers and their models. + +#### **GET** `/api/providers` + +**Full URL**: `http://localhost:3000/api/providers` + +Returns a list of all active providers with their available chat and embedding models. + +**Response Example:** + +```json +{ + "providers": [ + { + "id": "550e8400-e29b-41d4-a716-446655440000", + "name": "OpenAI", + "chatModels": [ + { + "name": "GPT 4 Omni Mini", + "key": "gpt-4o-mini" + }, + { + "name": "GPT 4 Omni", + "key": "gpt-4o" + } + ], + "embeddingModels": [ + { + "name": "Text Embedding 3 Large", + "key": "text-embedding-3-large" + } + ] + } + ] +} +``` + +Use the `id` field as the `providerId` and the `key` field from the models arrays when making search requests. + +### Search Query + +#### **POST** `/api/search` + +**Full URL**: `http://localhost:3000/api/search` + +**Note**: Replace `localhost:3000` with your Perplexica instance URL if running on a different host or port + +### Request + +The API accepts a JSON object in the request body, where you define the enabled search `sources`, chat models, embedding models, and your query. + +#### Request Body Structure + +```json +{ + "chatModel": { + "providerId": "550e8400-e29b-41d4-a716-446655440000", + "key": "gpt-4o-mini" + }, + "embeddingModel": { + "providerId": "550e8400-e29b-41d4-a716-446655440000", + "key": "text-embedding-3-large" + }, + "optimizationMode": "speed", + "sources": ["web"], + "query": "What is Perplexica", + "history": [ + ["human", "Hi, how are you?"], + ["assistant", "I am doing well, how can I help you today?"] + ], + "systemInstructions": "Focus on providing technical details about Perplexica's architecture.", + "stream": false +} +``` + +**Note**: The `providerId` must be a valid UUID obtained from the `/api/providers` endpoint. The example above uses a sample UUID for demonstration. + +### Request Parameters + +- **`chatModel`** (object, required): Defines the chat model to be used for the query. To get available providers and models, send a GET request to `http://localhost:3000/api/providers`. + + - `providerId` (string): The UUID of the provider. You can get this from the `/api/providers` endpoint response. + - `key` (string): The model key/identifier (e.g., `gpt-4o-mini`, `llama3.1:latest`). Use the `key` value from the provider's `chatModels` array, not the display name. + +- **`embeddingModel`** (object, required): Defines the embedding model for similarity-based searching. To get available providers and models, send a GET request to `http://localhost:3000/api/providers`. + + - `providerId` (string): The UUID of the embedding provider. You can get this from the `/api/providers` endpoint response. + - `key` (string): The embedding model key (e.g., `text-embedding-3-large`, `nomic-embed-text`). Use the `key` value from the provider's `embeddingModels` array, not the display name. + +- **`sources`** (array, required): Which search sources to enable. Available values: + + - `web`, `academic`, `discussions`. + +- **`optimizationMode`** (string, optional): Specifies the optimization mode to control the balance between performance and quality. Available modes: + + - `speed`: Prioritize speed and return the fastest answer. + - `balanced`: Provide a balanced answer with good speed and reasonable quality. + - `quality`: Prioritize answer quality (may be slower). + +- **`query`** (string, required): The search query or question. + +- **`systemInstructions`** (string, optional): Custom instructions provided by the user to guide the AI's response. These instructions are treated as user preferences and have lower priority than the system's core instructions. For example, you can specify a particular writing style, format, or focus area. + +- **`history`** (array, optional): An array of message pairs representing the conversation history. Each pair consists of a role (either 'human' or 'assistant') and the message content. This allows the system to use the context of the conversation to refine results. Example: + + ```json + [ + ["human", "What is Perplexica?"], + ["assistant", "Perplexica is an AI-powered search engine..."] + ] + ``` + +- **`stream`** (boolean, optional): When set to `true`, enables streaming responses. Default is `false`. + +### Response + +The response from the API includes both the final message and the sources used to generate that message. + +#### Standard Response (stream: false) + +```json +{ + "message": "Perplexica is an innovative, open-source AI-powered search engine designed to enhance the way users search for information online. Here are some key features and characteristics of Perplexica:\n\n- **AI-Powered Technology**: It utilizes advanced machine learning algorithms to not only retrieve information but also to understand the context and intent behind user queries, providing more relevant results [1][5].\n\n- **Open-Source**: Being open-source, Perplexica offers flexibility and transparency, allowing users to explore its functionalities without the constraints of proprietary software [3][10].", + "sources": [ + { + "content": "Perplexica is an innovative, open-source AI-powered search engine designed to enhance the way users search for information online.", + "metadata": { + "title": "What is Perplexica, and how does it function as an AI-powered search ...", + "url": "https://askai.glarity.app/search/What-is-Perplexica--and-how-does-it-function-as-an-AI-powered-search-engine" + } + }, + { + "content": "Perplexica is an open-source AI-powered search tool that dives deep into the internet to find precise answers.", + "metadata": { + "title": "Sahar Mor's Post", + "url": "https://www.linkedin.com/posts/sahar-mor_a-new-open-source-project-called-perplexica-activity-7204489745668694016-ncja" + } + } + .... + ] +} +``` + +#### Streaming Response (stream: true) + +When streaming is enabled, the API returns a stream of newline-delimited JSON objects using Server-Sent Events (SSE). Each line contains a complete, valid JSON object. The response has `Content-Type: text/event-stream`. + +Example of streamed response objects: + +``` +{"type":"init","data":"Stream connected"} +{"type":"sources","data":[{"content":"...","metadata":{"title":"...","url":"..."}},...]} +{"type":"response","data":"Perplexica is an "} +{"type":"response","data":"innovative, open-source "} +{"type":"response","data":"AI-powered search engine..."} +{"type":"done"} +``` + +Clients should process each line as a separate JSON object. The different message types include: + +- **`init`**: Initial connection message +- **`sources`**: All sources used for the response +- **`response`**: Chunks of the generated answer text +- **`done`**: Indicates the stream is complete + +### Fields in the Response + +- **`message`** (string): The search result, generated based on the query and enabled `sources`. +- **`sources`** (array): A list of sources that were used to generate the search result. Each source includes: + - `content`: A snippet of the relevant content from the source. + - `metadata`: Metadata about the source, including: + - `title`: The title of the webpage. + - `url`: The URL of the webpage. + +### Error Handling + +If an error occurs during the search process, the API will return an appropriate error message with an HTTP status code. + +- **400**: If the request is malformed or missing required fields (e.g., no `sources` or `query`). +- **500**: If an internal server error occurs during the search. diff --git a/docs/architecture/README.md b/docs/architecture/README.md new file mode 100644 index 0000000..5593b37 --- /dev/null +++ b/docs/architecture/README.md @@ -0,0 +1,38 @@ +# Perplexica Architecture + +Perplexica is a Next.js application that combines an AI chat experience with search. + +For a high level flow, see [WORKING.md](WORKING.md). For deeper implementation details, see [CONTRIBUTING.md](../../CONTRIBUTING.md). + +## Key components + +1. **User Interface** + + - A web based UI that lets users chat, search, and view citations. + +2. **API Routes** + + - `POST /api/chat` powers the chat UI. + - `POST /api/search` provides a programmatic search endpoint. + - `GET /api/providers` lists available providers and model keys. + +3. **Agents and Orchestration** + + - The system classifies the question first. + - It can run research and widgets in parallel. + - It generates the final answer and includes citations. + +4. **Search Backend** + + - A meta search backend is used to fetch relevant web results when research is enabled. + +5. **LLMs (Large Language Models)** + + - Used for classification, writing answers, and producing citations. + +6. **Embedding Models** + + - Used for semantic search over user uploaded files. + +7. **Storage** + - Chats and messages are stored so conversations can be reloaded. diff --git a/docs/architecture/WORKING.md b/docs/architecture/WORKING.md new file mode 100644 index 0000000..af29b90 --- /dev/null +++ b/docs/architecture/WORKING.md @@ -0,0 +1,72 @@ +# How Perplexica Works + +This is a high level overview of how Perplexica answers a question. + +If you want a component level overview, see [README.md](README.md). + +If you want implementation details, see [CONTRIBUTING.md](../../CONTRIBUTING.md). + +## What happens when you ask a question + +When you send a message in the UI, the app calls `POST /api/chat`. + +At a high level, we do three things: + +1. Classify the question and decide what to do next. +2. Run research and widgets in parallel. +3. Write the final answer and include citations. + +## Classification + +Before searching or answering, we run a classification step. + +This step decides things like: + +- Whether we should do research for this question +- Whether we should show any widgets +- How to rewrite the question into a clearer standalone form + +## Widgets + +Widgets are small, structured helpers that can run alongside research. + +Examples include weather, stocks, and simple calculations. + +If a widget is relevant, we show it in the UI while the answer is still being generated. + +Widgets are helpful context for the answer, but they are not part of what the model should cite. + +## Research + +If research is needed, we gather information in the background while widgets can run. + +Depending on configuration, research may include web lookup and searching user uploaded files. + +## Answer generation + +Once we have enough context, the chat model generates the final response. + +You can control the tradeoff between speed and quality using `optimizationMode`: + +- `speed` +- `balanced` +- `quality` + +## How citations work + +We prompt the model to cite the references it used. The UI then renders those citations alongside the supporting links. + +## Search API + +If you are integrating Perplexica into another product, you can call `POST /api/search`. + +It returns: + +- `message`: the generated answer +- `sources`: supporting references used for the answer + +You can also enable streaming by setting `stream: true`. + +## Image and video search + +Image and video search use separate endpoints (`POST /api/images` and `POST /api/videos`). We generate a focused query using the chat model, then fetch matching results from a search backend. diff --git a/docs/installation/UPDATING.md b/docs/installation/UPDATING.md new file mode 100644 index 0000000..4f2be75 --- /dev/null +++ b/docs/installation/UPDATING.md @@ -0,0 +1,81 @@ +# Update Perplexica to the latest version + +To update Perplexica to the latest version, follow these steps: + +## For Docker users (Using pre-built images) + +Simply pull the latest image and restart your container: + +```bash +docker pull itzcrazykns1337/perplexica:latest +docker stop perplexica +docker rm perplexica +docker run -d -p 3000:3000 -v perplexica-data:/home/perplexica/data --name perplexica itzcrazykns1337/perplexica:latest +``` + +For slim version: + +```bash +docker pull itzcrazykns1337/perplexica:slim-latest +docker stop perplexica +docker rm perplexica +docker run -d -p 3000:3000 -e SEARXNG_API_URL=http://your-searxng-url:8080 -v perplexica-data:/home/perplexica/data --name perplexica itzcrazykns1337/perplexica:slim-latest +``` + +Once updated, go to http://localhost:3000 and verify the latest changes. Your settings are preserved automatically. + +## For Docker users (Building from source) + +1. Navigate to your Perplexica directory and pull the latest changes: + + ```bash + cd Perplexica + git pull origin master + ``` + +2. Rebuild the Docker image: + + ```bash + docker build -t perplexica . + ``` + +3. Stop and remove the old container, then start the new one: + + ```bash + docker stop perplexica + docker rm perplexica + docker run -p 3000:3000 -p 8080:8080 --name perplexica perplexica + ``` + +4. Once the command completes, go to http://localhost:3000 and verify the latest changes. + +## For non-Docker users + +1. Navigate to your Perplexica directory and pull the latest changes: + + ```bash + cd Perplexica + git pull origin master + ``` + +2. Install any new dependencies: + + ```bash + npm i + ``` + +3. Rebuild the application: + + ```bash + npm run build + ``` + +4. Restart the application: + + ```bash + npm run start + ``` + +5. Go to http://localhost:3000 and verify the latest changes. Your settings are preserved automatically. + +--- diff --git a/drizzle.config.ts b/drizzle.config.ts new file mode 100644 index 0000000..a029112 --- /dev/null +++ b/drizzle.config.ts @@ -0,0 +1,11 @@ +import { defineConfig } from 'drizzle-kit'; +import path from 'path'; + +export default defineConfig({ + dialect: 'sqlite', + schema: './src/lib/db/schema.ts', + out: './drizzle', + dbCredentials: { + url: path.join(process.cwd(), 'data', 'db.sqlite'), + }, +}); diff --git a/drizzle/0000_fuzzy_randall.sql b/drizzle/0000_fuzzy_randall.sql new file mode 100644 index 0000000..0a2ff07 --- /dev/null +++ b/drizzle/0000_fuzzy_randall.sql @@ -0,0 +1,16 @@ +CREATE TABLE IF NOT EXISTS `chats` ( + `id` text PRIMARY KEY NOT NULL, + `title` text NOT NULL, + `createdAt` text NOT NULL, + `focusMode` text NOT NULL, + `files` text DEFAULT '[]' +); +--> statement-breakpoint +CREATE TABLE IF NOT EXISTS `messages` ( + `id` integer PRIMARY KEY NOT NULL, + `content` text NOT NULL, + `chatId` text NOT NULL, + `messageId` text NOT NULL, + `type` text, + `metadata` text +); diff --git a/drizzle/0001_wise_rockslide.sql b/drizzle/0001_wise_rockslide.sql new file mode 100644 index 0000000..b48d53b --- /dev/null +++ b/drizzle/0001_wise_rockslide.sql @@ -0,0 +1 @@ +/* Do nothing */ \ No newline at end of file diff --git a/drizzle/0002_daffy_wrecker.sql b/drizzle/0002_daffy_wrecker.sql new file mode 100644 index 0000000..1520a65 --- /dev/null +++ b/drizzle/0002_daffy_wrecker.sql @@ -0,0 +1 @@ +/* do nothing */ \ No newline at end of file diff --git a/drizzle/meta/0000_snapshot.json b/drizzle/meta/0000_snapshot.json new file mode 100644 index 0000000..850bcd3 --- /dev/null +++ b/drizzle/meta/0000_snapshot.json @@ -0,0 +1,116 @@ +{ + "version": "6", + "dialect": "sqlite", + "id": "ef3a044b-0f34-40b5-babb-2bb3a909ba27", + "prevId": "00000000-0000-0000-0000-000000000000", + "tables": { + "chats": { + "name": "chats", + "columns": { + "id": { + "name": "id", + "type": "text", + "primaryKey": true, + "notNull": true, + "autoincrement": false + }, + "title": { + "name": "title", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "createdAt": { + "name": "createdAt", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "focusMode": { + "name": "focusMode", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "files": { + "name": "files", + "type": "text", + "primaryKey": false, + "notNull": false, + "autoincrement": false, + "default": "'[]'" + } + }, + "indexes": {}, + "foreignKeys": {}, + "compositePrimaryKeys": {}, + "uniqueConstraints": {}, + "checkConstraints": {} + }, + "messages": { + "name": "messages", + "columns": { + "id": { + "name": "id", + "type": "integer", + "primaryKey": true, + "notNull": true, + "autoincrement": false + }, + "content": { + "name": "content", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "chatId": { + "name": "chatId", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "messageId": { + "name": "messageId", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "type": { + "name": "type", + "type": "text", + "primaryKey": false, + "notNull": false, + "autoincrement": false + }, + "metadata": { + "name": "metadata", + "type": "text", + "primaryKey": false, + "notNull": false, + "autoincrement": false + } + }, + "indexes": {}, + "foreignKeys": {}, + "compositePrimaryKeys": {}, + "uniqueConstraints": {}, + "checkConstraints": {} + } + }, + "views": {}, + "enums": {}, + "_meta": { + "schemas": {}, + "tables": {}, + "columns": {} + }, + "internal": { + "indexes": {} + } +} diff --git a/drizzle/meta/0001_snapshot.json b/drizzle/meta/0001_snapshot.json new file mode 100644 index 0000000..5e353d0 --- /dev/null +++ b/drizzle/meta/0001_snapshot.json @@ -0,0 +1,125 @@ +{ + "version": "6", + "dialect": "sqlite", + "id": "6dedf55f-0e44-478f-82cf-14a21ac686f8", + "prevId": "ef3a044b-0f34-40b5-babb-2bb3a909ba27", + "tables": { + "chats": { + "name": "chats", + "columns": { + "id": { + "name": "id", + "type": "text", + "primaryKey": true, + "notNull": true, + "autoincrement": false + }, + "title": { + "name": "title", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "createdAt": { + "name": "createdAt", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "focusMode": { + "name": "focusMode", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "files": { + "name": "files", + "type": "text", + "primaryKey": false, + "notNull": false, + "autoincrement": false, + "default": "'[]'" + } + }, + "indexes": {}, + "foreignKeys": {}, + "compositePrimaryKeys": {}, + "uniqueConstraints": {}, + "checkConstraints": {} + }, + "messages": { + "name": "messages", + "columns": { + "id": { + "name": "id", + "type": "integer", + "primaryKey": true, + "notNull": true, + "autoincrement": false + }, + "type": { + "name": "type", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "chatId": { + "name": "chatId", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "createdAt": { + "name": "createdAt", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": "CURRENT_TIMESTAMP" + }, + "messageId": { + "name": "messageId", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "content": { + "name": "content", + "type": "text", + "primaryKey": false, + "notNull": false, + "autoincrement": false + }, + "sources": { + "name": "sources", + "type": "text", + "primaryKey": false, + "notNull": false, + "autoincrement": false, + "default": "'[]'" + } + }, + "indexes": {}, + "foreignKeys": {}, + "compositePrimaryKeys": {}, + "uniqueConstraints": {}, + "checkConstraints": {} + } + }, + "views": {}, + "enums": {}, + "_meta": { + "schemas": {}, + "tables": {}, + "columns": {} + }, + "internal": { + "indexes": {} + } +} diff --git a/drizzle/meta/0002_snapshot.json b/drizzle/meta/0002_snapshot.json new file mode 100644 index 0000000..feb820c --- /dev/null +++ b/drizzle/meta/0002_snapshot.json @@ -0,0 +1,132 @@ +{ + "version": "6", + "dialect": "sqlite", + "id": "1c5eb804-d6b4-48ec-9a8f-75fb729c8e52", + "prevId": "6dedf55f-0e44-478f-82cf-14a21ac686f8", + "tables": { + "chats": { + "name": "chats", + "columns": { + "id": { + "name": "id", + "type": "text", + "primaryKey": true, + "notNull": true, + "autoincrement": false + }, + "title": { + "name": "title", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "createdAt": { + "name": "createdAt", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "sources": { + "name": "sources", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "files": { + "name": "files", + "type": "text", + "primaryKey": false, + "notNull": false, + "autoincrement": false, + "default": "'[]'" + } + }, + "indexes": {}, + "foreignKeys": {}, + "compositePrimaryKeys": {}, + "uniqueConstraints": {}, + "checkConstraints": {} + }, + "messages": { + "name": "messages", + "columns": { + "id": { + "name": "id", + "type": "integer", + "primaryKey": true, + "notNull": true, + "autoincrement": false + }, + "messageId": { + "name": "messageId", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "chatId": { + "name": "chatId", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "backendId": { + "name": "backendId", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "query": { + "name": "query", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "createdAt": { + "name": "createdAt", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "responseBlocks": { + "name": "responseBlocks", + "type": "text", + "primaryKey": false, + "notNull": false, + "autoincrement": false, + "default": "'[]'" + }, + "status": { + "name": "status", + "type": "text", + "primaryKey": false, + "notNull": false, + "autoincrement": false, + "default": "'answering'" + } + }, + "indexes": {}, + "foreignKeys": {}, + "compositePrimaryKeys": {}, + "uniqueConstraints": {}, + "checkConstraints": {} + } + }, + "views": {}, + "enums": {}, + "_meta": { + "schemas": {}, + "tables": {}, + "columns": {} + }, + "internal": { + "indexes": {} + } +} diff --git a/drizzle/meta/_journal.json b/drizzle/meta/_journal.json new file mode 100644 index 0000000..c271ddc --- /dev/null +++ b/drizzle/meta/_journal.json @@ -0,0 +1,27 @@ +{ + "version": "7", + "dialect": "sqlite", + "entries": [ + { + "idx": 0, + "version": "6", + "when": 1748405503809, + "tag": "0000_fuzzy_randall", + "breakpoints": true + }, + { + "idx": 1, + "version": "6", + "when": 1758863991284, + "tag": "0001_wise_rockslide", + "breakpoints": true + }, + { + "idx": 2, + "version": "6", + "when": 1763732708332, + "tag": "0002_daffy_wrecker", + "breakpoints": true + } + ] +} diff --git a/entrypoint.sh b/entrypoint.sh new file mode 100644 index 0000000..1d15d1c --- /dev/null +++ b/entrypoint.sh @@ -0,0 +1,32 @@ +#!/bin/sh +set -e + +echo "Starting SearXNG..." + +sudo -H -u searxng bash -c "cd /usr/local/searxng/searxng-src && export SEARXNG_SETTINGS_PATH='/etc/searxng/settings.yml' && export FLASK_APP=searx/webapp.py && /usr/local/searxng/searx-pyenv/bin/python -m flask run --host=0.0.0.0 --port=8080" & +SEARXNG_PID=$! + +echo "Waiting for SearXNG to be ready..." +sleep 5 + +COUNTER=0 +MAX_TRIES=30 +until curl -s http://localhost:8080 > /dev/null 2>&1; do + COUNTER=$((COUNTER+1)) + if [ $COUNTER -ge $MAX_TRIES ]; then + echo "Warning: SearXNG health check timeout, but continuing..." + break + fi + sleep 1 +done + +if curl -s http://localhost:8080 > /dev/null 2>&1; then + echo "SearXNG started successfully (PID: $SEARXNG_PID)" +else + echo "SearXNG may not be fully ready, but continuing (PID: $SEARXNG_PID)" +fi + +cd /home/perplexica +echo "Starting Perplexica..." + +exec node server.js \ No newline at end of file diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..20e7bcf --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,6 @@ +/// +/// +import './.next/dev/types/routes.d.ts'; + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/next.config.mjs b/next.config.mjs new file mode 100644 index 0000000..a6a8011 --- /dev/null +++ b/next.config.mjs @@ -0,0 +1,26 @@ +import pkg from './package.json' with { type: 'json' }; + +/** @type {import('next').NextConfig} */ +const nextConfig = { + output: 'standalone', + images: { + remotePatterns: [ + { + hostname: 's2.googleusercontent.com', + }, + ], + }, + serverExternalPackages: ['pdf-parse'], + outputFileTracingIncludes: { + '/api/**': [ + './node_modules/@napi-rs/canvas/**', + './node_modules/@napi-rs/canvas-linux-x64-gnu/**', + './node_modules/@napi-rs/canvas-linux-x64-musl/**', + ], + }, + env: { + NEXT_PUBLIC_VERSION: pkg.version, + }, +}; + +export default nextConfig; diff --git a/package.json b/package.json new file mode 100644 index 0000000..b8d99c5 --- /dev/null +++ b/package.json @@ -0,0 +1,76 @@ +{ + "name": "perplexica", + "version": "1.12.1", + "license": "MIT", + "author": "ItzCrazyKns", + "scripts": { + "dev": "next dev --webpack", + "build": "next build --webpack", + "start": "next start", + "lint": "next lint", + "format:write": "prettier . --write" + }, + "dependencies": { + "@google/genai": "^1.34.0", + "@headlessui/react": "^2.2.0", + "@headlessui/tailwindcss": "^0.2.2", + "@huggingface/transformers": "^3.8.1", + "@icons-pack/react-simple-icons": "^12.3.0", + "@phosphor-icons/react": "^2.1.10", + "@radix-ui/react-tooltip": "^1.2.8", + "@tailwindcss/typography": "^0.5.12", + "@toolsycc/json-repair": "^0.1.22", + "axios": "^1.8.3", + "better-sqlite3": "^11.9.1", + "clsx": "^2.1.0", + "drizzle-orm": "^0.40.1", + "js-tiktoken": "^1.0.21", + "jspdf": "^3.0.4", + "lightweight-charts": "^5.0.9", + "lucide-react": "^0.556.0", + "mammoth": "^1.9.1", + "markdown-to-jsx": "^7.7.2", + "mathjs": "^15.1.0", + "motion": "^12.23.26", + "next": "^16.0.7", + "next-themes": "^0.3.0", + "officeparser": "^5.2.2", + "ollama": "^0.6.3", + "openai": "^6.9.0", + "partial-json": "^0.1.7", + "pdf-parse": "^2.4.5", + "react": "^18", + "react-dom": "^18", + "react-syntax-highlighter": "^16.1.0", + "react-text-to-speech": "^0.14.5", + "react-textarea-autosize": "^8.5.3", + "rfc6902": "^5.1.2", + "sonner": "^1.4.41", + "tailwind-merge": "^2.2.2", + "turndown": "^7.2.2", + "yahoo-finance2": "^3.10.2", + "yet-another-react-lightbox": "^3.17.2", + "zod": "^4.1.12" + }, + "devDependencies": { + "@types/better-sqlite3": "^7.6.12", + "@types/jspdf": "^2.0.0", + "@types/node": "^24.8.1", + "@types/pdf-parse": "^1.1.4", + "@types/react": "^18", + "@types/react-dom": "^18", + "@types/react-syntax-highlighter": "^15.5.13", + "@types/turndown": "^5.0.6", + "autoprefixer": "^10.0.1", + "drizzle-kit": "^0.30.5", + "eslint": "^8", + "eslint-config-next": "14.1.4", + "postcss": "^8", + "prettier": "^3.2.5", + "tailwindcss": "^3.3.0", + "typescript": "^5.9.3" + }, + "optionalDependencies": { + "@napi-rs/canvas": "^0.1.87" + } +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..12a703d --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/public/fonts/pp-ed-ul.otf b/public/fonts/pp-ed-ul.otf new file mode 100644 index 0000000..59addeb Binary files /dev/null and b/public/fonts/pp-ed-ul.otf differ diff --git a/public/icon-100.png b/public/icon-100.png new file mode 100644 index 0000000..98fa242 Binary files /dev/null and b/public/icon-100.png differ diff --git a/public/icon-50.png b/public/icon-50.png new file mode 100644 index 0000000..9bb7a0e Binary files /dev/null and b/public/icon-50.png differ diff --git a/public/icon.png b/public/icon.png new file mode 100644 index 0000000..f6fe3c7 Binary files /dev/null and b/public/icon.png differ diff --git a/public/next.svg b/public/next.svg new file mode 100644 index 0000000..5174b28 --- /dev/null +++ b/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/screenshots/p1.png b/public/screenshots/p1.png new file mode 100644 index 0000000..02f01e5 Binary files /dev/null and b/public/screenshots/p1.png differ diff --git a/public/screenshots/p1_small.png b/public/screenshots/p1_small.png new file mode 100644 index 0000000..13d9a42 Binary files /dev/null and b/public/screenshots/p1_small.png differ diff --git a/public/screenshots/p2.png b/public/screenshots/p2.png new file mode 100644 index 0000000..1171675 Binary files /dev/null and b/public/screenshots/p2.png differ diff --git a/public/screenshots/p2_small.png b/public/screenshots/p2_small.png new file mode 100644 index 0000000..bd8d673 Binary files /dev/null and b/public/screenshots/p2_small.png differ diff --git a/public/vercel.svg b/public/vercel.svg new file mode 100644 index 0000000..d2f8422 --- /dev/null +++ b/public/vercel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/weather-ico/clear-day.svg b/public/weather-ico/clear-day.svg new file mode 100644 index 0000000..d97d28b --- /dev/null +++ b/public/weather-ico/clear-day.svg @@ -0,0 +1,131 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/clear-night.svg b/public/weather-ico/clear-night.svg new file mode 100644 index 0000000..005ac63 --- /dev/null +++ b/public/weather-ico/clear-night.svg @@ -0,0 +1,159 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/cloudy-1-day.svg b/public/weather-ico/cloudy-1-day.svg new file mode 100644 index 0000000..823fea1 --- /dev/null +++ b/public/weather-ico/cloudy-1-day.svg @@ -0,0 +1,178 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/cloudy-1-night.svg b/public/weather-ico/cloudy-1-night.svg new file mode 100644 index 0000000..3fe1541 --- /dev/null +++ b/public/weather-ico/cloudy-1-night.svg @@ -0,0 +1,206 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/fog-day.svg b/public/weather-ico/fog-day.svg new file mode 100644 index 0000000..ed834cf --- /dev/null +++ b/public/weather-ico/fog-day.svg @@ -0,0 +1,244 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + F + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/fog-night.svg b/public/weather-ico/fog-night.svg new file mode 100644 index 0000000..d59f98f --- /dev/null +++ b/public/weather-ico/fog-night.svg @@ -0,0 +1,309 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/frost-day.svg b/public/weather-ico/frost-day.svg new file mode 100644 index 0000000..16d591c --- /dev/null +++ b/public/weather-ico/frost-day.svg @@ -0,0 +1,204 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + F + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/frost-night.svg b/public/weather-ico/frost-night.svg new file mode 100644 index 0000000..ff2c8dc --- /dev/null +++ b/public/weather-ico/frost-night.svg @@ -0,0 +1,269 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/rain-and-sleet-mix.svg b/public/weather-ico/rain-and-sleet-mix.svg new file mode 100644 index 0000000..172010d --- /dev/null +++ b/public/weather-ico/rain-and-sleet-mix.svg @@ -0,0 +1,141 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/rainy-1-day.svg b/public/weather-ico/rainy-1-day.svg new file mode 100644 index 0000000..2faf06e --- /dev/null +++ b/public/weather-ico/rainy-1-day.svg @@ -0,0 +1,179 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/rainy-1-night.svg b/public/weather-ico/rainy-1-night.svg new file mode 100644 index 0000000..ee8ffd8 --- /dev/null +++ b/public/weather-ico/rainy-1-night.svg @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/rainy-2-day.svg b/public/weather-ico/rainy-2-day.svg new file mode 100644 index 0000000..affdfff --- /dev/null +++ b/public/weather-ico/rainy-2-day.svg @@ -0,0 +1,204 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/rainy-2-night.svg b/public/weather-ico/rainy-2-night.svg new file mode 100644 index 0000000..9c3ae20 --- /dev/null +++ b/public/weather-ico/rainy-2-night.svg @@ -0,0 +1,256 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/rainy-3-day.svg b/public/weather-ico/rainy-3-day.svg new file mode 100644 index 0000000..b0b5754 --- /dev/null +++ b/public/weather-ico/rainy-3-day.svg @@ -0,0 +1,206 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/rainy-3-night.svg b/public/weather-ico/rainy-3-night.svg new file mode 100644 index 0000000..4078e7d --- /dev/null +++ b/public/weather-ico/rainy-3-night.svg @@ -0,0 +1,270 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/scattered-thunderstorms-day.svg b/public/weather-ico/scattered-thunderstorms-day.svg new file mode 100644 index 0000000..0cfbccc --- /dev/null +++ b/public/weather-ico/scattered-thunderstorms-day.svg @@ -0,0 +1,374 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/scattered-thunderstorms-night.svg b/public/weather-ico/scattered-thunderstorms-night.svg new file mode 100644 index 0000000..72cf7a6 --- /dev/null +++ b/public/weather-ico/scattered-thunderstorms-night.svg @@ -0,0 +1,283 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/severe-thunderstorm.svg b/public/weather-ico/severe-thunderstorm.svg new file mode 100644 index 0000000..223198b --- /dev/null +++ b/public/weather-ico/severe-thunderstorm.svg @@ -0,0 +1,307 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/snowy-1-day.svg b/public/weather-ico/snowy-1-day.svg new file mode 100644 index 0000000..fb73943 --- /dev/null +++ b/public/weather-ico/snowy-1-day.svg @@ -0,0 +1,241 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/snowy-1-night.svg b/public/weather-ico/snowy-1-night.svg new file mode 100644 index 0000000..039ea2e --- /dev/null +++ b/public/weather-ico/snowy-1-night.svg @@ -0,0 +1,269 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/snowy-2-day.svg b/public/weather-ico/snowy-2-day.svg new file mode 100644 index 0000000..323a616 --- /dev/null +++ b/public/weather-ico/snowy-2-day.svg @@ -0,0 +1,273 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/snowy-2-night.svg b/public/weather-ico/snowy-2-night.svg new file mode 100644 index 0000000..10dcbfa --- /dev/null +++ b/public/weather-ico/snowy-2-night.svg @@ -0,0 +1,301 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/snowy-3-day.svg b/public/weather-ico/snowy-3-day.svg new file mode 100644 index 0000000..846c17a --- /dev/null +++ b/public/weather-ico/snowy-3-day.svg @@ -0,0 +1,334 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/weather-ico/snowy-3-night.svg b/public/weather-ico/snowy-3-night.svg new file mode 100644 index 0000000..b3c8c24 --- /dev/null +++ b/public/weather-ico/snowy-3-night.svg @@ -0,0 +1,361 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/app/api/chat/route.ts b/src/app/api/chat/route.ts new file mode 100644 index 0000000..6362ebc --- /dev/null +++ b/src/app/api/chat/route.ts @@ -0,0 +1,254 @@ +import { z } from 'zod'; +import ModelRegistry from '@/lib/models/registry'; +import { ModelWithProvider } from '@/lib/models/types'; +import SearchAgent from '@/lib/agents/search'; +import SessionManager from '@/lib/session'; +import { ChatTurnMessage } from '@/lib/types'; +import { SearchSources } from '@/lib/agents/search/types'; +import db from '@/lib/db'; +import { eq } from 'drizzle-orm'; +import { chats } from '@/lib/db/schema'; +import UploadManager from '@/lib/uploads/manager'; + +export const runtime = 'nodejs'; +export const dynamic = 'force-dynamic'; + +const messageSchema = z.object({ + messageId: z.string().min(1, 'Message ID is required'), + chatId: z.string().min(1, 'Chat ID is required'), + content: z.string().min(1, 'Message content is required'), +}); + +const chatModelSchema: z.ZodType = z.object({ + providerId: z.string({ message: 'Chat model provider id must be provided' }), + key: z.string({ message: 'Chat model key must be provided' }), +}); + +const embeddingModelSchema: z.ZodType = z.object({ + providerId: z.string({ + message: 'Embedding model provider id must be provided', + }), + key: z.string({ message: 'Embedding model key must be provided' }), +}); + +const bodySchema = z.object({ + message: messageSchema, + optimizationMode: z.enum(['speed', 'balanced', 'quality'], { + message: 'Optimization mode must be one of: speed, balanced, quality', + }), + sources: z.array(z.string()).optional().default([]), + history: z + .array(z.tuple([z.string(), z.string()])) + .optional() + .default([]), + files: z.array(z.string()).optional().default([]), + chatModel: chatModelSchema, + embeddingModel: embeddingModelSchema, + systemInstructions: z.string().nullable().optional().default(''), +}); + +type Body = z.infer; + +const safeValidateBody = (data: unknown) => { + const result = bodySchema.safeParse(data); + + if (!result.success) { + return { + success: false, + error: result.error.issues.map((e: any) => ({ + path: e.path.join('.'), + message: e.message, + })), + }; + } + + return { + success: true, + data: result.data, + }; +}; + +const ensureChatExists = async (input: { + id: string; + sources: SearchSources[]; + query: string; + fileIds: string[]; +}) => { + try { + const exists = await db.query.chats + .findFirst({ + where: eq(chats.id, input.id), + }) + .execute(); + + if (!exists) { + await db.insert(chats).values({ + id: input.id, + createdAt: new Date().toISOString(), + sources: input.sources, + title: input.query, + files: input.fileIds.map((id) => { + return { + fileId: id, + name: UploadManager.getFile(id)?.name || 'Uploaded File', + }; + }), + }); + } + } catch (err) { + console.error('Failed to check/save chat:', err); + } +}; + +export const POST = async (req: Request) => { + try { + const reqBody = (await req.json()) as Body; + + const parseBody = safeValidateBody(reqBody); + + if (!parseBody.success) { + return Response.json( + { message: 'Invalid request body', error: parseBody.error }, + { status: 400 }, + ); + } + + const body = parseBody.data as Body; + const { message } = body; + + if (message.content === '') { + return Response.json( + { + message: 'Please provide a message to process', + }, + { status: 400 }, + ); + } + + const registry = new ModelRegistry(); + + const [llm, embedding] = await Promise.all([ + registry.loadChatModel(body.chatModel.providerId, body.chatModel.key), + registry.loadEmbeddingModel( + body.embeddingModel.providerId, + body.embeddingModel.key, + ), + ]); + + const history: ChatTurnMessage[] = body.history.map((msg) => { + if (msg[0] === 'human') { + return { + role: 'user', + content: msg[1], + }; + } else { + return { + role: 'assistant', + content: msg[1], + }; + } + }); + + const agent = new SearchAgent(); + const session = SessionManager.createSession(); + + const responseStream = new TransformStream(); + const writer = responseStream.writable.getWriter(); + const encoder = new TextEncoder(); + + const disconnect = session.subscribe((event: string, data: any) => { + if (event === 'data') { + if (data.type === 'block') { + writer.write( + encoder.encode( + JSON.stringify({ + type: 'block', + block: data.block, + }) + '\n', + ), + ); + } else if (data.type === 'updateBlock') { + writer.write( + encoder.encode( + JSON.stringify({ + type: 'updateBlock', + blockId: data.blockId, + patch: data.patch, + }) + '\n', + ), + ); + } else if (data.type === 'researchComplete') { + writer.write( + encoder.encode( + JSON.stringify({ + type: 'researchComplete', + }) + '\n', + ), + ); + } + } else if (event === 'end') { + writer.write( + encoder.encode( + JSON.stringify({ + type: 'messageEnd', + }) + '\n', + ), + ); + writer.close(); + session.removeAllListeners(); + } else if (event === 'error') { + writer.write( + encoder.encode( + JSON.stringify({ + type: 'error', + data: data.data, + }) + '\n', + ), + ); + writer.close(); + session.removeAllListeners(); + } + }); + + agent.searchAsync(session, { + chatHistory: history, + followUp: message.content, + chatId: body.message.chatId, + messageId: body.message.messageId, + config: { + llm, + embedding: embedding, + sources: body.sources as SearchSources[], + mode: body.optimizationMode, + fileIds: body.files, + systemInstructions: body.systemInstructions || 'None', + }, + }); + + ensureChatExists({ + id: body.message.chatId, + sources: body.sources as SearchSources[], + fileIds: body.files, + query: body.message.content, + }); + + req.signal.addEventListener('abort', () => { + disconnect(); + writer.close(); + }); + + return new Response(responseStream.readable, { + headers: { + 'Content-Type': 'text/event-stream', + Connection: 'keep-alive', + 'Cache-Control': 'no-cache, no-transform', + }, + }); + } catch (err) { + console.error('An error occurred while processing chat request:', err); + return Response.json( + { message: 'An error occurred while processing chat request' }, + { status: 500 }, + ); + } +}; diff --git a/src/app/api/chats/[id]/route.ts b/src/app/api/chats/[id]/route.ts new file mode 100644 index 0000000..6891454 --- /dev/null +++ b/src/app/api/chats/[id]/route.ts @@ -0,0 +1,69 @@ +import db from '@/lib/db'; +import { chats, messages } from '@/lib/db/schema'; +import { eq } from 'drizzle-orm'; + +export const GET = async ( + req: Request, + { params }: { params: Promise<{ id: string }> }, +) => { + try { + const { id } = await params; + + const chatExists = await db.query.chats.findFirst({ + where: eq(chats.id, id), + }); + + if (!chatExists) { + return Response.json({ message: 'Chat not found' }, { status: 404 }); + } + + const chatMessages = await db.query.messages.findMany({ + where: eq(messages.chatId, id), + }); + + return Response.json( + { + chat: chatExists, + messages: chatMessages, + }, + { status: 200 }, + ); + } catch (err) { + console.error('Error in getting chat by id: ', err); + return Response.json( + { message: 'An error has occurred.' }, + { status: 500 }, + ); + } +}; + +export const DELETE = async ( + req: Request, + { params }: { params: Promise<{ id: string }> }, +) => { + try { + const { id } = await params; + + const chatExists = await db.query.chats.findFirst({ + where: eq(chats.id, id), + }); + + if (!chatExists) { + return Response.json({ message: 'Chat not found' }, { status: 404 }); + } + + await db.delete(chats).where(eq(chats.id, id)).execute(); + await db.delete(messages).where(eq(messages.chatId, id)).execute(); + + return Response.json( + { message: 'Chat deleted successfully' }, + { status: 200 }, + ); + } catch (err) { + console.error('Error in deleting chat by id: ', err); + return Response.json( + { message: 'An error has occurred.' }, + { status: 500 }, + ); + } +}; diff --git a/src/app/api/chats/route.ts b/src/app/api/chats/route.ts new file mode 100644 index 0000000..986a192 --- /dev/null +++ b/src/app/api/chats/route.ts @@ -0,0 +1,15 @@ +import db from '@/lib/db'; + +export const GET = async (req: Request) => { + try { + let chats = await db.query.chats.findMany(); + chats = chats.reverse(); + return Response.json({ chats: chats }, { status: 200 }); + } catch (err) { + console.error('Error in getting chats: ', err); + return Response.json( + { message: 'An error has occurred.' }, + { status: 500 }, + ); + } +}; diff --git a/src/app/api/config/route.ts b/src/app/api/config/route.ts new file mode 100644 index 0000000..1e36137 --- /dev/null +++ b/src/app/api/config/route.ts @@ -0,0 +1,77 @@ +import configManager from '@/lib/config'; +import ModelRegistry from '@/lib/models/registry'; +import { NextRequest, NextResponse } from 'next/server'; +import { ConfigModelProvider } from '@/lib/config/types'; + +type SaveConfigBody = { + key: string; + value: string; +}; + +export const GET = async (req: NextRequest) => { + try { + const values = configManager.getCurrentConfig(); + const fields = configManager.getUIConfigSections(); + + const modelRegistry = new ModelRegistry(); + const modelProviders = await modelRegistry.getActiveProviders(); + + values.modelProviders = values.modelProviders.map( + (mp: ConfigModelProvider) => { + const activeProvider = modelProviders.find((p) => p.id === mp.id); + + return { + ...mp, + chatModels: activeProvider?.chatModels ?? mp.chatModels, + embeddingModels: + activeProvider?.embeddingModels ?? mp.embeddingModels, + }; + }, + ); + + return NextResponse.json({ + values, + fields, + }); + } catch (err) { + console.error('Error in getting config: ', err); + return Response.json( + { message: 'An error has occurred.' }, + { status: 500 }, + ); + } +}; + +export const POST = async (req: NextRequest) => { + try { + const body: SaveConfigBody = await req.json(); + + if (!body.key || !body.value) { + return Response.json( + { + message: 'Key and value are required.', + }, + { + status: 400, + }, + ); + } + + configManager.updateConfig(body.key, body.value); + + return Response.json( + { + message: 'Config updated successfully.', + }, + { + status: 200, + }, + ); + } catch (err) { + console.error('Error in getting config: ', err); + return Response.json( + { message: 'An error has occurred.' }, + { status: 500 }, + ); + } +}; diff --git a/src/app/api/config/setup-complete/route.ts b/src/app/api/config/setup-complete/route.ts new file mode 100644 index 0000000..0055fd3 --- /dev/null +++ b/src/app/api/config/setup-complete/route.ts @@ -0,0 +1,23 @@ +import configManager from '@/lib/config'; +import { NextRequest } from 'next/server'; + +export const POST = async (req: NextRequest) => { + try { + configManager.markSetupComplete(); + + return Response.json( + { + message: 'Setup marked as complete.', + }, + { + status: 200, + }, + ); + } catch (err) { + console.error('Error marking setup as complete: ', err); + return Response.json( + { message: 'An error has occurred.' }, + { status: 500 }, + ); + } +}; diff --git a/src/app/api/discover/route.ts b/src/app/api/discover/route.ts new file mode 100644 index 0000000..415aee8 --- /dev/null +++ b/src/app/api/discover/route.ts @@ -0,0 +1,98 @@ +import { searchSearxng } from '@/lib/searxng'; + +const websitesForTopic = { + tech: { + query: ['technology news', 'latest tech', 'AI', 'science and innovation'], + links: ['techcrunch.com', 'wired.com', 'theverge.com'], + }, + finance: { + query: ['finance news', 'economy', 'stock market', 'investing'], + links: ['bloomberg.com', 'cnbc.com', 'marketwatch.com'], + }, + art: { + query: ['art news', 'culture', 'modern art', 'cultural events'], + links: ['artnews.com', 'hyperallergic.com', 'theartnewspaper.com'], + }, + sports: { + query: ['sports news', 'latest sports', 'cricket football tennis'], + links: ['espn.com', 'bbc.com/sport', 'skysports.com'], + }, + entertainment: { + query: ['entertainment news', 'movies', 'TV shows', 'celebrities'], + links: ['hollywoodreporter.com', 'variety.com', 'deadline.com'], + }, +}; + +type Topic = keyof typeof websitesForTopic; + +export const GET = async (req: Request) => { + try { + const params = new URL(req.url).searchParams; + + const mode: 'normal' | 'preview' = + (params.get('mode') as 'normal' | 'preview') || 'normal'; + const topic: Topic = (params.get('topic') as Topic) || 'tech'; + + const selectedTopic = websitesForTopic[topic]; + + let data = []; + + if (mode === 'normal') { + const seenUrls = new Set(); + + data = ( + await Promise.all( + selectedTopic.links.flatMap((link) => + selectedTopic.query.map(async (query) => { + return ( + await searchSearxng(`site:${link} ${query}`, { + engines: ['bing news'], + pageno: 1, + language: 'en', + }) + ).results; + }), + ), + ) + ) + .flat() + .filter((item) => { + const url = item.url?.toLowerCase().trim(); + if (seenUrls.has(url)) return false; + seenUrls.add(url); + return true; + }) + .sort(() => Math.random() - 0.5); + } else { + data = ( + await searchSearxng( + `site:${selectedTopic.links[Math.floor(Math.random() * selectedTopic.links.length)]} ${selectedTopic.query[Math.floor(Math.random() * selectedTopic.query.length)]}`, + { + engines: ['bing news'], + pageno: 1, + language: 'en', + }, + ) + ).results; + } + + return Response.json( + { + blogs: data, + }, + { + status: 200, + }, + ); + } catch (err) { + console.error(`An error occurred in discover route: ${err}`); + return Response.json( + { + message: 'An error has occurred', + }, + { + status: 500, + }, + ); + } +}; diff --git a/src/app/api/images/route.ts b/src/app/api/images/route.ts new file mode 100644 index 0000000..ab7dffb --- /dev/null +++ b/src/app/api/images/route.ts @@ -0,0 +1,41 @@ +import searchImages from '@/lib/agents/media/image'; +import ModelRegistry from '@/lib/models/registry'; +import { ModelWithProvider } from '@/lib/models/types'; + +interface ImageSearchBody { + query: string; + chatHistory: any[]; + chatModel: ModelWithProvider; +} + +export const POST = async (req: Request) => { + try { + const body: ImageSearchBody = await req.json(); + + const registry = new ModelRegistry(); + + const llm = await registry.loadChatModel( + body.chatModel.providerId, + body.chatModel.key, + ); + + const images = await searchImages( + { + chatHistory: body.chatHistory.map(([role, content]) => ({ + role: role === 'human' ? 'user' : 'assistant', + content, + })), + query: body.query, + }, + llm, + ); + + return Response.json({ images }, { status: 200 }); + } catch (err) { + console.error(`An error occurred while searching images: ${err}`); + return Response.json( + { message: 'An error occurred while searching images' }, + { status: 500 }, + ); + } +}; diff --git a/src/app/api/providers/[id]/models/route.ts b/src/app/api/providers/[id]/models/route.ts new file mode 100644 index 0000000..5b4acc3 --- /dev/null +++ b/src/app/api/providers/[id]/models/route.ts @@ -0,0 +1,94 @@ +import ModelRegistry from '@/lib/models/registry'; +import { Model } from '@/lib/models/types'; +import { NextRequest } from 'next/server'; + +export const POST = async ( + req: NextRequest, + { params }: { params: Promise<{ id: string }> }, +) => { + try { + const { id } = await params; + + const body: Partial & { type: 'embedding' | 'chat' } = + await req.json(); + + if (!body.key || !body.name) { + return Response.json( + { + message: 'Key and name must be provided', + }, + { + status: 400, + }, + ); + } + + const registry = new ModelRegistry(); + + await registry.addProviderModel(id, body.type, body); + + return Response.json( + { + message: 'Model added successfully', + }, + { + status: 200, + }, + ); + } catch (err) { + console.error('An error occurred while adding provider model', err); + return Response.json( + { + message: 'An error has occurred.', + }, + { + status: 500, + }, + ); + } +}; + +export const DELETE = async ( + req: NextRequest, + { params }: { params: Promise<{ id: string }> }, +) => { + try { + const { id } = await params; + + const body: { key: string; type: 'embedding' | 'chat' } = await req.json(); + + if (!body.key) { + return Response.json( + { + message: 'Key and name must be provided', + }, + { + status: 400, + }, + ); + } + + const registry = new ModelRegistry(); + + await registry.removeProviderModel(id, body.type, body.key); + + return Response.json( + { + message: 'Model added successfully', + }, + { + status: 200, + }, + ); + } catch (err) { + console.error('An error occurred while deleting provider model', err); + return Response.json( + { + message: 'An error has occurred.', + }, + { + status: 500, + }, + ); + } +}; diff --git a/src/app/api/providers/[id]/route.ts b/src/app/api/providers/[id]/route.ts new file mode 100644 index 0000000..489d73a --- /dev/null +++ b/src/app/api/providers/[id]/route.ts @@ -0,0 +1,89 @@ +import ModelRegistry from '@/lib/models/registry'; +import { NextRequest } from 'next/server'; + +export const DELETE = async ( + req: NextRequest, + { params }: { params: Promise<{ id: string }> }, +) => { + try { + const { id } = await params; + + if (!id) { + return Response.json( + { + message: 'Provider ID is required.', + }, + { + status: 400, + }, + ); + } + + const registry = new ModelRegistry(); + await registry.removeProvider(id); + + return Response.json( + { + message: 'Provider deleted successfully.', + }, + { + status: 200, + }, + ); + } catch (err: any) { + console.error('An error occurred while deleting provider', err.message); + return Response.json( + { + message: 'An error has occurred.', + }, + { + status: 500, + }, + ); + } +}; + +export const PATCH = async ( + req: NextRequest, + { params }: { params: Promise<{ id: string }> }, +) => { + try { + const body = await req.json(); + const { name, config } = body; + const { id } = await params; + + if (!id || !name || !config) { + return Response.json( + { + message: 'Missing required fields.', + }, + { + status: 400, + }, + ); + } + + const registry = new ModelRegistry(); + + const updatedProvider = await registry.updateProvider(id, name, config); + + return Response.json( + { + provider: updatedProvider, + }, + { + status: 200, + }, + ); + } catch (err: any) { + console.error('An error occurred while updating provider', err.message); + return Response.json( + { + message: 'An error has occurred.', + }, + { + status: 500, + }, + ); + } +}; diff --git a/src/app/api/providers/route.ts b/src/app/api/providers/route.ts new file mode 100644 index 0000000..53d6e60 --- /dev/null +++ b/src/app/api/providers/route.ts @@ -0,0 +1,74 @@ +import ModelRegistry from '@/lib/models/registry'; +import { NextRequest } from 'next/server'; + +export const GET = async (req: Request) => { + try { + const registry = new ModelRegistry(); + + const activeProviders = await registry.getActiveProviders(); + + const filteredProviders = activeProviders.filter((p) => { + return !p.chatModels.some((m) => m.key === 'error'); + }); + + return Response.json( + { + providers: filteredProviders, + }, + { + status: 200, + }, + ); + } catch (err) { + console.error('An error occurred while fetching providers', err); + return Response.json( + { + message: 'An error has occurred.', + }, + { + status: 500, + }, + ); + } +}; + +export const POST = async (req: NextRequest) => { + try { + const body = await req.json(); + const { type, name, config } = body; + + if (!type || !name || !config) { + return Response.json( + { + message: 'Missing required fields.', + }, + { + status: 400, + }, + ); + } + + const registry = new ModelRegistry(); + + const newProvider = await registry.addProvider(type, name, config); + + return Response.json( + { + provider: newProvider, + }, + { + status: 200, + }, + ); + } catch (err) { + console.error('An error occurred while creating provider', err); + return Response.json( + { + message: 'An error has occurred.', + }, + { + status: 500, + }, + ); + } +}; diff --git a/src/app/api/reconnect/[id]/route.ts b/src/app/api/reconnect/[id]/route.ts new file mode 100644 index 0000000..08be11b --- /dev/null +++ b/src/app/api/reconnect/[id]/route.ts @@ -0,0 +1,93 @@ +import SessionManager from '@/lib/session'; + +export const POST = async ( + req: Request, + { params }: { params: Promise<{ id: string }> }, +) => { + try { + const { id } = await params; + + const session = SessionManager.getSession(id); + + if (!session) { + return Response.json({ message: 'Session not found' }, { status: 404 }); + } + + const responseStream = new TransformStream(); + const writer = responseStream.writable.getWriter(); + const encoder = new TextEncoder(); + + const disconnect = session.subscribe((event, data) => { + if (event === 'data') { + if (data.type === 'block') { + writer.write( + encoder.encode( + JSON.stringify({ + type: 'block', + block: data.block, + }) + '\n', + ), + ); + } else if (data.type === 'updateBlock') { + writer.write( + encoder.encode( + JSON.stringify({ + type: 'updateBlock', + blockId: data.blockId, + patch: data.patch, + }) + '\n', + ), + ); + } else if (data.type === 'researchComplete') { + writer.write( + encoder.encode( + JSON.stringify({ + type: 'researchComplete', + }) + '\n', + ), + ); + } + } else if (event === 'end') { + writer.write( + encoder.encode( + JSON.stringify({ + type: 'messageEnd', + }) + '\n', + ), + ); + writer.close(); + disconnect(); + } else if (event === 'error') { + writer.write( + encoder.encode( + JSON.stringify({ + type: 'error', + data: data.data, + }) + '\n', + ), + ); + writer.close(); + disconnect(); + } + }); + + req.signal.addEventListener('abort', () => { + disconnect(); + writer.close(); + }); + + return new Response(responseStream.readable, { + headers: { + 'Content-Type': 'text/event-stream', + Connection: 'keep-alive', + 'Cache-Control': 'no-cache, no-transform', + }, + }); + } catch (err) { + console.error('Error in reconnecting to session stream: ', err); + return Response.json( + { message: 'An error has occurred.' }, + { status: 500 }, + ); + } +}; diff --git a/src/app/api/search/route.ts b/src/app/api/search/route.ts new file mode 100644 index 0000000..0991268 --- /dev/null +++ b/src/app/api/search/route.ts @@ -0,0 +1,208 @@ +import ModelRegistry from '@/lib/models/registry'; +import { ModelWithProvider } from '@/lib/models/types'; +import SessionManager from '@/lib/session'; +import { ChatTurnMessage } from '@/lib/types'; +import { SearchSources } from '@/lib/agents/search/types'; +import APISearchAgent from '@/lib/agents/search/api'; + +interface ChatRequestBody { + optimizationMode: 'speed' | 'balanced' | 'quality'; + sources: SearchSources[]; + chatModel: ModelWithProvider; + embeddingModel: ModelWithProvider; + query: string; + history: Array<[string, string]>; + stream?: boolean; + systemInstructions?: string; +} + +export const POST = async (req: Request) => { + try { + const body: ChatRequestBody = await req.json(); + + if (!body.sources || !body.query) { + return Response.json( + { message: 'Missing sources or query' }, + { status: 400 }, + ); + } + + body.history = body.history || []; + body.optimizationMode = body.optimizationMode || 'speed'; + body.stream = body.stream || false; + + const registry = new ModelRegistry(); + + const [llm, embeddings] = await Promise.all([ + registry.loadChatModel(body.chatModel.providerId, body.chatModel.key), + registry.loadEmbeddingModel( + body.embeddingModel.providerId, + body.embeddingModel.key, + ), + ]); + + const history: ChatTurnMessage[] = body.history.map((msg) => { + return msg[0] === 'human' + ? { role: 'user', content: msg[1] } + : { role: 'assistant', content: msg[1] }; + }); + + const session = SessionManager.createSession(); + + const agent = new APISearchAgent(); + + agent.searchAsync(session, { + chatHistory: history, + config: { + embedding: embeddings, + llm: llm, + sources: body.sources, + mode: body.optimizationMode, + fileIds: [], + systemInstructions: body.systemInstructions || '', + }, + followUp: body.query, + chatId: crypto.randomUUID(), + messageId: crypto.randomUUID(), + }); + + if (!body.stream) { + return new Promise( + ( + resolve: (value: Response) => void, + reject: (value: Response) => void, + ) => { + let message = ''; + let sources: any[] = []; + + session.subscribe((event: string, data: Record) => { + if (event === 'data') { + try { + if (data.type === 'response') { + message += data.data; + } else if (data.type === 'searchResults') { + sources = data.data; + } + } catch (error) { + reject( + Response.json( + { message: 'Error parsing data' }, + { status: 500 }, + ), + ); + } + } + + if (event === 'end') { + resolve(Response.json({ message, sources }, { status: 200 })); + } + + if (event === 'error') { + reject( + Response.json( + { message: 'Search error', error: data }, + { status: 500 }, + ), + ); + } + }); + }, + ); + } + + const encoder = new TextEncoder(); + + const abortController = new AbortController(); + const { signal } = abortController; + + const stream = new ReadableStream({ + start(controller) { + let sources: any[] = []; + + controller.enqueue( + encoder.encode( + JSON.stringify({ + type: 'init', + data: 'Stream connected', + }) + '\n', + ), + ); + + signal.addEventListener('abort', () => { + session.removeAllListeners(); + + try { + controller.close(); + } catch (error) {} + }); + + session.subscribe((event: string, data: Record) => { + if (event === 'data') { + if (signal.aborted) return; + + try { + if (data.type === 'response') { + controller.enqueue( + encoder.encode( + JSON.stringify({ + type: 'response', + data: data.data, + }) + '\n', + ), + ); + } else if (data.type === 'searchResults') { + sources = data.data; + controller.enqueue( + encoder.encode( + JSON.stringify({ + type: 'sources', + data: sources, + }) + '\n', + ), + ); + } + } catch (error) { + controller.error(error); + } + } + + if (event === 'end') { + if (signal.aborted) return; + + controller.enqueue( + encoder.encode( + JSON.stringify({ + type: 'done', + }) + '\n', + ), + ); + controller.close(); + } + + if (event === 'error') { + if (signal.aborted) return; + + controller.error(data); + } + }); + }, + cancel() { + abortController.abort(); + }, + }); + + return new Response(stream, { + headers: { + 'Content-Type': 'text/event-stream', + 'Cache-Control': 'no-cache, no-transform', + Connection: 'keep-alive', + }, + }); + } catch (err: any) { + console.error(`Error in getting search results: ${err.message}`); + return Response.json( + { message: 'An error has occurred.' }, + { status: 500 }, + ); + } +}; diff --git a/src/app/api/suggestions/route.ts b/src/app/api/suggestions/route.ts new file mode 100644 index 0000000..0f4587c --- /dev/null +++ b/src/app/api/suggestions/route.ts @@ -0,0 +1,39 @@ +import generateSuggestions from '@/lib/agents/suggestions'; +import ModelRegistry from '@/lib/models/registry'; +import { ModelWithProvider } from '@/lib/models/types'; + +interface SuggestionsGenerationBody { + chatHistory: any[]; + chatModel: ModelWithProvider; +} + +export const POST = async (req: Request) => { + try { + const body: SuggestionsGenerationBody = await req.json(); + + const registry = new ModelRegistry(); + + const llm = await registry.loadChatModel( + body.chatModel.providerId, + body.chatModel.key, + ); + + const suggestions = await generateSuggestions( + { + chatHistory: body.chatHistory.map(([role, content]) => ({ + role: role === 'human' ? 'user' : 'assistant', + content, + })), + }, + llm, + ); + + return Response.json({ suggestions }, { status: 200 }); + } catch (err) { + console.error(`An error occurred while generating suggestions: ${err}`); + return Response.json( + { message: 'An error occurred while generating suggestions' }, + { status: 500 }, + ); + } +}; diff --git a/src/app/api/uploads/route.ts b/src/app/api/uploads/route.ts new file mode 100644 index 0000000..9cac0f7 --- /dev/null +++ b/src/app/api/uploads/route.ts @@ -0,0 +1,40 @@ +import { NextResponse } from 'next/server'; +import ModelRegistry from '@/lib/models/registry'; +import UploadManager from '@/lib/uploads/manager'; + +export async function POST(req: Request) { + try { + const formData = await req.formData(); + + const files = formData.getAll('files') as File[]; + const embeddingModel = formData.get('embedding_model_key') as string; + const embeddingModelProvider = formData.get('embedding_model_provider_id') as string; + + if (!embeddingModel || !embeddingModelProvider) { + return NextResponse.json( + { message: 'Missing embedding model or provider' }, + { status: 400 }, + ); + } + + const registry = new ModelRegistry(); + + const model = await registry.loadEmbeddingModel(embeddingModelProvider, embeddingModel); + + const uploadManager = new UploadManager({ + embeddingModel: model, + }) + + const processedFiles = await uploadManager.processFiles(files); + + return NextResponse.json({ + files: processedFiles, + }); + } catch (error) { + console.error('Error uploading file:', error); + return NextResponse.json( + { message: 'An error has occurred.' }, + { status: 500 }, + ); + } +} diff --git a/src/app/api/videos/route.ts b/src/app/api/videos/route.ts new file mode 100644 index 0000000..7bbf59a --- /dev/null +++ b/src/app/api/videos/route.ts @@ -0,0 +1,41 @@ +import handleVideoSearch from '@/lib/agents/media/video'; +import ModelRegistry from '@/lib/models/registry'; +import { ModelWithProvider } from '@/lib/models/types'; + +interface VideoSearchBody { + query: string; + chatHistory: any[]; + chatModel: ModelWithProvider; +} + +export const POST = async (req: Request) => { + try { + const body: VideoSearchBody = await req.json(); + + const registry = new ModelRegistry(); + + const llm = await registry.loadChatModel( + body.chatModel.providerId, + body.chatModel.key, + ); + + const videos = await handleVideoSearch( + { + chatHistory: body.chatHistory.map(([role, content]) => ({ + role: role === 'human' ? 'user' : 'assistant', + content, + })), + query: body.query, + }, + llm, + ); + + return Response.json({ videos }, { status: 200 }); + } catch (err) { + console.error(`An error occurred while searching videos: ${err}`); + return Response.json( + { message: 'An error occurred while searching videos' }, + { status: 500 }, + ); + } +}; diff --git a/src/app/api/weather/route.ts b/src/app/api/weather/route.ts new file mode 100644 index 0000000..afaf8a6 --- /dev/null +++ b/src/app/api/weather/route.ts @@ -0,0 +1,174 @@ +export const POST = async (req: Request) => { + try { + const body: { + lat: number; + lng: number; + measureUnit: 'Imperial' | 'Metric'; + } = await req.json(); + + if (!body.lat || !body.lng) { + return Response.json( + { + message: 'Invalid request.', + }, + { status: 400 }, + ); + } + + const res = await fetch( + `https://api.open-meteo.com/v1/forecast?latitude=${body.lat}&longitude=${body.lng}¤t=weather_code,temperature_2m,is_day,relative_humidity_2m,wind_speed_10m&timezone=auto${ + body.measureUnit === 'Metric' ? '' : '&temperature_unit=fahrenheit' + }${body.measureUnit === 'Metric' ? '' : '&wind_speed_unit=mph'}`, + ); + + const data = await res.json(); + + if (data.error) { + console.error(`Error fetching weather data: ${data.reason}`); + return Response.json( + { + message: 'An error has occurred.', + }, + { status: 500 }, + ); + } + + const weather: { + temperature: number; + condition: string; + humidity: number; + windSpeed: number; + icon: string; + temperatureUnit: 'C' | 'F'; + windSpeedUnit: 'm/s' | 'mph'; + } = { + temperature: data.current.temperature_2m, + condition: '', + humidity: data.current.relative_humidity_2m, + windSpeed: data.current.wind_speed_10m, + icon: '', + temperatureUnit: body.measureUnit === 'Metric' ? 'C' : 'F', + windSpeedUnit: body.measureUnit === 'Metric' ? 'm/s' : 'mph', + }; + + const code = data.current.weather_code; + const isDay = data.current.is_day === 1; + const dayOrNight = isDay ? 'day' : 'night'; + + switch (code) { + case 0: + weather.icon = `clear-${dayOrNight}`; + weather.condition = 'Clear'; + break; + + case 1: + weather.condition = 'Mainly Clear'; + case 2: + weather.condition = 'Partly Cloudy'; + case 3: + weather.icon = `cloudy-1-${dayOrNight}`; + weather.condition = 'Cloudy'; + break; + + case 45: + weather.condition = 'Fog'; + case 48: + weather.icon = `fog-${dayOrNight}`; + weather.condition = 'Fog'; + break; + + case 51: + weather.condition = 'Light Drizzle'; + case 53: + weather.condition = 'Moderate Drizzle'; + case 55: + weather.icon = `rainy-1-${dayOrNight}`; + weather.condition = 'Dense Drizzle'; + break; + + case 56: + weather.condition = 'Light Freezing Drizzle'; + case 57: + weather.icon = `frost-${dayOrNight}`; + weather.condition = 'Dense Freezing Drizzle'; + break; + + case 61: + weather.condition = 'Slight Rain'; + case 63: + weather.condition = 'Moderate Rain'; + case 65: + weather.condition = 'Heavy Rain'; + weather.icon = `rainy-2-${dayOrNight}`; + break; + + case 66: + weather.condition = 'Light Freezing Rain'; + case 67: + weather.condition = 'Heavy Freezing Rain'; + weather.icon = 'rain-and-sleet-mix'; + break; + + case 71: + weather.condition = 'Slight Snow Fall'; + case 73: + weather.condition = 'Moderate Snow Fall'; + case 75: + weather.condition = 'Heavy Snow Fall'; + weather.icon = `snowy-2-${dayOrNight}`; + break; + + case 77: + weather.condition = 'Snow'; + weather.icon = `snowy-1-${dayOrNight}`; + break; + + case 80: + weather.condition = 'Slight Rain Showers'; + case 81: + weather.condition = 'Moderate Rain Showers'; + case 82: + weather.condition = 'Heavy Rain Showers'; + weather.icon = `rainy-3-${dayOrNight}`; + break; + + case 85: + weather.condition = 'Slight Snow Showers'; + case 86: + weather.condition = 'Moderate Snow Showers'; + case 87: + weather.condition = 'Heavy Snow Showers'; + weather.icon = `snowy-3-${dayOrNight}`; + break; + + case 95: + weather.condition = 'Thunderstorm'; + weather.icon = `scattered-thunderstorms-${dayOrNight}`; + break; + + case 96: + weather.condition = 'Thunderstorm with Slight Hail'; + case 99: + weather.condition = 'Thunderstorm with Heavy Hail'; + weather.icon = 'severe-thunderstorm'; + break; + + default: + weather.icon = `clear-${dayOrNight}`; + weather.condition = 'Clear'; + break; + } + + return Response.json(weather); + } catch (err) { + console.error('An error occurred while getting home widgets', err); + return Response.json( + { + message: 'An error has occurred.', + }, + { + status: 500, + }, + ); + } +}; diff --git a/src/app/c/[chatId]/page.tsx b/src/app/c/[chatId]/page.tsx new file mode 100644 index 0000000..06cd823 --- /dev/null +++ b/src/app/c/[chatId]/page.tsx @@ -0,0 +1,5 @@ +'use client'; + +import ChatWindow from '@/components/ChatWindow'; + +export default ChatWindow; diff --git a/src/app/discover/page.tsx b/src/app/discover/page.tsx new file mode 100644 index 0000000..c7900c9 --- /dev/null +++ b/src/app/discover/page.tsx @@ -0,0 +1,271 @@ +'use client'; + +import { Globe2Icon } from 'lucide-react'; +import { useEffect, useState } from 'react'; +import { toast } from 'sonner'; +import { cn } from '@/lib/utils'; +import SmallNewsCard from '@/components/Discover/SmallNewsCard'; +import MajorNewsCard from '@/components/Discover/MajorNewsCard'; + +export interface Discover { + title: string; + content: string; + url: string; + thumbnail: string; +} + +const topics: { key: string; display: string }[] = [ + { + display: 'Tech & Science', + key: 'tech', + }, + { + display: 'Finance', + key: 'finance', + }, + { + display: 'Art & Culture', + key: 'art', + }, + { + display: 'Sports', + key: 'sports', + }, + { + display: 'Entertainment', + key: 'entertainment', + }, +]; + +const Page = () => { + const [discover, setDiscover] = useState(null); + const [loading, setLoading] = useState(true); + const [activeTopic, setActiveTopic] = useState(topics[0].key); + + const fetchArticles = async (topic: string) => { + setLoading(true); + try { + const res = await fetch(`/api/discover?topic=${topic}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + }); + + const data = await res.json(); + + if (!res.ok) { + throw new Error(data.message); + } + + data.blogs = data.blogs.filter((blog: Discover) => blog.thumbnail); + + setDiscover(data.blogs); + } catch (err: any) { + console.error('Error fetching data:', err.message); + toast.error('Error fetching data'); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + fetchArticles(activeTopic); + }, [activeTopic]); + + return ( + <> +
+
+
+
+ +

+ Discover +

+
+
+ {topics.map((t, i) => ( +
setActiveTopic(t.key)} + > + {t.display} +
+ ))} +
+
+
+ + {loading ? ( +
+ +
+ ) : ( +
+
+
+ {discover?.map((item, i) => ( + + ))} +
+
+ +
+ {discover && + discover.length > 0 && + (() => { + const sections = []; + let index = 0; + + while (index < discover.length) { + if (sections.length > 0) { + sections.push( +
, + ); + } + + if (index < discover.length) { + sections.push( + , + ); + index++; + } + + if (index < discover.length) { + sections.push( +
, + ); + } + + if (index < discover.length) { + const smallCards = discover.slice(index, index + 3); + sections.push( +
+ {smallCards.map((item, i) => ( + + ))} +
, + ); + index += 3; + } + + if (index < discover.length) { + sections.push( +
, + ); + } + + if (index < discover.length - 1) { + const twoMajorCards = discover.slice(index, index + 2); + twoMajorCards.forEach((item, i) => { + sections.push( + , + ); + if (i === 0) { + sections.push( +
, + ); + } + }); + index += 2; + } else if (index < discover.length) { + sections.push( + , + ); + index++; + } + + if (index < discover.length) { + sections.push( +
, + ); + } + + if (index < discover.length) { + const smallCards = discover.slice(index, index + 3); + sections.push( +
+ {smallCards.map((item, i) => ( + + ))} +
, + ); + index += 3; + } + } + + return sections; + })()} +
+
+ )} +
+ + ); +}; + +export default Page; diff --git a/src/app/favicon.ico b/src/app/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/src/app/favicon.ico differ diff --git a/src/app/globals.css b/src/app/globals.css new file mode 100644 index 0000000..3b95d06 --- /dev/null +++ b/src/app/globals.css @@ -0,0 +1,99 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@font-face { + font-family: 'PP Editorial'; + src: url('/fonts/pp-ed-ul.otf') format('opentype'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@layer base { + .overflow-hidden-scrollable { + -ms-overflow-style: none; + } + + .overflow-hidden-scrollable::-webkit-scrollbar { + display: none; + } + + * { + scrollbar-width: thin; + scrollbar-color: #e8edf1 transparent; /* light-200 */ + } + + *::-webkit-scrollbar { + width: 6px; + height: 6px; + } + + *::-webkit-scrollbar-track { + background: transparent; + } + + *::-webkit-scrollbar-thumb { + background: #e8edf1; /* light-200 */ + border-radius: 3px; + transition: background 0.2s ease; + } + + *::-webkit-scrollbar-thumb:hover { + background: #d0d7de; /* light-300 */ + } + + @media (prefers-color-scheme: dark) { + * { + scrollbar-color: #21262d transparent; /* dark-200 */ + } + + *::-webkit-scrollbar-thumb { + background: #21262d; /* dark-200 */ + } + + *::-webkit-scrollbar-thumb:hover { + background: #30363d; /* dark-300 */ + } + } + + :root.dark *, + html.dark *, + body.dark * { + scrollbar-color: #21262d transparent; /* dark-200 */ + } + + :root.dark *::-webkit-scrollbar-thumb, + html.dark *::-webkit-scrollbar-thumb, + body.dark *::-webkit-scrollbar-thumb { + background: #21262d; /* dark-200 */ + } + + :root.dark *::-webkit-scrollbar-thumb:hover, + html.dark *::-webkit-scrollbar-thumb:hover, + body.dark *::-webkit-scrollbar-thumb:hover { + background: #30363d; /* dark-300 */ + } + + html { + scroll-behavior: smooth; + } +} + +@layer utilities { + .line-clamp-2 { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; + overflow: hidden; + } +} + +@media screen and (-webkit-min-device-pixel-ratio: 0) { + select, + textarea, + input { + font-size: 16px !important; + } +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx new file mode 100644 index 0000000..535a0e0 --- /dev/null +++ b/src/app/layout.tsx @@ -0,0 +1,59 @@ +export const dynamic = 'force-dynamic'; + +import type { Metadata } from 'next'; +import { Montserrat } from 'next/font/google'; +import './globals.css'; +import { cn } from '@/lib/utils'; +import Sidebar from '@/components/Sidebar'; +import { Toaster } from 'sonner'; +import ThemeProvider from '@/components/theme/Provider'; +import configManager from '@/lib/config'; +import SetupWizard from '@/components/Setup/SetupWizard'; +import { ChatProvider } from '@/lib/hooks/useChat'; + +const montserrat = Montserrat({ + weight: ['300', '400', '500', '700'], + subsets: ['latin'], + display: 'swap', + fallback: ['Arial', 'sans-serif'], +}); + +export const metadata: Metadata = { + title: 'Perplexica - Chat with the internet', + description: + 'Perplexica is an AI powered chatbot that is connected to the internet.', +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + const setupComplete = configManager.isSetupComplete(); + const configSections = configManager.getUIConfigSections(); + + return ( + + + + {setupComplete ? ( + + {children} + + + ) : ( + + )} + + + + ); +} diff --git a/src/app/library/layout.tsx b/src/app/library/layout.tsx new file mode 100644 index 0000000..00d4a3b --- /dev/null +++ b/src/app/library/layout.tsx @@ -0,0 +1,12 @@ +import { Metadata } from 'next'; +import React from 'react'; + +export const metadata: Metadata = { + title: 'Library - Perplexica', +}; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return
{children}
; +}; + +export default Layout; diff --git a/src/app/library/page.tsx b/src/app/library/page.tsx new file mode 100644 index 0000000..3eb923e --- /dev/null +++ b/src/app/library/page.tsx @@ -0,0 +1,178 @@ +'use client'; + +import DeleteChat from '@/components/DeleteChat'; +import { formatTimeDifference } from '@/lib/utils'; +import { BookOpenText, ClockIcon, FileText, Globe2Icon } from 'lucide-react'; +import Link from 'next/link'; +import { useEffect, useState } from 'react'; + +export interface Chat { + id: string; + title: string; + createdAt: string; + sources: string[]; + files: { fileId: string; name: string }[]; +} + +const Page = () => { + const [chats, setChats] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const fetchChats = async () => { + setLoading(true); + + const res = await fetch(`/api/chats`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + }); + + const data = await res.json(); + + setChats(data.chats); + setLoading(false); + }; + + fetchChats(); + }, []); + + return ( +
+
+
+
+ +
+

+ Library +

+
+ Past chats, sources, and uploads. +
+
+
+ +
+ + + {loading + ? 'Loading…' + : `${chats.length} ${chats.length === 1 ? 'chat' : 'chats'}`} + +
+
+
+ + {loading ? ( +
+ +
+ ) : chats.length === 0 ? ( +
+
+ +
+

+ No chats found. +

+

+ + Start a new chat + {' '} + to see it listed here. +

+
+ ) : ( +
+
+ {chats.map((chat, index) => { + const sourcesLabel = + chat.sources.length === 0 + ? null + : chat.sources.length <= 2 + ? chat.sources + .map((s) => s.charAt(0).toUpperCase() + s.slice(1)) + .join(', ') + : `${chat.sources + .slice(0, 2) + .map((s) => s.charAt(0).toUpperCase() + s.slice(1)) + .join(', ')} + ${chat.sources.length - 2}`; + + return ( +
+
+ + {chat.title} + +
+ +
+
+ +
+ + + {formatTimeDifference(new Date(), chat.createdAt)} Ago + + + {sourcesLabel && ( + + + {sourcesLabel} + + )} + {chat.files.length > 0 && ( + + + {chat.files.length}{' '} + {chat.files.length === 1 ? 'file' : 'files'} + + )} +
+
+ ); + })} +
+
+ )} +
+ ); +}; + +export default Page; diff --git a/src/app/manifest.ts b/src/app/manifest.ts new file mode 100644 index 0000000..792e752 --- /dev/null +++ b/src/app/manifest.ts @@ -0,0 +1,54 @@ +import type { MetadataRoute } from 'next'; + +export default function manifest(): MetadataRoute.Manifest { + return { + name: 'Perplexica - Chat with the internet', + short_name: 'Perplexica', + description: + 'Perplexica is an AI powered chatbot that is connected to the internet.', + start_url: '/', + display: 'standalone', + background_color: '#0a0a0a', + theme_color: '#0a0a0a', + screenshots: [ + { + src: '/screenshots/p1.png', + form_factor: 'wide', + sizes: '2560x1600', + }, + { + src: '/screenshots/p2.png', + form_factor: 'wide', + sizes: '2560x1600', + }, + { + src: '/screenshots/p1_small.png', + form_factor: 'narrow', + sizes: '828x1792', + }, + { + src: '/screenshots/p2_small.png', + form_factor: 'narrow', + sizes: '828x1792', + }, + ], + icons: [ + { + src: '/icon-50.png', + sizes: '50x50', + type: 'image/png' as const, + }, + { + src: '/icon-100.png', + sizes: '100x100', + type: 'image/png', + }, + { + src: '/icon.png', + sizes: '440x440', + type: 'image/png', + purpose: 'any', + }, + ], + }; +} diff --git a/src/app/page.tsx b/src/app/page.tsx new file mode 100644 index 0000000..2f3bd36 --- /dev/null +++ b/src/app/page.tsx @@ -0,0 +1,13 @@ +import ChatWindow from '@/components/ChatWindow'; +import { Metadata } from 'next'; + +export const metadata: Metadata = { + title: 'Chat - Perplexica', + description: 'Chat with the internet, chat with Perplexica.', +}; + +const Home = () => { + return ; +}; + +export default Home; diff --git a/src/components/AssistantSteps.tsx b/src/components/AssistantSteps.tsx new file mode 100644 index 0000000..c715a92 --- /dev/null +++ b/src/components/AssistantSteps.tsx @@ -0,0 +1,266 @@ +'use client'; + +import { + Brain, + Search, + FileText, + ChevronDown, + ChevronUp, + BookSearch, +} from 'lucide-react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { useEffect, useState } from 'react'; +import { ResearchBlock, ResearchBlockSubStep } from '@/lib/types'; +import { useChat } from '@/lib/hooks/useChat'; + +const getStepIcon = (step: ResearchBlockSubStep) => { + if (step.type === 'reasoning') { + return ; + } else if (step.type === 'searching' || step.type === 'upload_searching') { + return ; + } else if ( + step.type === 'search_results' || + step.type === 'upload_search_results' + ) { + return ; + } else if (step.type === 'reading') { + return ; + } + + return null; +}; + +const getStepTitle = ( + step: ResearchBlockSubStep, + isStreaming: boolean, +): string => { + if (step.type === 'reasoning') { + return isStreaming && !step.reasoning ? 'Thinking...' : 'Thinking'; + } else if (step.type === 'searching') { + return `Searching ${step.searching.length} ${step.searching.length === 1 ? 'query' : 'queries'}`; + } else if (step.type === 'search_results') { + return `Found ${step.reading.length} ${step.reading.length === 1 ? 'result' : 'results'}`; + } else if (step.type === 'reading') { + return `Reading ${step.reading.length} ${step.reading.length === 1 ? 'source' : 'sources'}`; + } else if (step.type === 'upload_searching') { + return 'Scanning your uploaded documents'; + } else if (step.type === 'upload_search_results') { + return `Reading ${step.results.length} ${step.results.length === 1 ? 'document' : 'documents'}`; + } + + return 'Processing'; +}; + +const AssistantSteps = ({ + block, + status, + isLast, +}: { + block: ResearchBlock; + status: 'answering' | 'completed' | 'error'; + isLast: boolean; +}) => { + const [isExpanded, setIsExpanded] = useState( + isLast && status === 'answering' ? true : false, + ); + const { researchEnded, loading } = useChat(); + + useEffect(() => { + if (researchEnded && isLast) { + setIsExpanded(false); + } else if (status === 'answering' && isLast) { + setIsExpanded(true); + } + }, [researchEnded, status]); + + if (!block || block.data.subSteps.length === 0) return null; + + return ( +
+ + + + {isExpanded && ( + +
+ {block.data.subSteps.map((step, index) => { + const isLastStep = index === block.data.subSteps.length - 1; + const isStreaming = loading && isLastStep && !researchEnded; + + return ( + +
+
+ {getStepIcon(step)} +
+ {index < block.data.subSteps.length - 1 && ( +
+ )} +
+ +
+ + {getStepTitle(step, isStreaming)} + + + {step.type === 'reasoning' && ( + <> + {step.reasoning && ( +

+ {step.reasoning} +

+ )} + {isStreaming && !step.reasoning && ( +
+
+
+
+
+ )} + + )} + + {step.type === 'searching' && + step.searching.length > 0 && ( +
+ {step.searching.map((query, idx) => ( + + {query} + + ))} +
+ )} + + {(step.type === 'search_results' || + step.type === 'reading') && + step.reading.length > 0 && ( +
+ {step.reading.slice(0, 4).map((result, idx) => { + const url = result.metadata.url || ''; + const title = result.metadata.title || 'Untitled'; + const domain = url ? new URL(url).hostname : ''; + const faviconUrl = domain + ? `https://s2.googleusercontent.com/s2/favicons?domain=${domain}&sz=128` + : ''; + + return ( + + {faviconUrl && ( + { + e.currentTarget.style.display = 'none'; + }} + /> + )} + {title} + + ); + })} +
+ )} + + {step.type === 'upload_searching' && + step.queries.length > 0 && ( +
+ {step.queries.map((query, idx) => ( + + {query} + + ))} +
+ )} + + {step.type === 'upload_search_results' && + step.results.length > 0 && ( +
+ {step.results.slice(0, 4).map((result, idx) => { + const title = + (result.metadata && + (result.metadata.title || + result.metadata.fileName)) || + 'Untitled document'; + + return ( +
+
+ +
+
+

+ {title} +

+
+
+ ); + })} +
+ )} +
+ + ); + })} +
+ + )} + +
+ ); +}; + +export default AssistantSteps; diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx new file mode 100644 index 0000000..e7ef6eb --- /dev/null +++ b/src/components/Chat.tsx @@ -0,0 +1,108 @@ +'use client'; + +import { Fragment, useEffect, useRef, useState } from 'react'; +import MessageInput from './MessageInput'; +import MessageBox from './MessageBox'; +import MessageBoxLoading from './MessageBoxLoading'; +import { useChat } from '@/lib/hooks/useChat'; + +const Chat = () => { + const { sections, loading, messageAppeared, messages } = useChat(); + + const [dividerWidth, setDividerWidth] = useState(0); + const dividerRef = useRef(null); + const messageEnd = useRef(null); + const lastScrolledRef = useRef(0); + + useEffect(() => { + const updateDividerWidth = () => { + if (dividerRef.current) { + setDividerWidth(dividerRef.current.offsetWidth); + } + }; + + updateDividerWidth(); + + const resizeObserver = new ResizeObserver(() => { + updateDividerWidth(); + }); + + const currentRef = dividerRef.current; + if (currentRef) { + resizeObserver.observe(currentRef); + } + + window.addEventListener('resize', updateDividerWidth); + + return () => { + if (currentRef) { + resizeObserver.unobserve(currentRef); + } + resizeObserver.disconnect(); + window.removeEventListener('resize', updateDividerWidth); + }; + }, [sections.length]); + + useEffect(() => { + const scroll = () => { + messageEnd.current?.scrollIntoView({ behavior: 'auto' }); + }; + + if (messages.length === 1) { + document.title = `${messages[0].query.substring(0, 30)} - Perplexica`; + } + + if (sections.length > lastScrolledRef.current) { + scroll(); + lastScrolledRef.current = sections.length; + } + }, [messages]); + + return ( +
+ {sections.map((section, i) => { + const isLast = i === sections.length - 1; + + return ( + + + {!isLast && ( +
+ )} + + ); + })} + {loading && !messageAppeared && } +
+ {dividerWidth > 0 && ( +
+
+
+ +
+ )} +
+ ); +}; + +export default Chat; diff --git a/src/components/ChatWindow.tsx b/src/components/ChatWindow.tsx new file mode 100644 index 0000000..a2a9f67 --- /dev/null +++ b/src/components/ChatWindow.tsx @@ -0,0 +1,76 @@ +'use client'; + +import Navbar from './Navbar'; +import Chat from './Chat'; +import EmptyChat from './EmptyChat'; +import NextError from 'next/error'; +import { useChat } from '@/lib/hooks/useChat'; +import SettingsButtonMobile from './Settings/SettingsButtonMobile'; +import { Block } from '@/lib/types'; +import Loader from './ui/Loader'; + +export interface BaseMessage { + chatId: string; + messageId: string; + createdAt: Date; +} + +export interface Message extends BaseMessage { + backendId: string; + query: string; + responseBlocks: Block[]; + status: 'answering' | 'completed' | 'error'; +} + +export interface File { + fileName: string; + fileExtension: string; + fileId: string; +} + +export interface Widget { + widgetType: string; + params: Record; +} + +const ChatWindow = () => { + const { hasError, notFound, messages, isReady } = useChat(); + + if (hasError) { + return ( +
+
+ +
+
+

+ Failed to connect to the server. Please try again later. +

+
+
+ ); + } + + return isReady ? ( + notFound ? ( + + ) : ( +
+ {messages.length > 0 ? ( + <> + + + + ) : ( + + )} +
+ ) + ) : ( +
+ +
+ ); +}; + +export default ChatWindow; diff --git a/src/components/DeleteChat.tsx b/src/components/DeleteChat.tsx new file mode 100644 index 0000000..3acc9fc --- /dev/null +++ b/src/components/DeleteChat.tsx @@ -0,0 +1,125 @@ +import { Trash } from 'lucide-react'; +import { + Description, + Dialog, + DialogBackdrop, + DialogPanel, + DialogTitle, + Transition, + TransitionChild, +} from '@headlessui/react'; +import { Fragment, useState } from 'react'; +import { toast } from 'sonner'; +import { Chat } from '@/app/library/page'; + +const DeleteChat = ({ + chatId, + chats, + setChats, + redirect = false, +}: { + chatId: string; + chats: Chat[]; + setChats: (chats: Chat[]) => void; + redirect?: boolean; +}) => { + const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false); + const [loading, setLoading] = useState(false); + + const handleDelete = async () => { + setLoading(true); + try { + const res = await fetch(`/api/chats/${chatId}`, { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json', + }, + }); + + if (res.status != 200) { + throw new Error('Failed to delete chat'); + } + + const newChats = chats.filter((chat) => chat.id !== chatId); + + setChats(newChats); + + if (redirect) { + window.location.href = '/'; + } + } catch (err: any) { + toast.error(err.message); + } finally { + setConfirmationDialogOpen(false); + setLoading(false); + } + }; + + return ( + <> + + + { + if (!loading) { + setConfirmationDialogOpen(false); + } + }} + > + +
+
+ + + + Delete Confirmation + + + Are you sure you want to delete this chat? + +
+ + +
+ + +
+
+ + + + ); +}; + +export default DeleteChat; diff --git a/src/components/Discover/MajorNewsCard.tsx b/src/components/Discover/MajorNewsCard.tsx new file mode 100644 index 0000000..8fe4362 --- /dev/null +++ b/src/components/Discover/MajorNewsCard.tsx @@ -0,0 +1,70 @@ +import { Discover } from '@/app/discover/page'; +import Link from 'next/link'; + +const MajorNewsCard = ({ + item, + isLeft = true, +}: { + item: Discover; + isLeft?: boolean; +}) => ( + + {isLeft ? ( + <> +
+ {item.title} +
+
+

+ {item.title} +

+

+ {item.content} +

+
+ + ) : ( + <> +
+

+ {item.title} +

+

+ {item.content} +

+
+
+ {item.title} +
+ + )} + +); + +export default MajorNewsCard; diff --git a/src/components/Discover/SmallNewsCard.tsx b/src/components/Discover/SmallNewsCard.tsx new file mode 100644 index 0000000..5da80dc --- /dev/null +++ b/src/components/Discover/SmallNewsCard.tsx @@ -0,0 +1,32 @@ +import { Discover } from '@/app/discover/page'; +import Link from 'next/link'; + +const SmallNewsCard = ({ item }: { item: Discover }) => ( + +
+ {item.title} +
+
+

+ {item.title} +

+

+ {item.content} +

+
+ +); + +export default SmallNewsCard; diff --git a/src/components/EmptyChat.tsx b/src/components/EmptyChat.tsx new file mode 100644 index 0000000..775fc9d --- /dev/null +++ b/src/components/EmptyChat.tsx @@ -0,0 +1,75 @@ +'use client'; + +import { useEffect, useState } from 'react'; +import { Settings } from 'lucide-react'; +import EmptyChatMessageInput from './EmptyChatMessageInput'; +import { File } from './ChatWindow'; +import Link from 'next/link'; +import WeatherWidget from './WeatherWidget'; +import NewsArticleWidget from './NewsArticleWidget'; +import SettingsButtonMobile from '@/components/Settings/SettingsButtonMobile'; +import { + getShowNewsWidget, + getShowWeatherWidget, +} from '@/lib/config/clientRegistry'; + +const EmptyChat = () => { + const [showWeather, setShowWeather] = useState(() => + typeof window !== 'undefined' ? getShowWeatherWidget() : true, + ); + const [showNews, setShowNews] = useState(() => + typeof window !== 'undefined' ? getShowNewsWidget() : true, + ); + + useEffect(() => { + const updateWidgetVisibility = () => { + setShowWeather(getShowWeatherWidget()); + setShowNews(getShowNewsWidget()); + }; + + updateWidgetVisibility(); + + window.addEventListener('client-config-changed', updateWidgetVisibility); + window.addEventListener('storage', updateWidgetVisibility); + + return () => { + window.removeEventListener( + 'client-config-changed', + updateWidgetVisibility, + ); + window.removeEventListener('storage', updateWidgetVisibility); + }; + }, []); + + return ( +
+
+ +
+
+
+

+ Research begins here. +

+ +
+ {(showWeather || showNews) && ( +
+ {showWeather && ( +
+ +
+ )} + {showNews && ( +
+ +
+ )} +
+ )} +
+
+ ); +}; + +export default EmptyChat; diff --git a/src/components/EmptyChatMessageInput.tsx b/src/components/EmptyChatMessageInput.tsx new file mode 100644 index 0000000..6d159f9 --- /dev/null +++ b/src/components/EmptyChatMessageInput.tsx @@ -0,0 +1,88 @@ +import { ArrowRight } from 'lucide-react'; +import { useEffect, useRef, useState } from 'react'; +import TextareaAutosize from 'react-textarea-autosize'; +import Sources from './MessageInputActions/Sources'; +import Optimization from './MessageInputActions/Optimization'; +import Attach from './MessageInputActions/Attach'; +import { useChat } from '@/lib/hooks/useChat'; +import ModelSelector from './MessageInputActions/ChatModelSelector'; + +const EmptyChatMessageInput = () => { + const { sendMessage } = useChat(); + + /* const [copilotEnabled, setCopilotEnabled] = useState(false); */ + const [message, setMessage] = useState(''); + + const inputRef = useRef(null); + + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + const activeElement = document.activeElement; + + const isInputFocused = + activeElement?.tagName === 'INPUT' || + activeElement?.tagName === 'TEXTAREA' || + activeElement?.hasAttribute('contenteditable'); + + if (e.key === '/' && !isInputFocused) { + e.preventDefault(); + inputRef.current?.focus(); + } + }; + + document.addEventListener('keydown', handleKeyDown); + + inputRef.current?.focus(); + + return () => { + document.removeEventListener('keydown', handleKeyDown); + }; + }, []); + + return ( +
{ + e.preventDefault(); + sendMessage(message); + setMessage(''); + }} + onKeyDown={(e) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + sendMessage(message); + setMessage(''); + } + }} + className="w-full" + > +
+ setMessage(e.target.value)} + minRows={2} + className="px-2 bg-transparent placeholder:text-[15px] placeholder:text-black/50 dark:placeholder:text-white/50 text-sm text-black dark:text-white resize-none focus:outline-none w-full max-h-24 lg:max-h-36 xl:max-h-48" + placeholder="Ask anything..." + /> +
+ +
+
+ + + +
+ +
+
+
+
+ ); +}; + +export default EmptyChatMessageInput; diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx new file mode 100644 index 0000000..00f0fff --- /dev/null +++ b/src/components/Layout.tsx @@ -0,0 +1,9 @@ +const Layout = ({ children }: { children: React.ReactNode }) => { + return ( +
+
{children}
+
+ ); +}; + +export default Layout; diff --git a/src/components/MessageActions/Copy.tsx b/src/components/MessageActions/Copy.tsx new file mode 100644 index 0000000..7a3d518 --- /dev/null +++ b/src/components/MessageActions/Copy.tsx @@ -0,0 +1,48 @@ +import { Check, ClipboardList } from 'lucide-react'; +import { Message } from '../ChatWindow'; +import { useState } from 'react'; +import { Section } from '@/lib/hooks/useChat'; +import { SourceBlock } from '@/lib/types'; + +const Copy = ({ + section, + initialMessage, +}: { + section: Section; + initialMessage: string; +}) => { + const [copied, setCopied] = useState(false); + + return ( + + ); +}; + +export default Copy; diff --git a/src/components/MessageActions/Rewrite.tsx b/src/components/MessageActions/Rewrite.tsx new file mode 100644 index 0000000..3902e1e --- /dev/null +++ b/src/components/MessageActions/Rewrite.tsx @@ -0,0 +1,20 @@ +import { ArrowLeftRight, Repeat } from 'lucide-react'; + +const Rewrite = ({ + rewrite, + messageId, +}: { + rewrite: (messageId: string) => void; + messageId: string; +}) => { + return ( + + ); +}; +1; +export default Rewrite; diff --git a/src/components/MessageBox.tsx b/src/components/MessageBox.tsx new file mode 100644 index 0000000..dd60dec --- /dev/null +++ b/src/components/MessageBox.tsx @@ -0,0 +1,290 @@ +'use client'; + +/* eslint-disable @next/next/no-img-element */ +import React, { MutableRefObject } from 'react'; +import { cn } from '@/lib/utils'; +import { + BookCopy, + Disc3, + Volume2, + StopCircle, + Layers3, + Plus, + CornerDownRight, +} from 'lucide-react'; +import Markdown, { MarkdownToJSX, RuleType } from 'markdown-to-jsx'; +import Copy from './MessageActions/Copy'; +import Rewrite from './MessageActions/Rewrite'; +import MessageSources from './MessageSources'; +import SearchImages from './SearchImages'; +import SearchVideos from './SearchVideos'; +import { useSpeech } from 'react-text-to-speech'; +import ThinkBox from './ThinkBox'; +import { useChat, Section } from '@/lib/hooks/useChat'; +import Citation from './MessageRenderer/Citation'; +import AssistantSteps from './AssistantSteps'; +import { ResearchBlock } from '@/lib/types'; +import Renderer from './Widgets/Renderer'; +import CodeBlock from './MessageRenderer/CodeBlock'; + +const ThinkTagProcessor = ({ + children, + thinkingEnded, +}: { + children: React.ReactNode; + thinkingEnded: boolean; +}) => { + return ( + + ); +}; + +const MessageBox = ({ + section, + sectionIndex, + dividerRef, + isLast, +}: { + section: Section; + sectionIndex: number; + dividerRef?: MutableRefObject; + isLast: boolean; +}) => { + const { + loading, + sendMessage, + rewrite, + messages, + researchEnded, + chatHistory, + } = useChat(); + + const parsedMessage = section.parsedTextBlocks.join('\n\n'); + const speechMessage = section.speechMessage || ''; + const thinkingEnded = section.thinkingEnded; + + const sourceBlocks = section.message.responseBlocks.filter( + (block): block is typeof block & { type: 'source' } => + block.type === 'source', + ); + + const sources = sourceBlocks.flatMap((block) => block.data); + + const hasContent = section.parsedTextBlocks.length > 0; + + const { speechStatus, start, stop } = useSpeech({ text: speechMessage }); + + const markdownOverrides: MarkdownToJSX.Options = { + renderRule(next, node, renderChildren, state) { + if (node.type === RuleType.codeInline) { + return `\`${node.text}\``; + } + + if (node.type === RuleType.codeBlock) { + return ( + + {node.text} + + ); + } + + return next(); + }, + overrides: { + think: { + component: ThinkTagProcessor, + props: { + thinkingEnded: thinkingEnded, + }, + }, + citation: { + component: Citation, + }, + }, + }; + + return ( +
+
+

+ {section.message.query} +

+
+ +
+
+ {sources.length > 0 && ( +
+
+ +

+ Sources +

+
+ +
+ )} + + {section.message.responseBlocks + .filter( + (block): block is ResearchBlock => + block.type === 'research' && block.data.subSteps.length > 0, + ) + .map((researchBlock) => ( +
+ +
+ ))} + + {isLast && + loading && + !researchEnded && + !section.message.responseBlocks.some( + (b) => b.type === 'research' && b.data.subSteps.length > 0, + ) && ( +
+ + + Brainstorming... + +
+ )} + + {section.widgets.length > 0 && } + +
+ {sources.length > 0 && ( +
+ +

+ Answer +

+
+ )} + + {hasContent && ( + <> + + {parsedMessage} + + + {loading && isLast ? null : ( +
+
+ +
+
+ + +
+
+ )} + + {isLast && + section.suggestions && + section.suggestions.length > 0 && + hasContent && + !loading && ( +
+
+ +

+ Related +

+
+
+ {section.suggestions.map( + (suggestion: string, i: number) => ( +
+
+ +
+ ), + )} +
+
+ )} + + )} +
+
+ + {hasContent && ( +
+ + +
+ )} +
+
+ ); +}; + +export default MessageBox; diff --git a/src/components/MessageBoxLoading.tsx b/src/components/MessageBoxLoading.tsx new file mode 100644 index 0000000..3c53d9e --- /dev/null +++ b/src/components/MessageBoxLoading.tsx @@ -0,0 +1,11 @@ +const MessageBoxLoading = () => { + return ( +
+
+
+
+
+ ); +}; + +export default MessageBoxLoading; diff --git a/src/components/MessageInput.tsx b/src/components/MessageInput.tsx new file mode 100644 index 0000000..56054eb --- /dev/null +++ b/src/components/MessageInput.tsx @@ -0,0 +1,102 @@ +import { cn } from '@/lib/utils'; +import { ArrowUp } from 'lucide-react'; +import { useEffect, useRef, useState } from 'react'; +import TextareaAutosize from 'react-textarea-autosize'; +import AttachSmall from './MessageInputActions/AttachSmall'; +import { useChat } from '@/lib/hooks/useChat'; + +const MessageInput = () => { + const { loading, sendMessage } = useChat(); + + const [copilotEnabled, setCopilotEnabled] = useState(false); + const [message, setMessage] = useState(''); + const [textareaRows, setTextareaRows] = useState(1); + const [mode, setMode] = useState<'multi' | 'single'>('single'); + + useEffect(() => { + if (textareaRows >= 2 && message && mode === 'single') { + setMode('multi'); + } else if (!message && mode === 'multi') { + setMode('single'); + } + }, [textareaRows, mode, message]); + + const inputRef = useRef(null); + + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + const activeElement = document.activeElement; + + const isInputFocused = + activeElement?.tagName === 'INPUT' || + activeElement?.tagName === 'TEXTAREA' || + activeElement?.hasAttribute('contenteditable'); + + if (e.key === '/' && !isInputFocused) { + e.preventDefault(); + inputRef.current?.focus(); + } + }; + + document.addEventListener('keydown', handleKeyDown); + + return () => { + document.removeEventListener('keydown', handleKeyDown); + }; + }, []); + + return ( +
{ + if (loading) return; + e.preventDefault(); + sendMessage(message); + setMessage(''); + }} + onKeyDown={(e) => { + if (e.key === 'Enter' && !e.shiftKey && !loading) { + e.preventDefault(); + sendMessage(message); + setMessage(''); + } + }} + className={cn( + 'relative bg-light-secondary dark:bg-dark-secondary p-4 flex items-center overflow-visible border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/20 transition-all duration-200 focus-within:border-light-300 dark:focus-within:border-dark-300', + mode === 'multi' ? 'flex-col rounded-2xl' : 'flex-row rounded-full', + )} + > + {mode === 'single' && } + setMessage(e.target.value)} + onHeightChange={(height, props) => { + setTextareaRows(Math.ceil(height / props.rowHeight)); + }} + className="transition bg-transparent dark:placeholder:text-white/50 placeholder:text-sm text-sm dark:text-white resize-none focus:outline-none w-full px-2 max-h-24 lg:max-h-36 xl:max-h-48 flex-grow flex-shrink" + placeholder="Ask a follow-up" + /> + {mode === 'single' && ( + + )} + {mode === 'multi' && ( +
+ + +
+ )} + + ); +}; + +export default MessageInput; diff --git a/src/components/MessageInputActions/Attach.tsx b/src/components/MessageInputActions/Attach.tsx new file mode 100644 index 0000000..84d7152 --- /dev/null +++ b/src/components/MessageInputActions/Attach.tsx @@ -0,0 +1,169 @@ +import { cn } from '@/lib/utils'; +import { + Popover, + PopoverButton, + PopoverPanel, + Transition, +} from '@headlessui/react'; +import { + CopyPlus, + File, + Link, + LoaderCircle, + Paperclip, + Plus, + Trash, +} from 'lucide-react'; +import { Fragment, useRef, useState } from 'react'; +import { useChat } from '@/lib/hooks/useChat'; +import { AnimatePresence } from 'motion/react'; +import { motion } from 'framer-motion'; + +const Attach = () => { + const { files, setFiles, setFileIds, fileIds } = useChat(); + + const [loading, setLoading] = useState(false); + const fileInputRef = useRef(); + + const handleChange = async (e: React.ChangeEvent) => { + setLoading(true); + const data = new FormData(); + + for (let i = 0; i < e.target.files!.length; i++) { + data.append('files', e.target.files![i]); + } + + const embeddingModelProvider = localStorage.getItem( + 'embeddingModelProviderId', + ); + const embeddingModel = localStorage.getItem('embeddingModelKey'); + + data.append('embedding_model_provider_id', embeddingModelProvider!); + data.append('embedding_model_key', embeddingModel!); + + const res = await fetch(`/api/uploads`, { + method: 'POST', + body: data, + }); + + const resData = await res.json(); + + setFiles([...files, ...resData.files]); + setFileIds([...fileIds, ...resData.files.map((file: any) => file.fileId)]); + setLoading(false); + }; + + return loading ? ( +
+ +
+ ) : files.length > 0 ? ( + + {({ open }) => ( + <> + + + + + {open && ( + + +
+

+ Attached files +

+
+ + +
+
+
+
+ {files.map((file, i) => ( +
+
+ +
+

+ {file.fileName.length > 25 + ? file.fileName + .replace(/\.\w+$/, '') + .substring(0, 25) + + '...' + + file.fileExtension + : file.fileName} +

+
+ ))} +
+ + + )} + + + )} + + ) : ( + + ); +}; + +export default Attach; diff --git a/src/components/MessageInputActions/AttachSmall.tsx b/src/components/MessageInputActions/AttachSmall.tsx new file mode 100644 index 0000000..828ac79 --- /dev/null +++ b/src/components/MessageInputActions/AttachSmall.tsx @@ -0,0 +1,158 @@ +import { + Popover, + PopoverButton, + PopoverPanel, + Transition, +} from '@headlessui/react'; +import { File, LoaderCircle, Paperclip, Plus, Trash } from 'lucide-react'; +import { Fragment, useRef, useState } from 'react'; +import { useChat } from '@/lib/hooks/useChat'; +import { AnimatePresence } from 'motion/react'; +import { motion } from 'framer-motion'; + +const AttachSmall = () => { + const { files, setFiles, setFileIds, fileIds } = useChat(); + + const [loading, setLoading] = useState(false); + const fileInputRef = useRef(); + + const handleChange = async (e: React.ChangeEvent) => { + setLoading(true); + const data = new FormData(); + + for (let i = 0; i < e.target.files!.length; i++) { + data.append('files', e.target.files![i]); + } + + const embeddingModelProvider = localStorage.getItem( + 'embeddingModelProviderId', + ); + const embeddingModel = localStorage.getItem('embeddingModelKey'); + + data.append('embedding_model_provider_id', embeddingModelProvider!); + data.append('embedding_model_key', embeddingModel!); + + const res = await fetch(`/api/uploads`, { + method: 'POST', + body: data, + }); + + const resData = await res.json(); + + setFiles([...files, ...resData.files]); + setFileIds([...fileIds, ...resData.files.map((file: any) => file.fileId)]); + setLoading(false); + }; + + return loading ? ( +
+ +
+ ) : files.length > 0 ? ( + + {({ open }) => ( + <> + + + + + {open && ( + + +
+

+ Attached files +

+
+ + +
+
+
+
+ {files.map((file, i) => ( +
+
+ +
+

+ {file.fileName.length > 25 + ? file.fileName + .replace(/\.\w+$/, '') + .substring(0, 25) + + '...' + + file.fileExtension + : file.fileName} +

+
+ ))} +
+ + + )} + + + )} + + ) : ( + + ); +}; + +export default AttachSmall; diff --git a/src/components/MessageInputActions/ChatModelSelector.tsx b/src/components/MessageInputActions/ChatModelSelector.tsx new file mode 100644 index 0000000..4d75166 --- /dev/null +++ b/src/components/MessageInputActions/ChatModelSelector.tsx @@ -0,0 +1,203 @@ +'use client'; + +import { Cpu, Loader2, Search } from 'lucide-react'; +import { cn } from '@/lib/utils'; +import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'; +import { useEffect, useMemo, useState } from 'react'; +import { MinimalProvider } from '@/lib/models/types'; +import { useChat } from '@/lib/hooks/useChat'; +import { AnimatePresence, motion } from 'motion/react'; + +const ModelSelector = () => { + const [providers, setProviders] = useState([]); + const [isLoading, setIsLoading] = useState(true); + const [searchQuery, setSearchQuery] = useState(''); + + const { setChatModelProvider, chatModelProvider } = useChat(); + + useEffect(() => { + const loadProviders = async () => { + try { + setIsLoading(true); + const res = await fetch('/api/providers'); + + if (!res.ok) { + throw new Error('Failed to fetch providers'); + } + + const data: { providers: MinimalProvider[] } = await res.json(); + setProviders(data.providers); + } catch (error) { + console.error('Error loading providers:', error); + } finally { + setIsLoading(false); + } + }; + + loadProviders(); + }, []); + + const orderedProviders = useMemo(() => { + if (!chatModelProvider?.providerId) return providers; + + const currentProviderIndex = providers.findIndex( + (p) => p.id === chatModelProvider.providerId, + ); + + if (currentProviderIndex === -1) { + return providers; + } + + const selectedProvider = providers[currentProviderIndex]; + const remainingProviders = providers.filter( + (_, index) => index !== currentProviderIndex, + ); + + return [selectedProvider, ...remainingProviders]; + }, [providers, chatModelProvider]); + + const handleModelSelect = (providerId: string, modelKey: string) => { + setChatModelProvider({ providerId, key: modelKey }); + localStorage.setItem('chatModelProviderId', providerId); + localStorage.setItem('chatModelKey', modelKey); + }; + + const filteredProviders = orderedProviders + .map((provider) => ({ + ...provider, + chatModels: provider.chatModels.filter( + (model) => + model.name.toLowerCase().includes(searchQuery.toLowerCase()) || + provider.name.toLowerCase().includes(searchQuery.toLowerCase()), + ), + })) + .filter((provider) => provider.chatModels.length > 0); + + return ( + + {({ open }) => ( + <> + + + + + {open && ( + + +
+
+ + setSearchQuery(e.target.value)} + className="w-full pl-8 pr-3 py-2 bg-light-secondary dark:bg-dark-secondary rounded-lg placeholder:text-xs placeholder:-translate-y-[1.5px] text-xs text-black dark:text-white placeholder:text-black/40 dark:placeholder:text-white/40 focus:outline-none border border-transparent transition duration-200" + /> +
+
+ +
+ {isLoading ? ( +
+ +
+ ) : filteredProviders.length === 0 ? ( +
+ {searchQuery + ? 'No models found' + : 'No chat models configured'} +
+ ) : ( +
+ {filteredProviders.map((provider, providerIndex) => ( +
+
+

+ {provider.name} +

+
+ +
+ {provider.chatModels.map((model) => ( + + ))} +
+ + {providerIndex < filteredProviders.length - 1 && ( +
+ )} +
+ ))} +
+ )} +
+ + + )} + + + )} + + ); +}; + +export default ModelSelector; diff --git a/src/components/MessageInputActions/Optimization.tsx b/src/components/MessageInputActions/Optimization.tsx new file mode 100644 index 0000000..2f0cd82 --- /dev/null +++ b/src/components/MessageInputActions/Optimization.tsx @@ -0,0 +1,114 @@ +import { ChevronDown, Sliders, Star, Zap } from 'lucide-react'; +import { cn } from '@/lib/utils'; +import { + Popover, + PopoverButton, + PopoverPanel, + Transition, +} from '@headlessui/react'; +import { Fragment } from 'react'; +import { useChat } from '@/lib/hooks/useChat'; +import { AnimatePresence, motion } from 'motion/react'; + +const OptimizationModes = [ + { + key: 'speed', + title: 'Speed', + description: 'Prioritize speed and get the quickest possible answer.', + icon: , + }, + { + key: 'balanced', + title: 'Balanced', + description: 'Find the right balance between speed and accuracy', + icon: , + }, + { + key: 'quality', + title: 'Quality', + description: 'Get the most thorough and accurate answer', + icon: ( + + ), + }, +]; + +const Optimization = () => { + const { optimizationMode, setOptimizationMode } = useChat(); + + return ( + + {({ open }) => ( + <> + +
+ { + OptimizationModes.find((mode) => mode.key === optimizationMode) + ?.icon + } + +
+ + + {open && ( + + + {OptimizationModes.map((mode, i) => ( + setOptimizationMode(mode.key)} + key={i} + className={cn( + 'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-1 duration-200 cursor-pointer transition focus:outline-none', + optimizationMode === mode.key + ? 'bg-light-secondary dark:bg-dark-secondary' + : 'hover:bg-light-secondary dark:hover:bg-dark-secondary', + )} + > +
+
+ {mode.icon} +

{mode.title}

+
+ {mode.key === 'quality' && ( + + Beta + + )} +
+

+ {mode.description} +

+ + ))} + + + )} + + + )} + + ); +}; + +export default Optimization; diff --git a/src/components/MessageInputActions/Sources.tsx b/src/components/MessageInputActions/Sources.tsx new file mode 100644 index 0000000..2652d58 --- /dev/null +++ b/src/components/MessageInputActions/Sources.tsx @@ -0,0 +1,93 @@ +import { useChat } from '@/lib/hooks/useChat'; +import { + Popover, + PopoverButton, + PopoverPanel, + Switch, +} from '@headlessui/react'; +import { + GlobeIcon, + GraduationCapIcon, + NetworkIcon, +} from '@phosphor-icons/react'; +import { AnimatePresence, motion } from 'motion/react'; + +const sourcesList = [ + { + name: 'Web', + key: 'web', + icon: , + }, + { + name: 'Academic', + key: 'academic', + icon: , + }, + { + name: 'Social', + key: 'discussions', + icon: , + }, +]; + +const Sources = () => { + const { sources, setSources } = useChat(); + + return ( + + {({ open }) => ( + <> + + + + + {open && ( + + + {sourcesList.map((source, i) => ( +
{ + if (!sources.includes(source.key)) { + setSources([...sources, source.key]); + } else { + setSources(sources.filter((s) => s !== source.key)); + } + }} + > +
+ {source.icon} +

{source.name}

+
+ + +
+ ))} + + + )} + + + )} + + ); +}; + +export default Sources; diff --git a/src/components/MessageRenderer/Citation.tsx b/src/components/MessageRenderer/Citation.tsx new file mode 100644 index 0000000..25cc064 --- /dev/null +++ b/src/components/MessageRenderer/Citation.tsx @@ -0,0 +1,19 @@ +const Citation = ({ + href, + children, +}: { + href: string; + children: React.ReactNode; +}) => { + return ( + + {children} + + ); +}; + +export default Citation; diff --git a/src/components/MessageRenderer/CodeBlock/CodeBlockDarkTheme.ts b/src/components/MessageRenderer/CodeBlock/CodeBlockDarkTheme.ts new file mode 100644 index 0000000..0a9d6a4 --- /dev/null +++ b/src/components/MessageRenderer/CodeBlock/CodeBlockDarkTheme.ts @@ -0,0 +1,102 @@ +import type { CSSProperties } from 'react'; + +const darkTheme = { + 'hljs-comment': { + color: '#8b949e', + }, + 'hljs-quote': { + color: '#8b949e', + }, + 'hljs-variable': { + color: '#ff7b72', + }, + 'hljs-template-variable': { + color: '#ff7b72', + }, + 'hljs-tag': { + color: '#ff7b72', + }, + 'hljs-name': { + color: '#ff7b72', + }, + 'hljs-selector-id': { + color: '#ff7b72', + }, + 'hljs-selector-class': { + color: '#ff7b72', + }, + 'hljs-regexp': { + color: '#ff7b72', + }, + 'hljs-deletion': { + color: '#ff7b72', + }, + 'hljs-number': { + color: '#f2cc60', + }, + 'hljs-built_in': { + color: '#f2cc60', + }, + 'hljs-builtin-name': { + color: '#f2cc60', + }, + 'hljs-literal': { + color: '#f2cc60', + }, + 'hljs-type': { + color: '#f2cc60', + }, + 'hljs-params': { + color: '#f2cc60', + }, + 'hljs-meta': { + color: '#f2cc60', + }, + 'hljs-link': { + color: '#f2cc60', + }, + 'hljs-attribute': { + color: '#58a6ff', + }, + 'hljs-string': { + color: '#7ee787', + }, + 'hljs-symbol': { + color: '#7ee787', + }, + 'hljs-bullet': { + color: '#7ee787', + }, + 'hljs-addition': { + color: '#7ee787', + }, + 'hljs-title': { + color: '#79c0ff', + }, + 'hljs-section': { + color: '#79c0ff', + }, + 'hljs-keyword': { + color: '#c297ff', + }, + 'hljs-selector-tag': { + color: '#c297ff', + }, + hljs: { + display: 'block', + overflowX: 'auto', + background: '#0d1117', + color: '#c9d1d9', + padding: '0.75em', + border: '1px solid #21262d', + borderRadius: '10px', + }, + 'hljs-emphasis': { + fontStyle: 'italic', + }, + 'hljs-strong': { + fontWeight: 'bold', + }, +} satisfies Record; + +export default darkTheme; diff --git a/src/components/MessageRenderer/CodeBlock/CodeBlockLightTheme.ts b/src/components/MessageRenderer/CodeBlock/CodeBlockLightTheme.ts new file mode 100644 index 0000000..758dbac --- /dev/null +++ b/src/components/MessageRenderer/CodeBlock/CodeBlockLightTheme.ts @@ -0,0 +1,102 @@ +import type { CSSProperties } from 'react'; + +const lightTheme = { + 'hljs-comment': { + color: '#6e7781', + }, + 'hljs-quote': { + color: '#6e7781', + }, + 'hljs-variable': { + color: '#d73a49', + }, + 'hljs-template-variable': { + color: '#d73a49', + }, + 'hljs-tag': { + color: '#d73a49', + }, + 'hljs-name': { + color: '#d73a49', + }, + 'hljs-selector-id': { + color: '#d73a49', + }, + 'hljs-selector-class': { + color: '#d73a49', + }, + 'hljs-regexp': { + color: '#d73a49', + }, + 'hljs-deletion': { + color: '#d73a49', + }, + 'hljs-number': { + color: '#b08800', + }, + 'hljs-built_in': { + color: '#b08800', + }, + 'hljs-builtin-name': { + color: '#b08800', + }, + 'hljs-literal': { + color: '#b08800', + }, + 'hljs-type': { + color: '#b08800', + }, + 'hljs-params': { + color: '#b08800', + }, + 'hljs-meta': { + color: '#b08800', + }, + 'hljs-link': { + color: '#b08800', + }, + 'hljs-attribute': { + color: '#0a64ae', + }, + 'hljs-string': { + color: '#22863a', + }, + 'hljs-symbol': { + color: '#22863a', + }, + 'hljs-bullet': { + color: '#22863a', + }, + 'hljs-addition': { + color: '#22863a', + }, + 'hljs-title': { + color: '#005cc5', + }, + 'hljs-section': { + color: '#005cc5', + }, + 'hljs-keyword': { + color: '#6f42c1', + }, + 'hljs-selector-tag': { + color: '#6f42c1', + }, + hljs: { + display: 'block', + overflowX: 'auto', + background: '#ffffff', + color: '#24292f', + padding: '0.75em', + border: '1px solid #e8edf1', + borderRadius: '10px', + }, + 'hljs-emphasis': { + fontStyle: 'italic', + }, + 'hljs-strong': { + fontWeight: 'bold', + }, +} satisfies Record; + +export default lightTheme; diff --git a/src/components/MessageRenderer/CodeBlock/index.tsx b/src/components/MessageRenderer/CodeBlock/index.tsx new file mode 100644 index 0000000..493a0d0 --- /dev/null +++ b/src/components/MessageRenderer/CodeBlock/index.tsx @@ -0,0 +1,64 @@ +'use client'; + +import { CheckIcon, CopyIcon } from '@phosphor-icons/react'; +import React, { useEffect, useMemo, useState } from 'react'; +import { useTheme } from 'next-themes'; +import SyntaxHighlighter from 'react-syntax-highlighter'; +import darkTheme from './CodeBlockDarkTheme'; +import lightTheme from './CodeBlockLightTheme'; + +const CodeBlock = ({ + language, + children, +}: { + language: string; + children: React.ReactNode; +}) => { + const { resolvedTheme } = useTheme(); + const [mounted, setMounted] = useState(false); + + const [copied, setCopied] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + const syntaxTheme = useMemo(() => { + if (!mounted) return lightTheme; + return resolvedTheme === 'dark' ? darkTheme : lightTheme; + }, [mounted, resolvedTheme]); + + return ( +
+ + + {children as string} + +
+ ); +}; + +export default CodeBlock; diff --git a/src/components/MessageSources.tsx b/src/components/MessageSources.tsx new file mode 100644 index 0000000..a1db27a --- /dev/null +++ b/src/components/MessageSources.tsx @@ -0,0 +1,165 @@ +/* eslint-disable @next/next/no-img-element */ +import { + Dialog, + DialogPanel, + DialogTitle, + Transition, + TransitionChild, +} from '@headlessui/react'; +import { File } from 'lucide-react'; +import { Fragment, useState } from 'react'; +import { Chunk } from '@/lib/types'; + +const MessageSources = ({ sources }: { sources: Chunk[] }) => { + const [isDialogOpen, setIsDialogOpen] = useState(false); + + const closeModal = () => { + setIsDialogOpen(false); + document.body.classList.remove('overflow-hidden-scrollable'); + }; + + const openModal = () => { + setIsDialogOpen(true); + document.body.classList.add('overflow-hidden-scrollable'); + }; + + return ( +
+ {sources.slice(0, 3).map((source, i) => ( + +

+ {source.metadata.title} +

+
+
+ {source.metadata.url.includes('file_id://') ? ( +
+ +
+ ) : ( + favicon + )} +

+ {source.metadata.url.includes('file_id://') + ? 'Uploaded File' + : source.metadata.url.replace(/.+\/\/|www.|\..+/g, '')} +

+
+
+
+ {i + 1} +
+
+ + ))} + {sources.length > 3 && ( + + )} + + + + +
+ ); +}; + +export default MessageSources; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx new file mode 100644 index 0000000..6d3e77c --- /dev/null +++ b/src/components/Navbar.tsx @@ -0,0 +1,327 @@ +import { Clock, Edit, Share, Trash, FileText, FileDown } from 'lucide-react'; +import { Message } from './ChatWindow'; +import { useEffect, useState, Fragment } from 'react'; +import { formatTimeDifference } from '@/lib/utils'; +import DeleteChat from './DeleteChat'; +import { + Popover, + PopoverButton, + PopoverPanel, + Transition, +} from '@headlessui/react'; +import jsPDF from 'jspdf'; +import { useChat, Section } from '@/lib/hooks/useChat'; +import { SourceBlock } from '@/lib/types'; + +const downloadFile = (filename: string, content: string, type: string) => { + const blob = new Blob([content], { type }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = filename; + document.body.appendChild(a); + a.click(); + setTimeout(() => { + document.body.removeChild(a); + URL.revokeObjectURL(url); + }, 0); +}; + +const exportAsMarkdown = (sections: Section[], title: string) => { + const date = new Date( + sections[0].message.createdAt || Date.now(), + ).toLocaleString(); + let md = `# πŸ’¬ Chat Export: ${title}\n\n`; + md += `*Exported on: ${date}*\n\n---\n`; + + sections.forEach((section, idx) => { + md += `\n---\n`; + md += `**πŸ§‘ User** +`; + md += `*${new Date(section.message.createdAt).toLocaleString()}*\n\n`; + md += `> ${section.message.query.replace(/\n/g, '\n> ')}\n`; + + if (section.message.responseBlocks.length > 0) { + md += `\n---\n`; + md += `**πŸ€– Assistant** +`; + md += `*${new Date(section.message.createdAt).toLocaleString()}*\n\n`; + md += `> ${section.message.responseBlocks + .filter((b) => b.type === 'text') + .map((block) => block.data) + .join('\n') + .replace(/\n/g, '\n> ')}\n`; + } + + const sourceResponseBlock = section.message.responseBlocks.find( + (block) => block.type === 'source', + ) as SourceBlock | undefined; + + if ( + sourceResponseBlock && + sourceResponseBlock.data && + sourceResponseBlock.data.length > 0 + ) { + md += `\n**Citations:**\n`; + sourceResponseBlock.data.forEach((src: any, i: number) => { + const url = src.metadata?.url || ''; + md += `- [${i + 1}] [${url}](${url})\n`; + }); + } + }); + md += '\n---\n'; + downloadFile(`${title || 'chat'}.md`, md, 'text/markdown'); +}; + +const exportAsPDF = (sections: Section[], title: string) => { + const doc = new jsPDF(); + const date = new Date( + sections[0]?.message?.createdAt || Date.now(), + ).toLocaleString(); + let y = 15; + const pageHeight = doc.internal.pageSize.height; + doc.setFontSize(18); + doc.text(`Chat Export: ${title}`, 10, y); + y += 8; + doc.setFontSize(11); + doc.setTextColor(100); + doc.text(`Exported on: ${date}`, 10, y); + y += 8; + doc.setDrawColor(200); + doc.line(10, y, 200, y); + y += 6; + doc.setTextColor(30); + + sections.forEach((section, idx) => { + if (y > pageHeight - 30) { + doc.addPage(); + y = 15; + } + doc.setFont('helvetica', 'bold'); + doc.text('User', 10, y); + doc.setFont('helvetica', 'normal'); + doc.setFontSize(10); + doc.setTextColor(120); + doc.text(`${new Date(section.message.createdAt).toLocaleString()}`, 40, y); + y += 6; + doc.setTextColor(30); + doc.setFontSize(12); + const userLines = doc.splitTextToSize(section.message.query, 180); + for (let i = 0; i < userLines.length; i++) { + if (y > pageHeight - 20) { + doc.addPage(); + y = 15; + } + doc.text(userLines[i], 12, y); + y += 6; + } + y += 6; + doc.setDrawColor(230); + if (y > pageHeight - 10) { + doc.addPage(); + y = 15; + } + doc.line(10, y, 200, y); + y += 4; + + if (section.message.responseBlocks.length > 0) { + if (y > pageHeight - 30) { + doc.addPage(); + y = 15; + } + doc.setFont('helvetica', 'bold'); + doc.text('Assistant', 10, y); + doc.setFont('helvetica', 'normal'); + doc.setFontSize(10); + doc.setTextColor(120); + doc.text( + `${new Date(section.message.createdAt).toLocaleString()}`, + 40, + y, + ); + y += 6; + doc.setTextColor(30); + doc.setFontSize(12); + const assistantLines = doc.splitTextToSize( + section.parsedTextBlocks.join('\n'), + 180, + ); + for (let i = 0; i < assistantLines.length; i++) { + if (y > pageHeight - 20) { + doc.addPage(); + y = 15; + } + doc.text(assistantLines[i], 12, y); + y += 6; + } + + const sourceResponseBlock = section.message.responseBlocks.find( + (block) => block.type === 'source', + ) as SourceBlock | undefined; + + if ( + sourceResponseBlock && + sourceResponseBlock.data && + sourceResponseBlock.data.length > 0 + ) { + doc.setFontSize(11); + doc.setTextColor(80); + if (y > pageHeight - 20) { + doc.addPage(); + y = 15; + } + doc.text('Citations:', 12, y); + y += 5; + sourceResponseBlock.data.forEach((src: any, i: number) => { + const url = src.metadata?.url || ''; + if (y > pageHeight - 15) { + doc.addPage(); + y = 15; + } + doc.text(`- [${i + 1}] ${url}`, 15, y); + y += 5; + }); + doc.setTextColor(30); + } + y += 6; + doc.setDrawColor(230); + if (y > pageHeight - 10) { + doc.addPage(); + y = 15; + } + doc.line(10, y, 200, y); + y += 4; + } + }); + doc.save(`${title || 'chat'}.pdf`); +}; + +const Navbar = () => { + const [title, setTitle] = useState(''); + const [timeAgo, setTimeAgo] = useState(''); + + const { sections, chatId } = useChat(); + + useEffect(() => { + if (sections.length > 0 && sections[0].message) { + const newTitle = + sections[0].message.query.length > 30 + ? `${sections[0].message.query.substring(0, 30).trim()}...` + : sections[0].message.query || 'New Conversation'; + + setTitle(newTitle); + const newTimeAgo = formatTimeDifference( + new Date(), + sections[0].message.createdAt, + ); + setTimeAgo(newTimeAgo); + } + }, [sections]); + + useEffect(() => { + const intervalId = setInterval(() => { + if (sections.length > 0 && sections[0].message) { + const newTimeAgo = formatTimeDifference( + new Date(), + sections[0].message.createdAt, + ); + setTimeAgo(newTimeAgo); + } + }, 1000); + + return () => clearInterval(intervalId); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( +
+
+
+
+ + + +
+ + {timeAgo} ago +
+
+ +
+

+ {title || 'New Conversation'} +

+
+ +
+ + + + + + +
+
+

+ Export Chat +

+
+
+ + +
+
+ + + + {}} + /> +
+
+
+
+ ); +}; + +export default Navbar; diff --git a/src/components/NewsArticleWidget.tsx b/src/components/NewsArticleWidget.tsx new file mode 100644 index 0000000..f06c70f --- /dev/null +++ b/src/components/NewsArticleWidget.tsx @@ -0,0 +1,71 @@ +import { useEffect, useState } from 'react'; + +interface Article { + title: string; + content: string; + url: string; + thumbnail: string; +} + +const NewsArticleWidget = () => { + const [article, setArticle] = useState
(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(false); + + useEffect(() => { + fetch('/api/discover?mode=preview') + .then((res) => res.json()) + .then((data) => { + const articles = (data.blogs || []).filter((a: Article) => a.thumbnail); + setArticle(articles[Math.floor(Math.random() * articles.length)]); + setLoading(false); + }) + .catch(() => { + setError(true); + setLoading(false); + }); + }, []); + + return ( +
+ {loading ? ( +
+
+
+
+
+
+
+ ) : error ? ( +
Could not load news.
+ ) : article ? ( + +
+ {article.title} +
+
+
+ {article.title} +
+

+ {article.content} +

+
+ + ) : null} +
+ ); +}; + +export default NewsArticleWidget; diff --git a/src/components/SearchImages.tsx b/src/components/SearchImages.tsx new file mode 100644 index 0000000..d393335 --- /dev/null +++ b/src/components/SearchImages.tsx @@ -0,0 +1,152 @@ +/* eslint-disable @next/next/no-img-element */ +import { ImagesIcon, PlusIcon } from 'lucide-react'; +import { useState } from 'react'; +import Lightbox from 'yet-another-react-lightbox'; +import 'yet-another-react-lightbox/styles.css'; +import { Message } from './ChatWindow'; + +type Image = { + url: string; + img_src: string; + title: string; +}; + +const SearchImages = ({ + query, + chatHistory, + messageId, +}: { + query: string; + chatHistory: [string, string][]; + messageId: string; +}) => { + const [images, setImages] = useState(null); + const [loading, setLoading] = useState(false); + const [open, setOpen] = useState(false); + const [slides, setSlides] = useState([]); + + return ( + <> + {!loading && images === null && ( + + )} + {loading && ( +
+ {[...Array(4)].map((_, i) => ( +
+ ))} +
+ )} + {images !== null && images.length > 0 && ( + <> +
+ {images.length > 4 + ? images.slice(0, 3).map((image, i) => ( + { + setOpen(true); + setSlides([ + slides[i], + ...slides.slice(0, i), + ...slides.slice(i + 1), + ]); + }} + key={i} + src={image.img_src} + alt={image.title} + className="h-full w-full aspect-video object-cover rounded-lg transition duration-200 active:scale-95 hover:scale-[1.02] cursor-zoom-in" + /> + )) + : images.map((image, i) => ( + { + setOpen(true); + setSlides([ + slides[i], + ...slides.slice(0, i), + ...slides.slice(i + 1), + ]); + }} + key={i} + src={image.img_src} + alt={image.title} + className="h-full w-full aspect-video object-cover rounded-lg transition duration-200 active:scale-95 hover:scale-[1.02] cursor-zoom-in" + /> + ))} + {images.length > 4 && ( + + )} +
+ setOpen(false)} slides={slides} /> + + )} + + ); +}; + +export default SearchImages; diff --git a/src/components/SearchVideos.tsx b/src/components/SearchVideos.tsx new file mode 100644 index 0000000..63b4ed8 --- /dev/null +++ b/src/components/SearchVideos.tsx @@ -0,0 +1,223 @@ +/* eslint-disable @next/next/no-img-element */ +import { PlayCircle, PlayIcon, PlusIcon, VideoIcon } from 'lucide-react'; +import { useRef, useState } from 'react'; +import Lightbox, { GenericSlide, VideoSlide } from 'yet-another-react-lightbox'; +import 'yet-another-react-lightbox/styles.css'; +import { Message } from './ChatWindow'; + +type Video = { + url: string; + img_src: string; + title: string; + iframe_src: string; +}; + +declare module 'yet-another-react-lightbox' { + export interface VideoSlide extends GenericSlide { + type: 'video-slide'; + src: string; + iframe_src: string; + } + + interface SlideTypes { + 'video-slide': VideoSlide; + } +} + +const Searchvideos = ({ + query, + chatHistory, + messageId, +}: { + query: string; + chatHistory: [string, string][]; + messageId: string; +}) => { + const [videos, setVideos] = useState(null); + const [loading, setLoading] = useState(false); + const [open, setOpen] = useState(false); + const [slides, setSlides] = useState([]); + const [currentIndex, setCurrentIndex] = useState(0); + const videoRefs = useRef<(HTMLIFrameElement | null)[]>([]); + + return ( + <> + {!loading && videos === null && ( + + )} + {loading && ( +
+ {[...Array(4)].map((_, i) => ( +
+ ))} +
+ )} + {videos !== null && videos.length > 0 && ( + <> +
+ {videos.length > 4 + ? videos.slice(0, 3).map((video, i) => ( +
{ + setOpen(true); + setSlides([ + slides[i], + ...slides.slice(0, i), + ...slides.slice(i + 1), + ]); + }} + className="relative transition duration-200 active:scale-95 hover:scale-[1.02] cursor-pointer" + key={i} + > + {video.title} +
+ +

Video

+
+
+ )) + : videos.map((video, i) => ( +
{ + setOpen(true); + setSlides([ + slides[i], + ...slides.slice(0, i), + ...slides.slice(i + 1), + ]); + }} + className="relative transition duration-200 active:scale-95 hover:scale-[1.02] cursor-pointer" + key={i} + > + {video.title} +
+ +

Video

+
+
+ ))} + {videos.length > 4 && ( + + )} +
+ setOpen(false)} + slides={slides} + index={currentIndex} + on={{ + view: ({ index }) => { + const previousIframe = videoRefs.current[currentIndex]; + if (previousIframe?.contentWindow) { + previousIframe.contentWindow.postMessage( + '{"event":"command","func":"pauseVideo","args":""}', + '*', + ); + } + + setCurrentIndex(index); + }, + }} + render={{ + slide: ({ slide }) => { + const index = slides.findIndex((s) => s === slide); + return slide.type === 'video-slide' ? ( +
+