mirror of https://github.com/kortix-ai/suna.git
fe wip
This commit is contained in:
marko-kraemer
parent
27a6e3735c
commit
3a2a6dd048
|
|
@ -0,0 +1,69 @@
|
|||
# AGI Innovations - Web Application
|
||||
|
||||
A modern, responsive web application for an Artificial General Intelligence (AGI) company. This project showcases a complete landing page with interactive elements, animations, and responsive design.
|
||||
|
||||
## Features
|
||||
|
||||
- **Responsive Design**: Fully responsive layout that works on all devices from mobile to desktop
|
||||
- **Modern UI**: Clean, professional design with smooth animations and transitions
|
||||
- **Interactive Elements**:
|
||||
- Mobile-friendly navigation with hamburger menu
|
||||
- Form validation for the contact form
|
||||
- Scroll-triggered animations
|
||||
- Typing effect for the hero heading
|
||||
- Particle animation background in the hero section
|
||||
- **Comprehensive Sections**:
|
||||
- Hero section with animated heading and particle background
|
||||
- AGI Capabilities showcase
|
||||
- About section with company information
|
||||
- Solutions section for different industries
|
||||
- Ethics section highlighting responsible AI development
|
||||
- Contact form with validation
|
||||
- Detailed footer with navigation links
|
||||
|
||||
## Technologies Used
|
||||
|
||||
- HTML5
|
||||
- CSS3 (with custom properties, flexbox, and grid)
|
||||
- Vanilla JavaScript (ES6+)
|
||||
- Font Awesome icons
|
||||
- Intersection Observer API for scroll animations
|
||||
- Canvas API for particle animations
|
||||
|
||||
## File Structure
|
||||
|
||||
- `index.html` - Main HTML structure
|
||||
- `styles.css` - Comprehensive CSS styling
|
||||
- `script.js` - JavaScript functionality
|
||||
- `test.html` - Test page to verify all files are working
|
||||
|
||||
## JavaScript Features
|
||||
|
||||
- Mobile menu toggle functionality
|
||||
- Smooth scrolling for navigation links
|
||||
- Form validation with error handling
|
||||
- Scroll animations using Intersection Observer
|
||||
- Typing effect for the hero heading
|
||||
- Interactive particle background using Canvas API
|
||||
|
||||
## Responsive Breakpoints
|
||||
|
||||
- Desktop: 992px and above
|
||||
- Tablet: 768px to 991px
|
||||
- Mobile: Below 768px
|
||||
|
||||
## Getting Started
|
||||
|
||||
Simply open the `index.html` file in a web browser to view the application.
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
This web application is compatible with all modern browsers including:
|
||||
- Chrome
|
||||
- Firefox
|
||||
- Safari
|
||||
- Edge
|
||||
|
||||
## License
|
||||
|
||||
This project is available for personal and commercial use.
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Modern Web Application</title>
|
||||
<title>AGI Innovations | Advanced Artificial General Intelligence</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
|
|
@ -11,11 +11,11 @@
|
|||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<a href="#" class="logo">WebApp</a>
|
||||
<a href="#" class="logo">AGI<span>Innovations</span></a>
|
||||
<div class="nav-links">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#features">Capabilities</a>
|
||||
<a href="#about">About</a>
|
||||
<a href="#pricing">Pricing</a>
|
||||
<a href="#solutions">Solutions</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</div>
|
||||
<button class="mobile-menu-btn">
|
||||
|
|
@ -32,15 +32,15 @@
|
|||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<h1>Build Amazing Web Applications</h1>
|
||||
<p>A modern, responsive web application template to kickstart your next project.</p>
|
||||
<h1>The Future of Artificial General Intelligence</h1>
|
||||
<p>Pioneering AGI systems that understand, learn, and adapt to solve complex problems across domains with human-like intelligence.</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#features" class="btn btn-primary">Get Started</a>
|
||||
<a href="#" class="btn btn-secondary">Learn More</a>
|
||||
<a href="#features" class="btn btn-primary">Explore Capabilities</a>
|
||||
<a href="#about" class="btn btn-secondary">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-image">
|
||||
<img src="https://via.placeholder.com/600x400" alt="Web Application Dashboard">
|
||||
<img src="https://images.unsplash.com/photo-1677442135136-760c813a743d?q=80&w=600&auto=format&fit=crop" alt="AGI Neural Network Visualization">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -49,37 +49,37 @@
|
|||
<section id="features" class="features">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Key Features</h2>
|
||||
<p>Everything you need to build modern web applications</p>
|
||||
<h2>AGI Capabilities</h2>
|
||||
<p>Our artificial general intelligence systems offer unprecedented capabilities</p>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-mobile-alt"></i>
|
||||
<i class="fas fa-brain"></i>
|
||||
</div>
|
||||
<h3>Responsive Design</h3>
|
||||
<p>Looks great on all devices, from mobile phones to desktop computers.</p>
|
||||
<h3>Cognitive Reasoning</h3>
|
||||
<p>Advanced reasoning capabilities that allow our AGI to understand context, make inferences, and solve complex problems.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-bolt"></i>
|
||||
<i class="fas fa-robot"></i>
|
||||
</div>
|
||||
<h3>Fast Performance</h3>
|
||||
<p>Optimized for speed and efficiency to provide the best user experience.</p>
|
||||
<h3>Adaptive Learning</h3>
|
||||
<p>Self-improving systems that continuously learn from new data and experiences without explicit programming.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-code"></i>
|
||||
<i class="fas fa-language"></i>
|
||||
</div>
|
||||
<h3>Clean Code</h3>
|
||||
<p>Well-structured, maintainable code following best practices.</p>
|
||||
<h3>Natural Language</h3>
|
||||
<p>Sophisticated language understanding and generation capabilities that enable human-like communication.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-paint-brush"></i>
|
||||
<i class="fas fa-chart-network"></i>
|
||||
</div>
|
||||
<h3>Modern UI</h3>
|
||||
<p>Beautiful, intuitive user interface with smooth animations.</p>
|
||||
<h3>Multi-domain Expertise</h3>
|
||||
<p>Unlike narrow AI, our AGI systems can transfer knowledge across domains and apply learning to new situations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -90,67 +90,96 @@
|
|||
<div class="container">
|
||||
<div class="about-content">
|
||||
<div class="about-text">
|
||||
<h2>About Our Platform</h2>
|
||||
<p>Our web application platform is designed to help developers build amazing applications quickly and efficiently. With a focus on user experience and performance, we provide all the tools you need to succeed.</p>
|
||||
<p>Whether you're building a simple landing page or a complex web application, our platform has you covered with modern features and best practices built in.</p>
|
||||
<a href="#" class="btn btn-primary">Learn More</a>
|
||||
<h2>Pioneering AGI Research</h2>
|
||||
<p>At AGI Innovations, we're dedicated to developing artificial general intelligence that combines the problem-solving abilities of human cognition with the speed and precision of computing.</p>
|
||||
<p>Our interdisciplinary team of researchers and engineers is pushing the boundaries of machine learning, cognitive science, and neuroscience to create AGI systems that can understand, learn, and adapt across diverse domains.</p>
|
||||
<a href="#" class="btn btn-primary">Our Research</a>
|
||||
</div>
|
||||
<div class="about-image">
|
||||
<img src="https://via.placeholder.com/500x400" alt="About Our Platform">
|
||||
<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=500&auto=format&fit=crop" alt="AGI Research Lab">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing Section -->
|
||||
<section id="pricing" class="pricing">
|
||||
<!-- Solutions Section -->
|
||||
<section id="solutions" class="pricing">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Pricing Plans</h2>
|
||||
<p>Choose the perfect plan for your needs</p>
|
||||
<h2>AGI Solutions</h2>
|
||||
<p>Transformative applications of our AGI technology</p>
|
||||
</div>
|
||||
<div class="pricing-grid">
|
||||
<div class="pricing-card">
|
||||
<div class="pricing-header">
|
||||
<h3>Basic</h3>
|
||||
<div class="price">$9<span>/month</span></div>
|
||||
<h3>Healthcare</h3>
|
||||
<div class="solution-icon">
|
||||
<i class="fas fa-heartbeat"></i>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="pricing-features">
|
||||
<li><i class="fas fa-check"></i> 5 Projects</li>
|
||||
<li><i class="fas fa-check"></i> 20GB Storage</li>
|
||||
<li><i class="fas fa-check"></i> Basic Support</li>
|
||||
<li><i class="fas fa-times"></i> Advanced Features</li>
|
||||
<li><i class="fas fa-times"></i> Custom Domain</li>
|
||||
<li><i class="fas fa-check"></i> Medical diagnosis assistance</li>
|
||||
<li><i class="fas fa-check"></i> Drug discovery acceleration</li>
|
||||
<li><i class="fas fa-check"></i> Personalized treatment plans</li>
|
||||
<li><i class="fas fa-check"></i> Healthcare workflow optimization</li>
|
||||
<li><i class="fas fa-check"></i> Predictive patient monitoring</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-outline">Get Started</a>
|
||||
<a href="#" class="btn btn-outline">Learn More</a>
|
||||
</div>
|
||||
<div class="pricing-card featured">
|
||||
<div class="pricing-header">
|
||||
<h3>Pro</h3>
|
||||
<div class="price">$29<span>/month</span></div>
|
||||
<h3>Scientific Research</h3>
|
||||
<div class="solution-icon">
|
||||
<i class="fas fa-atom"></i>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="pricing-features">
|
||||
<li><i class="fas fa-check"></i> 15 Projects</li>
|
||||
<li><i class="fas fa-check"></i> 50GB Storage</li>
|
||||
<li><i class="fas fa-check"></i> Priority Support</li>
|
||||
<li><i class="fas fa-check"></i> Advanced Features</li>
|
||||
<li><i class="fas fa-times"></i> Custom Domain</li>
|
||||
<li><i class="fas fa-check"></i> Complex data analysis</li>
|
||||
<li><i class="fas fa-check"></i> Hypothesis generation</li>
|
||||
<li><i class="fas fa-check"></i> Simulation and modeling</li>
|
||||
<li><i class="fas fa-check"></i> Literature synthesis</li>
|
||||
<li><i class="fas fa-check"></i> Experimental design</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-primary">Get Started</a>
|
||||
<a href="#" class="btn btn-primary">Learn More</a>
|
||||
</div>
|
||||
<div class="pricing-card">
|
||||
<div class="pricing-header">
|
||||
<h3>Enterprise</h3>
|
||||
<div class="price">$99<span>/month</span></div>
|
||||
<h3>Business Intelligence</h3>
|
||||
<div class="solution-icon">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="pricing-features">
|
||||
<li><i class="fas fa-check"></i> Unlimited Projects</li>
|
||||
<li><i class="fas fa-check"></i> 200GB Storage</li>
|
||||
<li><i class="fas fa-check"></i> 24/7 Support</li>
|
||||
<li><i class="fas fa-check"></i> Advanced Features</li>
|
||||
<li><i class="fas fa-check"></i> Custom Domain</li>
|
||||
<li><i class="fas fa-check"></i> Strategic decision support</li>
|
||||
<li><i class="fas fa-check"></i> Market trend prediction</li>
|
||||
<li><i class="fas fa-check"></i> Risk assessment</li>
|
||||
<li><i class="fas fa-check"></i> Process optimization</li>
|
||||
<li><i class="fas fa-check"></i> Competitive intelligence</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-outline">Get Started</a>
|
||||
<a href="#" class="btn btn-outline">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Ethics Section -->
|
||||
<section class="ethics">
|
||||
<div class="container">
|
||||
<div class="ethics-content">
|
||||
<div class="ethics-image">
|
||||
<img src="https://images.unsplash.com/photo-1580894732444-8ecded7900cd?q=80&w=500&auto=format&fit=crop" alt="AGI Ethics">
|
||||
</div>
|
||||
<div class="ethics-text">
|
||||
<h2>Responsible AGI Development</h2>
|
||||
<p>We believe that artificial general intelligence must be developed with strong ethical principles and safeguards. Our approach prioritizes:</p>
|
||||
<ul class="ethics-list">
|
||||
<li><i class="fas fa-shield-alt"></i> <span>Safety and alignment with human values</span></li>
|
||||
<li><i class="fas fa-balance-scale"></i> <span>Fairness and elimination of harmful biases</span></li>
|
||||
<li><i class="fas fa-lock"></i> <span>Privacy protection and data security</span></li>
|
||||
<li><i class="fas fa-users"></i> <span>Transparent and explainable AI systems</span></li>
|
||||
<li><i class="fas fa-globe"></i> <span>Beneficial impact for humanity and the environment</span></li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-primary">Our Ethics Framework</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -160,8 +189,8 @@
|
|||
<section id="contact" class="contact">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Contact Us</h2>
|
||||
<p>Get in touch with our team</p>
|
||||
<h2>Connect With Our AGI Team</h2>
|
||||
<p>Interested in learning more about our AGI research and applications?</p>
|
||||
</div>
|
||||
<div class="contact-content">
|
||||
<div class="contact-form">
|
||||
|
|
@ -174,6 +203,16 @@
|
|||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="interest">Area of Interest</label>
|
||||
<select id="interest" name="interest">
|
||||
<option value="research">AGI Research</option>
|
||||
<option value="applications">Industry Applications</option>
|
||||
<option value="partnership">Partnership Opportunities</option>
|
||||
<option value="careers">Careers</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message">Message</label>
|
||||
<textarea id="message" name="message" rows="5" required></textarea>
|
||||
|
|
@ -185,8 +224,8 @@
|
|||
<div class="info-item">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
<div>
|
||||
<h4>Address</h4>
|
||||
<p>123 Web App Street, San Francisco, CA 94107</p>
|
||||
<h4>Headquarters</h4>
|
||||
<p>123 Innovation Drive, San Francisco, CA 94107</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
|
|
@ -200,7 +239,14 @@
|
|||
<i class="fas fa-envelope"></i>
|
||||
<div>
|
||||
<h4>Email</h4>
|
||||
<p>info@webapp.com</p>
|
||||
<p>info@agiinnovations.ai</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<i class="fas fa-clock"></i>
|
||||
<div>
|
||||
<h4>Research Lab Tours</h4>
|
||||
<p>By appointment only, Monday-Friday</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -213,40 +259,40 @@
|
|||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-logo">
|
||||
<a href="#">WebApp</a>
|
||||
<p>Building the future of web applications.</p>
|
||||
<a href="#">AGI<span>Innovations</span></a>
|
||||
<p>Advancing artificial general intelligence for the benefit of humanity.</p>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<div class="footer-column">
|
||||
<h4>Product</h4>
|
||||
<a href="#">Features</a>
|
||||
<a href="#">Pricing</a>
|
||||
<a href="#">Documentation</a>
|
||||
<a href="#">Updates</a>
|
||||
<h4>Technology</h4>
|
||||
<a href="#">AGI Platform</a>
|
||||
<a href="#">Research Papers</a>
|
||||
<a href="#">Technical Documentation</a>
|
||||
<a href="#">Open Source Projects</a>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h4>Company</h4>
|
||||
<a href="#">About</a>
|
||||
<a href="#">Team</a>
|
||||
<a href="#">About Us</a>
|
||||
<a href="#">Leadership Team</a>
|
||||
<a href="#">Careers</a>
|
||||
<a href="#">Contact</a>
|
||||
<a href="#">Ethics Committee</a>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h4>Resources</h4>
|
||||
<a href="#">Blog</a>
|
||||
<a href="#">Newsletter</a>
|
||||
<a href="#">Case Studies</a>
|
||||
<a href="#">Events</a>
|
||||
<a href="#">Help Center</a>
|
||||
<a href="#">Press Releases</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2023 WebApp. All rights reserved.</p>
|
||||
<p>© 2023 AGI Innovations. All rights reserved.</p>
|
||||
<div class="social-links">
|
||||
<a href="#"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#"><i class="fab fa-instagram"></i></a>
|
||||
<a href="#"><i class="fab fa-linkedin-in"></i></a>
|
||||
<a href="#"><i class="fab fa-github"></i></a>
|
||||
<a href="#"><i class="fab fa-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
mobileNav.style.boxShadow = '0 10px 15px -3px rgba(0, 0, 0, 0.1)';
|
||||
mobileNav.style.display = 'none';
|
||||
mobileNav.style.flexDirection = 'column';
|
||||
mobileNav.style.zIndex = '1000';
|
||||
|
||||
// Style the navigation links in mobile menu
|
||||
navLinksClone.style.display = 'flex';
|
||||
|
|
@ -105,6 +106,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
// Get form values
|
||||
const name = document.getElementById('name').value.trim();
|
||||
const email = document.getElementById('email').value.trim();
|
||||
const interest = document.getElementById('interest').value;
|
||||
const message = document.getElementById('message').value.trim();
|
||||
|
||||
// Simple validation
|
||||
|
|
@ -133,7 +135,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
<div style="text-align: center; padding: 40px 0;">
|
||||
<i class="fas fa-check-circle" style="font-size: 48px; color: #10b981; margin-bottom: 20px;"></i>
|
||||
<h3>Thank You!</h3>
|
||||
<p>Your message has been sent successfully. We'll get back to you soon.</p>
|
||||
<p>Your message has been sent successfully. Our AGI team will get back to you soon.</p>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
|
@ -182,7 +184,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
}
|
||||
|
||||
// Add animation on scroll
|
||||
const animateElements = document.querySelectorAll('.feature-card, .pricing-card, .about-image, .about-text');
|
||||
const animateElements = document.querySelectorAll('.feature-card, .pricing-card, .about-image, .about-text, .ethics-image, .ethics-text');
|
||||
|
||||
// Check if IntersectionObserver is supported
|
||||
if ('IntersectionObserver' in window) {
|
||||
|
|
@ -203,4 +205,122 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
observer.observe(element);
|
||||
});
|
||||
}
|
||||
|
||||
// Typing effect for hero heading
|
||||
const heroHeading = document.querySelector('.hero-content h1');
|
||||
if (heroHeading) {
|
||||
const text = heroHeading.textContent;
|
||||
heroHeading.textContent = '';
|
||||
|
||||
let i = 0;
|
||||
const typeWriter = () => {
|
||||
if (i < text.length) {
|
||||
heroHeading.textContent += text.charAt(i);
|
||||
i++;
|
||||
setTimeout(typeWriter, 50);
|
||||
}
|
||||
};
|
||||
|
||||
// Start the typing effect after a short delay
|
||||
setTimeout(typeWriter, 500);
|
||||
}
|
||||
|
||||
// Particle background effect for hero section
|
||||
const hero = document.querySelector('.hero');
|
||||
if (hero) {
|
||||
// Create canvas element
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.style.position = 'absolute';
|
||||
canvas.style.top = '0';
|
||||
canvas.style.left = '0';
|
||||
canvas.style.width = '100%';
|
||||
canvas.style.height = '100%';
|
||||
canvas.style.pointerEvents = 'none';
|
||||
canvas.style.zIndex = '0';
|
||||
|
||||
// Insert canvas as first child of hero
|
||||
hero.insertBefore(canvas, hero.firstChild);
|
||||
|
||||
// Set canvas size
|
||||
const setCanvasSize = () => {
|
||||
canvas.width = hero.offsetWidth;
|
||||
canvas.height = hero.offsetHeight;
|
||||
};
|
||||
|
||||
setCanvasSize();
|
||||
window.addEventListener('resize', setCanvasSize);
|
||||
|
||||
// Get canvas context
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Particle class
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = Math.random() * 2 + 1;
|
||||
this.speedX = Math.random() * 0.5 - 0.25;
|
||||
this.speedY = Math.random() * 0.5 - 0.25;
|
||||
this.color = `rgba(99, 102, 241, ${Math.random() * 0.3})`;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
|
||||
if (this.x < 0 || this.x > canvas.width) {
|
||||
this.speedX = -this.speedX;
|
||||
}
|
||||
|
||||
if (this.y < 0 || this.y > canvas.height) {
|
||||
this.speedY = -this.speedY;
|
||||
}
|
||||
}
|
||||
|
||||
draw() {
|
||||
ctx.fillStyle = this.color;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
// Create particles
|
||||
const particles = [];
|
||||
const particleCount = Math.floor(canvas.width * canvas.height / 10000);
|
||||
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
|
||||
// Animation loop
|
||||
function animate() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
for (let i = 0; i < particles.length; i++) {
|
||||
particles[i].update();
|
||||
particles[i].draw();
|
||||
|
||||
// Connect particles with lines
|
||||
for (let j = i; j < particles.length; j++) {
|
||||
const dx = particles[i].x - particles[j].x;
|
||||
const dy = particles[i].y - particles[j].y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < 100) {
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = `rgba(99, 102, 241, ${0.1 * (1 - distance / 100)})`;
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.moveTo(particles[i].x, particles[i].y);
|
||||
ctx.lineTo(particles[j].x, particles[j].y);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
}
|
||||
});
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
/* Base Styles */
|
||||
:root {
|
||||
--primary-color: #4f46e5;
|
||||
--primary-dark: #4338ca;
|
||||
--primary-color: #6366f1;
|
||||
--primary-dark: #4f46e5;
|
||||
--secondary-color: #10b981;
|
||||
--dark-color: #1f2937;
|
||||
--light-color: #f9fafb;
|
||||
--gray-color: #6b7280;
|
||||
--light-gray: #e5e7eb;
|
||||
--dark-color: #1e293b;
|
||||
--light-color: #f8fafc;
|
||||
--gray-color: #64748b;
|
||||
--light-gray: #e2e8f0;
|
||||
--danger-color: #ef4444;
|
||||
--success-color: #10b981;
|
||||
--border-radius: 8px;
|
||||
|
|
@ -44,6 +44,7 @@ img {
|
|||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -66,6 +67,19 @@ section {
|
|||
font-size: 2.5rem;
|
||||
margin-bottom: 16px;
|
||||
color: var(--dark-color);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section-header h2::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.section-header p {
|
||||
|
|
@ -96,6 +110,7 @@ section {
|
|||
.btn-primary:hover {
|
||||
background-color: var(--primary-dark);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
|
|
@ -144,6 +159,14 @@ section {
|
|||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
font-weight: 400;
|
||||
color: var(--dark-color);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
|
|
@ -154,12 +177,28 @@ section {
|
|||
.nav-links a {
|
||||
font-weight: 500;
|
||||
transition: var(--transition);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-links a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: var(--primary-color);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.nav-links a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
display: none;
|
||||
background: none;
|
||||
|
|
@ -179,7 +218,20 @@ section {
|
|||
/* Hero Section */
|
||||
.hero {
|
||||
padding: 160px 0 80px;
|
||||
background-color: #f8fafc;
|
||||
background: linear-gradient(to bottom, #f1f5f9, #f8fafc);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236366f1' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.hero .container {
|
||||
|
|
@ -187,6 +239,8 @@ section {
|
|||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
|
|
@ -194,6 +248,9 @@ section {
|
|||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
color: var(--dark-color);
|
||||
background: linear-gradient(to right, var(--dark-color), var(--primary-color));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
|
|
@ -214,11 +271,30 @@ section {
|
|||
.hero-image img {
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.hero-image::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid var(--primary-color);
|
||||
border-radius: var(--border-radius);
|
||||
z-index: -1;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.hero-image:hover img {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features {
|
||||
background-color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
|
|
@ -234,32 +310,45 @@ section {
|
|||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
transition: var(--transition);
|
||||
text-align: center;
|
||||
border: 1px solid var(--light-gray);
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: var(--box-shadow);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background-color: rgba(79, 70, 229, 0.1);
|
||||
background-color: rgba(99, 102, 241, 0.1);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 20px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.feature-card:hover .feature-icon {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.feature-icon i {
|
||||
font-size: 30px;
|
||||
color: var(--primary-color);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.feature-card:hover .feature-icon i {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 15px;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
|
|
@ -268,7 +357,20 @@ section {
|
|||
|
||||
/* About Section */
|
||||
.about {
|
||||
background-color: #f8fafc;
|
||||
background-color: #f1f5f9;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.about::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0) 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
|
|
@ -281,6 +383,7 @@ section {
|
|||
.about-text h2 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 20px;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.about-text p {
|
||||
|
|
@ -291,9 +394,14 @@ section {
|
|||
.about-image img {
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
/* Pricing Section */
|
||||
.about-image:hover img {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* Solutions Section (formerly Pricing) */
|
||||
.pricing {
|
||||
background-color: white;
|
||||
}
|
||||
|
|
@ -312,6 +420,24 @@ section {
|
|||
transition: var(--transition);
|
||||
text-align: center;
|
||||
border: 1px solid var(--light-gray);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pricing-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
|
||||
opacity: 0;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.pricing-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pricing-card.featured {
|
||||
|
|
@ -322,8 +448,17 @@ section {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.pricing-card.featured::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pricing-card:hover {
|
||||
box-shadow: var(--box-shadow);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.pricing-card.featured:hover {
|
||||
transform: scale(1.05) translateY(-10px);
|
||||
}
|
||||
|
||||
.pricing-header {
|
||||
|
|
@ -333,27 +468,34 @@ section {
|
|||
.pricing-header h3 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 15px;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
.solution-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background-color: rgba(99, 102, 241, 0.1);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.solution-icon i {
|
||||
font-size: 30px;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.price span {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: var(--gray-color);
|
||||
}
|
||||
|
||||
.pricing-features {
|
||||
margin-bottom: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pricing-features li {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--light-gray);
|
||||
color: var(--gray-color);
|
||||
}
|
||||
|
||||
.pricing-features li:last-child {
|
||||
|
|
@ -372,9 +514,73 @@ section {
|
|||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
/* Ethics Section */
|
||||
.ethics {
|
||||
background-color: #f1f5f9;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.ethics-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ethics-text h2 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 20px;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.ethics-text p {
|
||||
margin-bottom: 20px;
|
||||
color: var(--gray-color);
|
||||
}
|
||||
|
||||
.ethics-list {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.ethics-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
color: var(--gray-color);
|
||||
}
|
||||
|
||||
.ethics-list i {
|
||||
color: var(--primary-color);
|
||||
font-size: 18px;
|
||||
margin-right: 15px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.ethics-image img {
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
/* Contact Section */
|
||||
.contact {
|
||||
background-color: #f8fafc;
|
||||
background-color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contact::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background-color: var(--dark-color);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.contact .container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.contact-content {
|
||||
|
|
@ -398,10 +604,12 @@ section {
|
|||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--light-gray);
|
||||
|
|
@ -409,13 +617,15 @@ section {
|
|||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
transition: var(--transition);
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
.form-group textarea:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
|
|
@ -438,6 +648,7 @@ section {
|
|||
.info-item h4 {
|
||||
margin-bottom: 5px;
|
||||
font-size: 1.2rem;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.info-item p {
|
||||
|
|
@ -466,6 +677,12 @@ footer {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.footer-logo span {
|
||||
font-weight: 400;
|
||||
opacity: 0.8;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.footer-logo p {
|
||||
color: var(--light-gray);
|
||||
}
|
||||
|
|
@ -480,6 +697,18 @@ footer {
|
|||
font-size: 1.2rem;
|
||||
margin-bottom: 20px;
|
||||
color: white;
|
||||
position: relative;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer-column h4::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.footer-column a {
|
||||
|
|
@ -491,6 +720,7 @@ footer {
|
|||
|
||||
.footer-column a:hover {
|
||||
color: white;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
|
|
@ -529,7 +759,8 @@ footer {
|
|||
/* Responsive Styles */
|
||||
@media (max-width: 992px) {
|
||||
.hero .container,
|
||||
.about-content {
|
||||
.about-content,
|
||||
.ethics-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
|
@ -554,6 +785,14 @@ footer {
|
|||
order: 1;
|
||||
}
|
||||
|
||||
.ethics-text {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.ethics-image {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.contact-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
@ -590,3 +829,28 @@ footer {
|
|||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation classes */
|
||||
.fade-in {
|
||||
animation: fadeIn 1s ease-in-out;
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
animation: slideUp 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
|
@ -32,8 +32,6 @@ export default function ThreadPage({ params }: { params: ThreadParams }) {
|
|||
const [isStreaming, setIsStreaming] = useState(false);
|
||||
const [streamContent, setStreamContent] = useState('');
|
||||
|
||||
const messagesEndRef = useRef<HTMLDivElement | null>(null);
|
||||
const messagesContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
const streamCleanupRef = useRef<(() => void) | null>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
|
||||
const initialLoadCompleted = useRef<boolean>(false);
|
||||
|
|
@ -96,17 +94,6 @@ export default function ThreadPage({ params }: { params: ThreadParams }) {
|
|||
};
|
||||
}, [projectId, threadId, user]);
|
||||
|
||||
|
||||
// Handle user sending a message
|
||||
const handleUserMessageSent = () => {
|
||||
// Create space for agent response
|
||||
setTimeout(() => {
|
||||
if (messagesContainerRef.current) {
|
||||
messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const checkForActiveAgentRuns = async () => {
|
||||
try {
|
||||
// Get agent runs for this thread using the proper API function
|
||||
|
|
@ -150,9 +137,6 @@ export default function ThreadPage({ params }: { params: ThreadParams }) {
|
|||
|
||||
setMessages(prev => [...prev, userMessage]);
|
||||
|
||||
// Scroll to bottom after sending message (ChatGPT style)
|
||||
handleUserMessageSent();
|
||||
|
||||
// Clear the input
|
||||
setNewMessage('');
|
||||
|
||||
|
|
@ -257,9 +241,6 @@ export default function ThreadPage({ params }: { params: ThreadParams }) {
|
|||
|
||||
// Immediately append content as it arrives without forcing scroll
|
||||
setStreamContent(prev => prev + content);
|
||||
|
||||
// Never auto-scroll during streaming - let user control scrolling
|
||||
// This ensures user can freely scroll up and down during streaming
|
||||
},
|
||||
onToolCall: (name: string, args: any) => {
|
||||
console.log('[PAGE] Tool call received:', name, args);
|
||||
|
|
@ -421,38 +402,37 @@ export default function ThreadPage({ params }: { params: ThreadParams }) {
|
|||
<div className="text-zinc-500 text-sm">Thread {thread?.thread_id ? thread.thread_id.slice(0, 8) : '...'}</div>
|
||||
</div>
|
||||
|
||||
{isStreaming && (
|
||||
<div className="flex items-center text-zinc-700 border border-zinc-200 py-1 px-2.5 rounded-full shadow-sm bg-white">
|
||||
<div className="w-1.5 h-1.5 bg-zinc-700 rounded-full animate-pulse mr-2"></div>
|
||||
<span className="text-xs font-medium">Live</span>
|
||||
<div className={`w-1.5 h-1.5 rounded-full mr-2 ${isStreaming ? 'bg-green-500 animate-pulse' : 'bg-red-500'}`}></div>
|
||||
<span className="text-xs font-medium">{isStreaming ? 'Live' : 'Offline'}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={messagesContainerRef}
|
||||
className="flex-1 bg-gray-50 rounded-lg p-4 overflow-y-auto mb-4 border relative"
|
||||
>
|
||||
<div className="flex-1 bg-gray-50 rounded-lg overflow-y-auto mb-4 border relative">
|
||||
<div className="p-4 min-h-full flex flex-col">
|
||||
{messages.length === 0 && !streamContent ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-500">Send a message to start the conversation.</p>
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="text-center py-8 px-4 max-w-md mx-auto">
|
||||
<p className="text-zinc-500 mb-1">Send a message to start the conversation.</p>
|
||||
<p className="text-zinc-400 text-xs">The AI agent will respond automatically.</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-6">
|
||||
{messages.map((message, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
|
||||
>
|
||||
<div
|
||||
className={`max-w-[80%] px-4 py-2 rounded-lg ${
|
||||
className={`max-w-[80%] px-4 py-3 rounded-2xl shadow-sm ${
|
||||
message.role === 'user'
|
||||
? 'bg-zinc-900 text-white rounded-br-none'
|
||||
: 'bg-white border border-gray-200 rounded-bl-none'
|
||||
: 'bg-white border border-zinc-100 rounded-bl-none'
|
||||
}`}
|
||||
>
|
||||
<div className="whitespace-pre-wrap">{message.content}</div>
|
||||
<div className="whitespace-pre-wrap text-sm">{message.content}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -460,8 +440,8 @@ export default function ThreadPage({ params }: { params: ThreadParams }) {
|
|||
{/* Streaming content */}
|
||||
{streamContent && (
|
||||
<div className="flex justify-start">
|
||||
<div className="max-w-[80%] px-4 py-2 rounded-lg bg-white border border-gray-200 rounded-bl-none">
|
||||
<div className="whitespace-pre-wrap">
|
||||
<div className="max-w-[80%] px-4 py-3 rounded-2xl shadow-sm bg-white border border-zinc-100 rounded-bl-none">
|
||||
<div className="whitespace-pre-wrap text-sm">
|
||||
{streamContent}
|
||||
{isStreaming && <span className="inline-block h-4 w-0.5 bg-zinc-800 ml-0.5 animate-pulse"></span>}
|
||||
</div>
|
||||
|
|
@ -471,12 +451,20 @@ export default function ThreadPage({ params }: { params: ThreadParams }) {
|
|||
|
||||
{/* Create space for agent response when running */}
|
||||
{agentStatus === 'running' && !streamContent && (
|
||||
<div className="min-h-[calc(100vh-400px)]" />
|
||||
)}
|
||||
|
||||
<div ref={messagesEndRef} />
|
||||
<div className="flex justify-start">
|
||||
<div className="max-w-[80%] pl-6 rounded-2xl shadow-sm bg-white border border-zinc-100 rounded-bl-none min-h-[2.5rem] min-w-[5rem]">
|
||||
<div className="flex items-center justify-start h-full w-full space-x-1">
|
||||
<div className="w-1.5 h-1.5 bg-zinc-400 rounded-full animate-pulse"></div>
|
||||
<div className="w-1.5 h-1.5 bg-zinc-400 rounded-full animate-pulse delay-150"></div>
|
||||
<div className="w-1.5 h-1.5 bg-zinc-400 rounded-full animate-pulse delay-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmitMessage} className="flex gap-2 items-end relative">
|
||||
|
|
@ -490,7 +478,7 @@ export default function ThreadPage({ params }: { params: ThreadParams }) {
|
|||
? "Agent is thinking..."
|
||||
: "Type your message... (Enter to send, Shift+Enter for new line)"
|
||||
}
|
||||
className="flex-1 min-h-[50px] max-h-[200px] pr-12 resize-none py-3 shadow-sm focus-visible:ring-zinc-500"
|
||||
className="flex-1 min-h-[50px] max-h-[200px] pr-12 resize-none py-3 shadow-sm focus-visible:ring-zinc-500 rounded-xl"
|
||||
disabled={isSending || agentStatus === 'running'}
|
||||
rows={1}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue