RAG SaaS
\n\n Ship RAG solutions quickly⚡\n
\n\n\n ![\"RAG-SaaS](\"./assets/banner.png\")
\n
\n A end to end SaaS Solution for Retrieval-Augmented Generation (RAG)
and Agentic based applications.
\n\n
\n Features ·\n Tech Stack ·\n Getting Started ·\n Deployment ·\n Roadmap\n
\n\n\n \n ![\"GitHub](\"https://img.shields.io/github/stars/adithya-s-k/RAG-SaaS?style=social\")
![\"GitHub](\"https://img.shields.io/github/forks/adithya-s-k/RAG-SaaS?style=social\")
![\"GitHub](\"https://img.shields.io/github/issues/adithya-s-k/RAG-SaaS\")
![\"GitHub](\"https://img.shields.io/github/issues-pr/adithya-s-k/RAG-SaaS\")
| Features | \nDemo Video | \n
|---|---|
\n
| \n \n \n \n\n \n | \n
\n
\n\n\n## Tech Stack\n\n- 🦙 LlamaIndex: For building and orchestrating RAG pipelines\n- 📦 MongoDB: Used as both a normal database and a vector database\n- ⚡ FastAPI: Backend API framework\n- ⚛️ Next.js: Frontend framework\n- 🔍 Qdrant: Vector database for efficient similarity search\n- 👁️ Arize Phoenix: Observability Platform to monitor/evaluate your RAG system\n\n## 🌟 Why RAG-SaaS?\n\nSetting up reliable RAG systems can be time-consuming and complex. RAG-SaaS allows developers to focus on fine-tuning and developing their RAG pipeline rather than worrying about packaging it into a usable application. Built on top of [create-llama](https://www.llamaindex.ai/blog/create-llama-a-command-line-tool-to-generate-llamaindex-apps-8f7683021191) by LlamaIndex, RAG-SaaS provides a solid foundation for your RAG-based projects.\n\n## 🚀 Getting Started\n\n1. Clone the repository:\n ```bash\n git clone https://github.com/adithya-s-k/RAG-SaaS.git\n cd RAG-SaaS\n ```\n\n## 🐳 Docker Compose Deployment\n\n### Environment Variables\n\n\n
\n\nFor Docker Compose deployment, use:\n\n```bash\ndocker compose up -d\n```\n\nPull down the containers\n\n```bash\ndocker compose down\n```\n\n### Development Mode\n\nTo run the project in development mode, follow these steps:\n\n1. **Start the Next.js Frontend:**\n\n Navigate to the `frontend` directory and install the required dependencies. Then, run the development server:\n\n ```bash\n cd frontend\n npm install\n npm run dev\n ```\n\n2. **Set Up the Vector Database (Qdrant), Database (MongoDB), and Observability Platform (Arize Phoenix):**\n\n You can either self-host these services using Docker or use hosted solutions.\n\n **Self-Hosted Options:**\n\n - Qdrant:\n\n ```bash\n docker pull qdrant/qdrant\n ```\n\n - MongoDB:\n\n ```bash\n docker pull mongo\n ```\n\n - Arize Phoenix:\n ```bash\n docker pull arizephoenix/phoenix\n ```\n\n **Hosted Options:**\n\n - Qdrant Cloud: [Qdrant Cloud](https://cloud.qdrant.io/)\n - MongoDB Atlas: [MongoDB Atlas](https://www.mongodb.com/cloud/atlas)\n - Arize Phoenix: [Arize Phoenix](https://app.phoenix.arize.com/)\n\n3. **Start the FastAPI Server:**\n\n Navigate to the `backend` directory and set up the Python environment. You can use either Conda or Python's built-in `venv`:\n\n ```bash\n cd backend\n ```\n\n **Using Conda:**\n\n ```bash\n conda create -n ragsaas-venv python=3.11\n conda activate ragsaas-venv\n ```\n\n **Using Python's `venv`:**\n\n ```bash\n python -m venv ragsaas-venv\n \\ragsaas-venv\\Scripts\\activate # On Windows\n source ragsaas-venv/bin/activate # On macOS/Linux\n ```\n\n Install the required dependencies and run the server:\n\n ```bash\n pip install -e .\n python main.py\n ```\n\n---\n\n## Roadmap\n\n- [x] add support to store ingested data in AWS S3\n- [x] Add Docker compose for each set up\n- [x] Implement Observability\n- [ ] Improve authentication system\n- [ ] Integrate OmniParse API for efficient Data ingestion\n- [ ] Provide more control to Admin over RAG configuration\n- [ ] Implement Advanced and Agentic RAG\n\n## 👥 Contributing\n\nWe welcome contributions to RAG-SaaS! Please see our [CONTRIBUTING.md](CONTRIBUTING.md) for more details on how to get started.\n\n## 📄 Licensing\n\nThis project is available under a dual license:\n\n- Apache License 2.0 for students, developers, and individuals\n- GNU General Public License v3.0 for companies and commercial use\n\nSee the [LICENSING.md](LICENSING.md) file for more details.\n\n## 🙏 Acknowledgements\n\nThis project is built on the following frameworks, technologies and tools:\n\n- [LlamaIndex](https://www.llamaindex.ai/) for the create-llama tool and RAG orchestration\n- [FastAPI](https://fastapi.tiangolo.com/)\n- [Next.js](https://nextjs.org/)\n- [MongoDB](https://www.mongodb.com/)\n- [Qdrant](https://qdrant.tech/)\n- [Arize Phoenix](https://docs.arize.com/phoenix)\n\n## Contact & Support\n\n### Bug Reports\n\nIf you encounter any issues or bugs, please report them in the [Issues](https://github.com/adithya-s-k/RAG-SaaS/issues) tab of our GitHub repository.\n\n### Commercial Use & Custom Solutions\n\nFor inquiries regarding:\n\n- Commercial licensing\n- Custom modifications\n- Managed deployment\n- Specialized integrations\n\nPlease contact: adithyaskolavi@gmail.com\n\nWe're here to help tailor RAG-SaaS to your specific needs and ensure you get the most out of our solution.\n\n## Star History\n\n🔑 How to Set up .env
\n\n### Environment Variables\n\nTo properly configure and run RAG-SaaS, you need to set up several environment variables. These are divided into three main sections: Frontend, Backend, and Docker Compose. Here's a detailed explanation of each:\n\n#### Frontend Environment (./frontend/.env.local)\n\n- `NEXT_PUBLIC_SERVER_URL`: (Compulsory) The endpoint URL of your FastAPI server.\n- `NEXT_PUBLIC_CHAT_API`: (Compulsory) Derived from NEXT_SERVER_URL, typically set to `${NEXT_PUBLIC_SERVER_URL}/api/chat`.\n\n#### Backend Environment (./backend/.env)\n\n1. Model Configuration:\n\n - `MODEL_PROVIDER`: (Compulsory) The AI model provider (e.g., 'openai').\n - `MODEL`: (Compulsory) The name of the LLM model to use.\n - `EMBEDDING_MODEL`: (Compulsory) The name of the embedding model.\n - `EMBEDDING_DIM`: (Compulsory) The dimensionality of the embedding model.\n\n2. OpenAI Configuration:\n\n - `OPENAI_API_KEY`: (Compulsory) Your OpenAI API key.\n\n3. Application Settings:\n\n - `CONVERSATION_STARTERS`: (Compulsory) A list of starter questions for users.\n - `SYSTEM_PROMPT`: (Compulsory) The system prompt for the AI model.\n - `SYSTEM_CITATION_PROMPT`: (Optional) Additional prompt for citation.\n - `APP_HOST`: (Compulsory) The host address for the backend (default: '0.0.0.0').\n - `APP_PORT`: (Compulsory) The port for the backend (default: 8000).\n\n4. Database Configuration:\n\n - `MONGODB_URI`: (Compulsory) The MongoDB connection URI.\n - `MONGODB_NAME`: (Compulsory) The MongoDB database name (default: 'RAGSAAS').\n - `QDRANT_URL`: (Compulsory) The URL for the Qdrant server.\n - `QDRANT_COLLECTION`: (Compulsory) The Qdrant collection name.\n - `QDRANT_API_KEY`: (Optional) API key for Qdrant authentication.\n\n5. Authentication:\n\n - `JWT_SECRET_KEY`: (Compulsory) Secret key for signing JWT tokens.\n - `JWT_REFRESH_SECRET_KEY`: (Compulsory) Secret key for signing JWT refresh tokens.\n - `ADMIN_EMAIL`: (Compulsory) Administrator email for application login.\n - `ADMIN_PASSWORD`: (Compulsory) Administrator password for application login.\n\n6. AWS S3 Configuration (Optional):\n\n - `AWS_ACCESS_KEY_ID`: AWS Access Key ID.\n - `AWS_SECRET_ACCESS_KEY`: AWS Secret Access Key.\n - `AWS_REGION`: AWS Region for your services.\n - `BUCKET_NAME`: The name of the S3 bucket to use.\n\n7. Observability:\n - `ARIZE_PHOENIX_ENDPOINT`: (Optional) Endpoint for Arize Phoenix observability.\n\n#### S3 Integration\n\nTo enable S3 integration for PDF uploads/Ingestion:\n\n1. Set the following environment variables in your `.env` file:\n\n```\n\nAWS_ACCESS_KEY_ID=your_access_key\nAWS_SECRET_ACCESS_KEY=your_secret_key\nAWS_REGION=bucket_region\nBUCKET_NAME=your_bucket_name\n\n```\n\n### Docker Compose Env (./env)\n\n```\n backend:\n build:\n context: ./backend\n dockerfile: Dockerfile\n image: ragsaas/backend:latest\n container_name: backend\n ports:\n - '8000:8000'\n environment:\n # MongoDB Configuration\n MONGODB_NAME: RAGSAAS\n MONGODB_URI: mongodb://admin:password@mongodb:27017/\n # Qdrant Configuration\n QDRANT_COLLECTION: default\n QDRANT_URL: http://qdrant:6333\n # QDRANT_API_KEY:\n # OPENAI_API_KEY is compulsory\n OPENAI_API_KEY:\n # Backend Application Configuration\n MODEL_PROVIDER: openai\n MODEL: gpt-4o-mini\n EMBEDDING_MODEL: text-embedding-3-small\n EMBEDDING_DIM: 1536\n FILESERVER_URL_PREFIX: http://backend:8000/api/files\n SYSTEM_PROMPT: 'You are a helpful assistant who helps users with their questions.'\n APP_HOST: 0.0.0.0\n APP_PORT: 8000\n JWT_SECRET_KEY:\n JWT_REFRESH_SECRET_KEY:\n ARIZE_PHOENIX_ENDPOINT: http://arizephoenix:4317\n```\n\n\n \n \n \n
\n
\n );\n}\n\nexport default function SignUp() {\n return (\n \n
\n \n \n
\n \n
\n \n Login
\n\n Enter your email below to login to your account\n
\n\n Don't have an account?{' '}\n \n Sign up\n \n
\n \n
\n \n
\n );\n}\n\nexport default function SignUp() {\n return (\n \n
\n \n \n
\n \n
\n \n Sign Up
\n\n Create an account to get started\n
\n\n Already have an account?{' '}\n \n Log in\n \n
\n \n
\n \n
\n \n
\n {file && (\n \n \n {isUploading ? (\n
\n )}\n {uploadResult && (\n \n {uploadResult}\n
\n )}\n \n \n \n
\n \n \n \n
\n Loading configuration...
;\n if (configError) return Error: {configError}
;\n\n return (\n \n \n setSystemPrompt(e.target.value)}\n placeholder=\"Enter system prompt here...\"\n />\n \n {systemPromptLoading ? 'Updating...' : 'Update System Prompt'}\n \n
\n \n \n {suggestedQuestions.map((question, index) => (\n
\n \n updateSuggestedQuestion(index, e.target.value)}\n placeholder=\"Enter a suggested question...\"\n />\n deleteSuggestedQuestion(index)}\n >\n
\n ))}\n \n \n \n {startersLoading ? 'Updating...' : 'Update Conversation Starters'}\n \n
\n Loading...
;\n if (error) return Error: {error}
;\n\n return (\n Unauthorized
;\n\n return (\n \n \n \n Users Tracking \n Data Ingestion \n RAG Configuration \n \n \n \n \n \n \n \n \n
\n );\n}\n"
},
{
"path": "frontend/app/authProvider.tsx",
"content": "'use client';\n\nimport React, { createContext, useState, useContext, useEffect } from 'react';\nimport { useRouter, usePathname } from 'next/navigation';\nimport Cookies from 'js-cookie';\nimport axios, { AxiosInstance } from 'axios';\nimport { jwtDecode, JwtPayload } from 'jwt-decode';\n\ninterface AuthContextType {\n isAuthenticated: boolean;\n email: string | null;\n firstName: string | null;\n lastName: string | null;\n accessToken: string | null;\n refreshToken: string | null;\n login: (\n accessToken: string,\n refreshToken: string,\n email: string,\n firstName: string,\n lastName: string\n ) => void;\n logout: () => void;\n axiosInstance: AxiosInstance;\n}\n\nconst AuthContext = createContext\n \n \n \n {adminData.firstName?.[0]}\n {adminData.lastName?.[0]}\n \n \n \n )}\n
\n\n Dashboard
\n\n {adminData && Object.keys(adminData).length > 0 && (\n\n {(adminData.firstName || adminData.lastName) && (\n {adminData.email} \n )}\n {adminData.role && (\n
\n \n {`${adminData.firstName || ''} ${\n adminData.lastName || ''\n }`.trim()}\n
\n )}\n {adminData.email && (\n\n Role: {adminData.role}\n
\n )}\n\n
\n );\n}\n\nexport default function Chat() {\n return (\n \n
\n \n \n \n \n\n
\n \n Ship RAG Solutions ⚡Quickly\n
\n\n RAG-SaaS is an end-to-end platform for building\n Retrieval-Augmented Generation (RAG) applications. It simplifies\n deployment, allowing developers to focus on optimizing their RAG\n systems.\n
\n\n \n Get Started\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n Features\n
\n\n
\n Proudly Open Source
\n\n RAG-SaaS is open source and powered by open source software.\n
\n- \n
- \n 🦙\n LlamaIndex: For building and deploying RAG\n pipelines\n \n
- \n 📦\n MongoDB: Used as both a normal database and a\n vector database\n \n
- \n ⚡\n FastAPI: Backend API framework\n \n
- \n ⚛️\n Next.js: Frontend framework\n \n
\n The code is available on{' '}\n
\n \n {children}\n \n
\n \n \n//
\n// );\n// }\n\n// export default function Home() {\n// return (\n// \n// \n// ⚡
{' '}\n//\n// Introducing RAG SAAS\n// \n// \n//
\n// {' '}\n//
\n//
\n// \n//
\n// );\n// }\n\n// export default function Home() {\n// return (\n// \n// \n// ⚡
{' '}\n//\n// Ship RAG Solutions Quickly\n// \n// \n//
\n// {' '}\n//
\n//
\n\n// \n//
\n// \n \n \n \n ⚡
{' '}\n\n Ship RAG Solutions Quickly\n \n \n
\n \n {' '}\n
\n
\n );\n}\n\nexport default function Chat() {\n return (\n \n
\n \n//
\n// );\n// };\n\n// export default BannerCard;\n\nimport React from 'react';\nimport { Github, Zap } from 'lucide-react';\nimport Image from 'next/image';\nimport Link from 'next/link';\nimport { Button } from '@/components/ui/button';\nimport { useTheme } from 'next-themes';\nimport { motion } from 'framer-motion';\nimport ShinyButton from './magicui/shiny-button';\nimport { siteConfig } from '@/config/site';\nimport HyperText from './magicui/hyper-text';\n\nconst BannerCard: React.FC = () => {\n const { theme, setTheme } = useTheme();\n\n return (\n \n// \n//
\n// \n// Ship RAG Solutions ⚡Quickly\n//
\n//\n \n Ship RAG Solutions{' '}\n
\n\n \n
\n \n
\n \n Ship RAG Solutions{' '}\n
\n\n \n
\n );\n}\n\nexport function Header() {\n const { theme } = useTheme();\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n const { isAuthenticated, logout, firstName } = useAuth();\n const { isSidebarOpen, setIsSidebarOpen } = useConversationContext();\n\n const toggleSidebar = () => {\n setIsSidebarOpen(!isSidebarOpen);\n };\n\n const handleLogout = () => {\n logout();\n setIsMenuOpen(false);\n };\n\n return (\n <>\n \n
\n \n \n {isAuthenticated ? (\n \n Logout\n \n ) : (\n \n )}\n \n
\n \n setIsMenuOpen(!isMenuOpen)}\n >\n Toggle menu\n {isMenuOpen ? (\n
\n \n \n \n
\n \n \n \n
\n );\n }\n\n return (\n \n
\n \n Sign in to see your chat history\n
\n\n
\n \n \n
\n \n
\n \n \n \n
\n ) : null\n )} */}\n {Object.entries(conversationList).map(\n ([dateCategory, conversations]) =>\n conversations.length > 0 ? (\n \n \n {/* {Object.entries(conversationList).map(\n ([dateCategory, conversations]) =>\n conversations.length > 0 ? (\n \n e.stopPropagation()}\n >\n \n \n \n setIsEditing(conversation._id)}\n >\n Edit\n \n handleShareClick(conversation._id)}\n >\n Share\n \n \n handleDeleteClick(conversation._id)\n }\n >\n Delete\n \n \n \n
\n ))}\n \n \n \n router.push(\n `/chat?conversation_id=${conversation._id}`\n )\n }\n >\n \n setEditedSummaries((prev) => ({\n ...prev,\n [conversation._id]: e.target.value,\n }))\n }\n onBlur={() => handleEditSubmit(conversation._id)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleEditSubmit(conversation._id);\n }\n }}\n className=\"h-full text-md w-full focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0\"\n placeholder=\"Edited Summary\"\n onClick={(e) => e.stopPropagation()}\n />\n ) : (\n \n {conversation.summary.length > MAX_SUMMARY_LENGTH\n ? `${conversation.summary.substring(\n 0,\n MAX_SUMMARY_LENGTH\n )}...`\n : conversation.summary}\n \n )}\n
\n \n {dateCategory.replace(/_/g, ' ')}\n
\n {conversations\n .sort(\n (a: { updated_at: any }, b: { updated_at: any }) =>\n new Date(b.updated_at || '').getTime() -\n new Date(a.updated_at || '').getTime()\n )\n .map((conversation: Conversation) => (\n\n \n \n router.push(\n `/chat?conversation_id=${conversation._id}`\n )\n }\n >\n \n setEditedSummaries((prev) => ({\n ...prev,\n [conversation._id]: e.target.value,\n }))\n }\n onBlur={() => handleEditSubmit(conversation._id)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleEditSubmit(conversation._id);\n }\n }}\n className=\"h-full text-md w-full focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0\"\n placeholder=\"Edited Summary\"\n onClick={(e) => e.stopPropagation()}\n />\n ) : (\n \n {conversation.summary.length > MAX_SUMMARY_LENGTH\n ? `${conversation.summary.substring(\n 0,\n MAX_SUMMARY_LENGTH\n )}...`\n : conversation.summary}\n \n )}\n
\n \n {dateCategory.replace(/_/g, ' ')}\n
\n {conversations\n .sort(\n (a: { updated_at: any }, b: { updated_at: any }) =>\n new Date(b.updated_at || '').getTime() -\n new Date(a.updated_at || '').getTime()\n )\n .map((conversation: Conversation) => (\n\n
\n \n );\n}\n\nexport default function History() {\n return (\n \n \n \n {firstName?.[0]}\n {lastName?.[0]}\n \n \n
\n \n
\n \n {firstName} {lastName}\n
\n{email}
\n\n
\n \n
\n );\n};\n\nexport default Loading;\n"
},
{
"path": "frontend/components/magicui/animated-gradient-text.tsx",
"content": "import { ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport default function AnimatedGradientText({\n children,\n className,\n}: {\n children: ReactNode;\n className?: string;\n}) {\n return (\n \n
\n \n \n {children}\n \n\n
\n );\n};\n\nexport default BoxReveal;\n"
},
{
"path": "frontend/components/magicui/gradual-spacing.tsx",
"content": "\"use client\";\n\nimport { AnimatePresence, motion, Variants } from \"framer-motion\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface GradualSpacingProps {\n text: string;\n duration?: number;\n delayMultiple?: number;\n framerProps?: Variants;\n className?: string;\n}\n\nexport default function GradualSpacing({\n text,\n duration = 0.5,\n delayMultiple = 0.04,\n framerProps = {\n hidden: { opacity: 0, x: -20 },\n visible: { opacity: 1, x: 0 },\n },\n className,\n}: GradualSpacingProps) {\n return (\n \n \n {text.split(\"\").map((char, i) => (\n \n {char === \" \" ? : char}\n \n ))}\n \n
\n );\n}\n"
},
{
"path": "frontend/components/magicui/hyper-text.tsx",
"content": "\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { AnimatePresence, motion, Variants } from \"framer-motion\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface HyperTextProps {\n text: string;\n duration?: number;\n framerProps?: Variants;\n className?: string;\n animateOnLoad?: boolean;\n}\n\nconst alphabets = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".split(\"\");\n\nconst getRandomInt = (max: number) => Math.floor(Math.random() * max);\n\nexport default function HyperText({\n text,\n duration = 800,\n framerProps = {\n initial: { opacity: 0, y: -10 },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: 3 },\n },\n className,\n animateOnLoad = true,\n}: HyperTextProps) {\n const [displayText, setDisplayText] = useState(text.split(\"\"));\n const [trigger, setTrigger] = useState(false);\n const interations = useRef(0);\n const isFirstRender = useRef(true);\n\n const triggerAnimation = () => {\n interations.current = 0;\n setTrigger(true);\n };\n\n useEffect(() => {\n const interval = setInterval(\n () => {\n if (!animateOnLoad && isFirstRender.current) {\n clearInterval(interval);\n isFirstRender.current = false;\n return;\n }\n if (interations.current < text.length) {\n setDisplayText((t) =>\n t.map((l, i) =>\n l === \" \"\n ? l\n : i <= interations.current\n ? text[i]\n : alphabets[getRandomInt(26)],\n ),\n );\n interations.current = interations.current + 0.1;\n } else {\n setTrigger(false);\n clearInterval(interval);\n }\n },\n duration / (text.length * 10),\n );\n // Clean up interval on unmount\n return () => clearInterval(interval);\n }, [text, duration, trigger, animateOnLoad]);\n\n return (\n \n {Array.from({ length: numCircles }, (_, i) => {\n const size = mainCircleSize + i * 70;\n const opacity = mainCircleOpacity - i * 0.03;\n const animationDelay = `${i * 0.06}s`;\n const borderStyle = i === numCircles - 1 ? 'dashed' : 'solid';\n const borderOpacity = 5 + i * 5;\n\n return (\n
\n );\n});\n\nRipple.displayName = 'Ripple';\n\nexport default Ripple;\n"
},
{
"path": "frontend/components/magicui/shimmer-button.tsx",
"content": "import React, { CSSProperties } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface ShimmerButtonProps\n extends React.ButtonHTMLAttributes\n {/* spark before */}\n \n
\n \n {children}\n\n {/* Highlight */}\n {children}
\n \n));\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n"
},
{
"path": "frontend/components/ui/alert-dialog.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef\n
\n \n );\n};\nexport const CardTitle = ({\n className,\n children,\n}: {\n className?: string;\n children: React.ReactNode;\n}) => {\n return (\n {children}
\n \n {props.showStop && (\n \n )}\n {props.showReload && (\n \n )}\n
\n );\n}\n"
},
{
"path": "frontend/components/ui/chat/chat-input.tsx",
"content": "'use client';\nimport React, { useRef, useEffect, ChangeEvent } from 'react';\nimport { JSONValue } from 'ai';\nimport { Button } from '../button';\nimport { DocumentPreview } from '../document-preview';\nimport FileUploader from '../file-uploader';\nimport { Textarea } from '../textarea';\nimport UploadImagePreview from '../upload-image-preview';\nimport { ChatHandler } from './chat.interface';\nimport { useFile } from './hooks/use-file';\nimport { CornerRightUp, SendHorizontal } from 'lucide-react';\n\nconst ALLOWED_EXTENSIONS = ['pdf', 'txt', 'docx'];\n\nexport default function ChatInput(\n props: Pick<\n ChatHandler,\n | 'isLoading'\n | 'input'\n | 'onFileUpload'\n | 'onFileError'\n | 'handleSubmit'\n | 'handleInputChange'\n | 'messages'\n | 'setInput'\n | 'append'\n > & {\n requestParams?: any;\n }\n) {\n const {\n imageUrl,\n setImageUrl,\n uploadFile,\n files,\n removeDoc,\n reset,\n getAnnotations,\n } = useFile();\n\n const textareaRef = useRef\n {files.map((file) => (\n removeDoc(file)}\n />\n ))}\n
\n )}\n \n {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n onSubmit(e as any);\n }\n }}\n style={{\n minHeight: '30px',\n maxHeight: '200px',\n overflow: 'hidden',\n border: 'none',\n boxShadow: 'none',\n }}\n />\n {/* \n
\n \n );\n}\n"
},
{
"path": "frontend/components/ui/chat/chat-message/chat-avatar.tsx",
"content": "import { User2 } from 'lucide-react';\nimport Image from 'next/image';\nimport { useTheme } from 'next-themes';\n\nexport default function ChatAvatar({ role }: { role: string }) {\n const { theme, setTheme } = useTheme();\n if (role === 'user') {\n return (\n \n
\n );\n }\n\n return (\n \n
\n );\n}\n"
},
{
"path": "frontend/components/ui/chat/chat-message/chat-events.tsx",
"content": "import { ChevronDown, ChevronRight, Loader2 } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"../../button\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"../../collapsible\";\nimport { EventData } from \"../index\";\n\nexport function ChatEvents({\n data,\n isLoading,\n}: {\n data: EventData[];\n isLoading: boolean;\n}) {\n const [isOpen, setIsOpen] = useState(false);\n\n const buttonLabel = isOpen ? \"Hide events\" : \"Show events\";\n\n const EventIcon = isOpen ? (\n \n \n \n \n \n \n \n \n
\n );\n}\n"
},
{
"path": "frontend/components/ui/chat/chat-message/chat-files.tsx",
"content": "import { DocumentPreview } from \"../../document-preview\";\nimport { DocumentFileData } from \"../index\";\n\nexport function ChatFiles({ data }: { data: DocumentFileData }) {\n if (!data.files.length) return null;\n return (\n \n {data.map((eventItem, index) => (\n
\n \n {eventItem.title}\n
\n ))}\n \n {data.files.map((file) => (\n
\n );\n}\n"
},
{
"path": "frontend/components/ui/chat/chat-message/chat-image.tsx",
"content": "import Image from \"next/image\";\nimport { type ImageData } from \"../index\";\n\nexport function ChatImage({ data }: { data: ImageData }) {\n return (\n \n
\n );\n}\n"
},
{
"path": "frontend/components/ui/chat/chat-message/chat-sources.tsx",
"content": "'use client';\n'use client';\nimport React, { useMemo } from 'react';\nimport { Check, Copy } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport {\n HoverCard,\n HoverCardContent,\n HoverCardTrigger,\n} from '@/components/ui/hover-card';\nimport { useCopyToClipboard } from '../hooks/use-copy-to-clipboard';\nimport PdfDialog from '../widgets/PdfDialog';\n\nconst SCORE_THRESHOLD = 0.3;\n\ninterface SourceNode {\n id: string;\n metadata: {\n url?: string;\n [key: string]: unknown;\n };\n score?: number;\n url?: string;\n}\n\ninterface SourceData {\n nodes: SourceNode[];\n}\n\ninterface NodeInfo {\n id: string;\n url?: string;\n metadata: {\n url?: string;\n [key: string]: unknown;\n };\n}\n\ninterface SourceNumberButtonProps {\n index: number;\n}\n\nfunction SourceNumberButton({ index }: SourceNumberButtonProps) {\n return (\n \n {index + 1}\n
\n );\n}\n\nfunction prefixUrl(url: string): string {\n if (url.match(/^\\/api\\/file/)) {\n return `${process.env.NEXT_PUBLIC_SERVER_URL}${url}`;\n }\n return url;\n}\n\ninterface NodeInfoProps {\n nodeInfo: NodeInfo;\n}\n\nfunction NodeInfo({ nodeInfo }: NodeInfoProps) {\n const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 1000 });\n const originalUrl = nodeInfo.metadata?.url || nodeInfo.url;\n const url = originalUrl ? prefixUrl(originalUrl) : undefined;\n\n if (url) {\n return (\n \n \n {url}\n \n copyToClipboard(url)}\n size=\"icon\"\n variant=\"ghost\"\n className=\"h-12 w-12 shrink-0\"\n >\n {isCopied ? (\n
\n );\n }\n\n return (\n \n Sorry, unknown node type. Please add a new renderer in the NodeInfo\n component.\n
\n );\n}\n\ninterface ChatSourcesProps {\n data: SourceData;\n}\n\nexport function ChatSources({ data }: ChatSourcesProps) {\n const sources: NodeInfo[] = useMemo(() => {\n const nodesByPath: Record\n Sources:\n
\n );\n}\n"
},
{
"path": "frontend/components/ui/chat/chat-message/chat-suggestedQuestions.tsx",
"content": "import { useState } from \"react\";\nimport { ChatHandler, SuggestedQuestionsData } from \"..\";\n\nexport function SuggestedQuestions({\n questions,\n append,\n}: {\n questions: SuggestedQuestionsData;\n append: Pick\n {sources.map((nodeInfo, index) => {\n const originalUrl = nodeInfo.metadata?.url || nodeInfo.url;\n const url = originalUrl ? prefixUrl(originalUrl) : undefined;\n if (url?.endsWith('.pdf')) {\n return (\n
\n \n \n \n \n \n \n \n
\n );\n })}\n \n {questions.map((question, index) => (\n {\n append({ role: \"user\", content: question });\n setShowQuestions(false);\n }}\n className=\"text-sm italic hover:underline cursor-pointer\"\n >\n {\"->\"} {question}\n \n ))}\n
\n )\n );\n}\n"
},
{
"path": "frontend/components/ui/chat/chat-message/chat-tools.tsx",
"content": "import { ToolData } from '../index';\nimport { WeatherCard, WeatherData } from '../widgets/WeatherCard';\n\n// TODO: If needed, add displaying more tool outputs here\nexport default function ChatTools({ data }: { data: ToolData }) {\n if (!data) return null;\n\n const { toolCall, toolOutput } = data;\n\n // Check if toolOutput is defined and has the isError property\n if (\n toolOutput &&\n typeof toolOutput.isError === 'boolean' &&\n toolOutput.isError\n ) {\n return (\n \n There was an error when calling the tool {toolCall.name} with input:{' '}\n
\n {JSON.stringify(toolCall.input)}\n
\n );\n }\n\n // Ensure toolOutput is defined before trying to access output\n if (toolOutput) {\n switch (toolCall.name) {\n case 'get_weather_information':\n const weatherData = toolOutput.output as unknown as WeatherData;\n return \n {JSON.stringify(toolCall.input)}\n
\n \n {value}\n \n
\n );\n});\nCodeBlock.displayName = \"CodeBlock\";\n\nexport { CodeBlock };\n"
},
{
"path": "frontend/components/ui/chat/chat-message/index.tsx",
"content": "import { Check, Copy, Pencil, ThumbsDown, ThumbsUp } from 'lucide-react';\nimport { useEffect, useState } from 'react';\nimport { Message } from 'ai';\nimport { Fragment } from 'react';\nimport { Button } from '../../button';\nimport { useCopyToClipboard } from '../hooks/use-copy-to-clipboard';\nimport {\n ChatHandler,\n DocumentFileData,\n EventData,\n ImageData,\n MessageAnnotation,\n MessageAnnotationType,\n SourceData,\n SuggestedQuestionsData,\n ToolData,\n getAnnotationData,\n} from '../index';\nimport ChatAvatar from './chat-avatar';\nimport { ChatEvents } from './chat-events';\nimport { ChatFiles } from './chat-files';\nimport { ChatImage } from './chat-image';\nimport { ChatSources } from './chat-sources';\nimport { SuggestedQuestions } from './chat-suggestedQuestions';\nimport ChatTools from './chat-tools';\nimport Markdown from './markdown';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '@/components/ui/dialog';\n\ntype ContentDisplayConfig = {\n order: number;\n component: JSX.Element | null;\n};\n\nfunction ChatMessageContent({\n message,\n isLoading,\n append,\n}: {\n message: Message;\n isLoading: boolean;\n append: Pick\n {language}\n
\n \n \n \n
\n \n {contents\n .sort((a, b) => a.order - b.order)\n .map((content, index) => (\n {content.component} \n ))}\n
\n );\n}\n\nexport default function ChatMessage({\n chatMessage,\n isLoading,\n append,\n updateMessageContent,\n}: // onSave,\n{\n chatMessage: Message;\n isLoading: boolean;\n append: Pick\n
\n \n );\n}\n"
},
{
"path": "frontend/components/ui/chat/chat-message/markdown.tsx",
"content": "// import 'katex/dist/katex.min.css';\n// import { FC, memo } from 'react';\n// import ReactMarkdown, { Options } from 'react-markdown';\n// import rehypeKatex from 'rehype-katex';\n// import remarkGfm from 'remark-gfm';\n// import remarkMath from 'remark-math';\n\n// import { CodeBlock } from './codeblock';\n// import Link from 'next/link';\n\n// const MemoizedReactMarkdown: FC\n copyToClipboard(chatMessage.content)}\n size=\"icon\"\n variant=\"ghost\"\n className=\"h-8 w-8 opacity-0 group-hover:opacity-100\"\n >\n {isCopied ? (\n setIsLiked(!isLiked)}\n >\n {isLiked ? (\n setIsDisliked(!isDisliked)}\n >\n {isDisliked ? (\n
\n \n ) : (\n <>\n \n {/* setIsDisliked(!isDisliked)}\n >\n copyToClipboard(chatMessage.content)}\n size=\"icon\"\n variant=\"ghost\"\n className=\"h-8 w-8 opacity-0 group-hover:opacity-100\"\n >\n {isCopied ? (\n
\n \n )}\n \n// {children}\n// \n// );\n// }\n\n// return (\n// {children}
\n );\n },\n h3({ children }) {\n return{children}
;\n },\n p({ children }) {\n return{children}
;\n },\n a: ({ children, href, ...props }) => (\n\n // {children}\n // \n // );\n // }\n\n // return (\n // \n \n {children}\n
\n
\n );\n },\n th({ children }) {\n return (\n \n \n {!messageLength && (\n
\n\n {!messageLength && starterQuestions?.length && props.append && (\n \n
\n )}\n \n {props.messages.map((m, i) => {\n const isLoadingMessage =\n i === messageLength - 1 && props.isLoading;\n return (\n
\n {(showReload || showStop) && (\n \n
\n )}\n \n
\n )}\n \n \n {starterQuestions.slice(0, 4).map((question, i) => (\n \n props.append!({ role: 'user', content: question })\n }\n className=\"w-full whitespace-normal p-4 h-auto min-h-[70px] rounded-xl text-md font-medium transition-all bg-background text-muted-foreground hover:bg-muted-foreground hover:text-primary-foreground border-2 border-slate-500/10\"\n >\n {question}\n \n ))}\n
\n \n )}\n \n \n PDF Content \n \n File URL:{' '}\n \n {props.url}\n \n \n
\n \n \n \n
\n \n
\n );\n}\n"
},
{
"path": "frontend/components/ui/checkbox.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n React.ElementRef\n
\n \n
\n \n {weatherCodeDisplayMap[data.current.weather_code].status}\n \n {currentDayString}
\n \n \n {data.current.temperature_2m} {data.current_units.temperature_2m}\n \n {weatherCodeDisplayMap[data.current.weather_code].icon}\n
\n \n {data.daily.time.map((time, index) => {\n if (index === 0) return null; // skip the current day\n return (\n
\n \n {displayDay(time)}\n
\n );\n })}\n \n {weatherCodeDisplayMap[data.daily.weather_code[index]].icon}\n
\n \n {weatherCodeDisplayMap[data.daily.weather_code[index]].status}\n \n \n
\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n React.ElementRef\n
\n );\n }\n\n return (\n \n
\n \n {filetype.toUpperCase()} Raw Content \n \n {filename} ({inKB(filesize)} KB)\n \n
\n \n {content.type === \"text\" && (\n
\n \n {content.value as string}\n \n )}\n \n
\n {onRemove && (\n \n
\n \n
\n \n {file.filename} ({inKB(file.filesize)} KB)\n
\n \n {file.filetype.toUpperCase()} File\n
\n