wise-chatbots

Introduction

The wise-chatbots project aims to develop a web application featuring a fun interactive chatbot assistant. This chatbot will engage users through playful and engaging conversations, enhancing user interaction without the need for complex features like games or trivia.

System Overview

The wise-chatbots application will be a web-based platform designed to provide users with a simple yet engaging conversational experience. The chatbot will focus on delivering fun and interactive dialogues, making it an ideal companion for users seeking entertainment and light-hearted interaction.

Functional Requirements

• As a User, I should be able to engage in fun and interactive conversations with the chatbot.
• As a User, I should be able to access the chatbot via a web browser.
• As a User, I should experience smooth and straightforward interactions without complex features.

User Personas

• User: Individuals seeking entertainment and light-hearted interaction through a web-based chatbot.

Visuals Colors and Theme

The color palette for wise-chatbots is designed to reflect a playful and engaging atmosphere:

• primary: #4A90E2 (a vibrant blue)
• primary_light: #A6C8FF (a lighter tint of the primary color)
• secondary: #FF6F61 (a warm coral for emphasis)
• accent: #FFD700 (a bright gold for CTAs and active states)
• highlight: #FFA500 (a vivid orange for hover states and notifications)
• bg: #FFFFFF (a clean white background)
• surface: rgba(255, 255, 255, 0.9) (a soft white for cards/panels)
• text: #333333 (a dark gray for primary text)
• text_muted: #777777 (a lighter gray for secondary text)
• border: rgba(0, 0, 0, 0.1) (a subtle border color)

Signature Design Concept

The homepage of wise-chatbots will feature an interactive galaxy map where each star represents a different conversational topic. Users can click on a star to initiate a conversation on that topic, drag to rotate the galaxy, and hover to highlight connections between topics. This concept will be brought to life using @react-three/fiber for 3D rendering and gsap for smooth animations and transitions. The interactive galaxy will provide a unique and memorable entry point into the chatbot experience, encouraging exploration and engagement.

Interaction Model & Motion Direction

The landing page will employ a "parallax" interaction model, creating a layered depth effect as users scroll through the page. Decorative elements like atmospheric blobs and distant shapes will move at different speeds, while the main content remains in the natural flow. This approach will enhance the storytelling aspect of the chatbot, making the first impression visually rich and engaging.

Non-Functional Requirements

• The application should load quickly and provide a responsive user experience.
• The chatbot should handle multiple concurrent users without performance degradation.
• The system should be secure, protecting user data and privacy.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MongoDB
• AI Models: GPT 5.4 for user-friendly responses
• AI Tools: Litellm for LLM Routing
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The application will be accessed primarily via web browsers.
• The chatbot will not include complex features like games or trivia.
• The system will be designed to handle a moderate number of users simultaneously.

Glossary

• Chatbot: A software application used to conduct an online chat conversation via text or text-to-speech.
• Interactive Assistant: A chatbot designed to engage users in playful and engaging conversations.
• Parallax: A scrolling technique that creates an illusion of depth by moving background images slower than foreground images.

This document outlines the system requirements for the wise-chatbots project, ensuring a clear understanding of the project's goals and specifications.