Spaces:

asoni9
/

canHealUI

Sleeping

App Files Files Community

gpt-engineer-app[bot] commited on Sep 28, 2025

Commit

fee5554

1 Parent(s): 569f6fb

feat: Design chatbot UI

Browse files

Files changed (9) hide show

index.html +5 -5
src/components/chat/ChatHeader.tsx +17 -0
src/components/chat/ChatInput.tsx +44 -0
src/components/chat/ChatWindow.tsx +93 -0
src/components/chat/MessageBubble.tsx +60 -0
src/components/chat/QuickActions.tsx +28 -0
src/index.css +130 -51
src/pages/Index.tsx +3 -6
tailwind.config.ts +27 -0

index.html CHANGED Viewed

@@ -3,12 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>message-bloom-kit</title>
-    <meta name="description" content="Lovable Generated Project" />
-    <meta name="author" content="Lovable" />
-    <meta property="og:title" content="message-bloom-kit" />
-    <meta property="og:description" content="Lovable Generated Project" />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />

   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AI Chat Assistant - Modern Chatbot Interface</title>
+    <meta name="description" content="A beautiful, modern chatbot interface with smooth animations and responsive design. Experience seamless AI conversations with an elegant user interface." />
+    <meta name="author" content="AI Chat Assistant" />
+    <meta property="og:title" content="AI Chat Assistant - Modern Chatbot Interface" />
+    <meta property="og:description" content="A beautiful, modern chatbot interface with smooth animations and responsive design. Experience seamless AI conversations with an elegant user interface." />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />

src/components/chat/ChatHeader.tsx ADDED Viewed

	@@ -0,0 +1,17 @@

+import { MessageCircle } from "lucide-react";
+const ChatHeader = () => {
+  return (
+    <header className="bg-header-bg border-b border-header-border px-4 py-3 flex items-center gap-3 header-shadow">
+      <div className="w-8 h-8 bg-avatar-bg rounded-full flex items-center justify-center">
+        <MessageCircle className="w-4 h-4 text-avatar-fg" />
+      </div>
+      <div>
+        <h1 className="text-header-fg font-semibold text-lg">AI Assistant</h1>
+        <p className="text-muted-foreground text-xs">Always here to help</p>
+      </div>
+    </header>
+  );
+};
+export default ChatHeader;

src/components/chat/ChatInput.tsx ADDED Viewed

	@@ -0,0 +1,44 @@

+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Send } from "lucide-react";
+interface ChatInputProps {
+  onSendMessage: (message: string) => void;
+  disabled?: boolean;
+}
+const ChatInput = ({ onSendMessage, disabled = false }: ChatInputProps) => {
+  const [message, setMessage] = useState("");
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (message.trim() && !disabled) {
+      onSendMessage(message.trim());
+      setMessage("");
+    }
+  };
+  return (
+    <div className="bg-header-bg border-t border-header-border p-4 input-shadow">
+      <form onSubmit={handleSubmit} className="flex gap-2">
+        <Input
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          placeholder="Type your message..."
+          disabled={disabled}
+          className="flex-1 bg-input-bg border-input-border focus:border-input-focus-border text-sm py-3 px-4 rounded-xl"
+        />
+        <Button
+          type="submit"
+          disabled={!message.trim() || disabled}
+          className="send-button-gradient text-send-button-fg hover:opacity-90 transition-opacity rounded-xl px-4 py-3 min-w-[44px]"
+        >
+          <Send className="w-4 h-4" />
+        </Button>
+      </form>
+    </div>
+  );
+};
+export default ChatInput;

src/components/chat/ChatWindow.tsx ADDED Viewed

	@@ -0,0 +1,93 @@

+import { useEffect, useRef, useState } from "react";
+import ChatHeader from "./ChatHeader";
+import MessageBubble from "./MessageBubble";
+import QuickActions from "./QuickActions";
+import ChatInput from "./ChatInput";
+interface Message {
+  id: string;
+  text: string;
+  isUser: boolean;
+  timestamp: string;
+  quickActions?: string[];
+}
+const ChatWindow = () => {
+  const [messages, setMessages] = useState<Message[]>([
+    {
+      id: "1",
+      text: "Hello! I'm your AI assistant. How can I help you today?",
+      isUser: false,
+      timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+      quickActions: ["Get started", "Learn more", "Contact support"]
+    }
+  ]);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+  const handleSendMessage = (text: string) => {
+    const newMessage: Message = {
+      id: Date.now().toString(),
+      text,
+      isUser: true,
+      timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+    };
+    setMessages(prev => [...prev, newMessage]);
+    // Simulate bot response
+    setTimeout(() => {
+      const botResponse: Message = {
+        id: (Date.now() + 1).toString(),
+        text: "Thank you for your message! I'm processing your request and will provide a helpful response shortly.",
+        isUser: false,
+        timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+        quickActions: ["Tell me more", "That's helpful", "Start over"]
+      };
+      setMessages(prev => [...prev, botResponse]);
+    }, 1000);
+  };
+  const handleQuickAction = (action: string) => {
+    handleSendMessage(action);
+  };
+  return (
+    <div className="flex flex-col h-screen max-w-4xl mx-auto bg-background">
+      <ChatHeader />
+      <div className="flex-1 bg-chat-bg overflow-y-auto chat-scrollbar">
+        <div className="p-4">
+          {messages.map((message, index) => (
+            <div key={message.id}>
+              <MessageBubble
+                message={message.text}
+                isUser={message.isUser}
+                timestamp={message.timestamp}
+              />
+              {message.quickActions && index === messages.length - 1 && (
+                <QuickActions
+                  actions={message.quickActions}
+                  onActionClick={handleQuickAction}
+                />
+              )}
+            </div>
+          ))}
+          <div ref={messagesEndRef} />
+        </div>
+      </div>
+      <ChatInput onSendMessage={handleSendMessage} />
+    </div>
+  );
+};
+export default ChatWindow;

src/components/chat/MessageBubble.tsx ADDED Viewed

	@@ -0,0 +1,60 @@

+import { cn } from "@/lib/utils";
+import { User, Bot } from "lucide-react";
+interface MessageBubbleProps {
+  message: string;
+  isUser: boolean;
+  timestamp: string;
+  avatar?: string;
+}
+const MessageBubble = ({ message, isUser, timestamp, avatar }: MessageBubbleProps) => {
+  return (
+    <div className={cn(
+      "flex gap-3 mb-4 message-fade-in",
+      isUser ? "justify-end" : "justify-start"
+    )}>
+      {!isUser && (
+        <div className="w-8 h-8 bg-avatar-bg rounded-full flex items-center justify-center flex-shrink-0 mt-1">
+          {avatar ? (
+            <img src={avatar} alt="Bot" className="w-8 h-8 rounded-full" />
+          ) : (
+            <Bot className="w-4 h-4 text-avatar-fg" />
+          )}
+        </div>
+      )}
+      <div className={cn(
+        "max-w-[85%] sm:max-w-[70%]",
+        isUser ? "order-first" : ""
+      )}>
+        <div className={cn(
+          "px-4 py-3 rounded-xl message-shadow",
+          isUser
+            ? "user-message-gradient text-user-message-fg rounded-br-sm"
+            : "bg-bot-message-bg text-bot-message-fg border border-bot-message-border rounded-bl-sm"
+        )}>
+          <p className="text-sm leading-relaxed whitespace-pre-wrap">{message}</p>
+        </div>
+        <p className={cn(
+          "text-xs text-muted-foreground mt-1 px-1",
+          isUser ? "text-right" : "text-left"
+        )}>
+          {timestamp}
+        </p>
+      </div>
+      {isUser && (
+        <div className="w-8 h-8 bg-user-gradient-start rounded-full flex items-center justify-center flex-shrink-0 mt-1">
+          {avatar ? (
+            <img src={avatar} alt="User" className="w-8 h-8 rounded-full" />
+          ) : (
+            <User className="w-4 h-4 text-user-message-fg" />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+export default MessageBubble;

src/components/chat/QuickActions.tsx ADDED Viewed

	@@ -0,0 +1,28 @@

+import { Button } from "@/components/ui/button";
+interface QuickActionsProps {
+  actions: string[];
+  onActionClick: (action: string) => void;
+}
+const QuickActions = ({ actions, onActionClick }: QuickActionsProps) => {
+  if (!actions.length) return null;
+  return (
+    <div className="flex flex-wrap gap-2 mb-4 pl-11">
+      {actions.map((action, index) => (
+        <Button
+          key={index}
+          variant="outline"
+          size="sm"
+          onClick={() => onActionClick(action)}
+          className="bg-quick-action-bg text-quick-action-fg border-quick-action-border hover:bg-quick-action-hover transition-colors text-xs px-3 py-1 h-auto rounded-full"
+        >
+          {action}
+        </Button>
+      ))}
+    </div>
+  );
+};
+export default QuickActions;

src/index.css CHANGED Viewed

@@ -2,84 +2,105 @@
 @tailwind components;
 @tailwind utilities;
-/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
-All colors MUST be HSL.
-*/
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
     --sidebar-background: 0 0% 98%;
     --sidebar-foreground: 240 5.3% 26.1%;
     --sidebar-primary: 240 5.9% 10%;
     --sidebar-primary-foreground: 0 0% 98%;
     --sidebar-accent: 240 4.8% 95.9%;
     --sidebar-accent-foreground: 240 5.9% 10%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
@@ -100,6 +121,64 @@ All colors MUST be HSL.
   }
   body {
-    @apply bg-background text-foreground;
   }
 }

 @tailwind components;
 @tailwind utilities;
+/* Chatbot UI Design System - Modern, clean, and professional */
 @layer base {
   :root {
+    /* Main backgrounds and surfaces */
+    --background: 248 250 252; /* slate-50 - main app background */
+    --foreground: 215 28% 17%; /* slate-800 - primary text */
+    /* Chat specific backgrounds */
+    --chat-background: 241 245 249; /* slate-100 - chat area background */
+    --message-background: 0 0% 100%; /* white - bot message cards */
+    /* User message gradient - blue to purple */
+    --user-gradient-start: 217 91% 60%; /* blue-500 */
+    --user-gradient-end: 251 91% 68%; /* purple-500 */
+    --user-message-foreground: 0 0% 100%; /* white text */
+    /* Bot message styling */
+    --bot-message-background: 0 0% 100%; /* white */
+    --bot-message-foreground: 215 25% 27%; /* slate-700 */
+    --bot-message-border: 220 13% 91%; /* slate-200 */
+    /* Input and interactive elements */
+    --input-background: 0 0% 100%; /* white */
+    --input-border: 220 13% 91%; /* slate-200 */
+    --input-focus-border: 217 91% 60%; /* blue-500 */
+    /* Send button gradient */
+    --send-button-start: 217 91% 60%; /* blue-500 */
+    --send-button-end: 251 91% 68%; /* purple-500 */
+    --send-button-foreground: 0 0% 100%; /* white */
+    /* Header styling */
+    --header-background: 0 0% 100%; /* white */
+    --header-foreground: 215 28% 17%; /* slate-800 */
+    --header-border: 220 13% 91%; /* slate-200 */
+    /* Quick actions */
+    --quick-action-background: 248 250 252; /* slate-50 */
+    --quick-action-foreground: 215 25% 27%; /* slate-700 */
+    --quick-action-hover: 241 245 249; /* slate-100 */
+    --quick-action-border: 220 13% 91%; /* slate-200 */
+    /* Avatars and accents */
+    --avatar-background: 217 91% 60%; /* blue-500 */
+    --avatar-foreground: 0 0% 100%; /* white */
+    /* Shadows and effects */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    /* Animations and transitions */
+    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --animation-bounce-in: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    /* Legacy compatibility */
+    --card: var(--message-background);
+    --card-foreground: var(--bot-message-foreground);
+    --primary: var(--user-gradient-start);
+    --primary-foreground: var(--user-message-foreground);
+    --secondary: var(--quick-action-background);
+    --secondary-foreground: var(--quick-action-foreground);
+    --muted: var(--chat-background);
+    --muted-foreground: 215 16% 47%; /* slate-500 */
+    --accent: var(--quick-action-hover);
+    --accent-foreground: var(--quick-action-foreground);
+    --border: var(--input-border);
+    --input: var(--input-background);
+    --ring: var(--input-focus-border);
+    --radius: 0.75rem; /* More rounded for modern look */
+    /* Sidebar (keeping existing) */
     --sidebar-background: 0 0% 98%;
     --sidebar-foreground: 240 5.3% 26.1%;
     --sidebar-primary: 240 5.9% 10%;
     --sidebar-primary-foreground: 0 0% 98%;
     --sidebar-accent: 240 4.8% 95.9%;
     --sidebar-accent-foreground: 240 5.9% 10%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
   .dark {
+    /* Dark mode - keeping light theme for now, focusing on the chatbot experience */
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
   body {
+    @apply bg-background text-foreground font-sans;
+  }
+}
+@layer components {
+  /* Chat message animations */
+  .message-fade-in {
+    animation: messageSlideIn 0.3s ease-out;
+  }
+  .user-message-gradient {
+    background: linear-gradient(135deg, hsl(var(--user-gradient-start)), hsl(var(--user-gradient-end)));
+  }
+  .send-button-gradient {
+    background: linear-gradient(135deg, hsl(var(--send-button-start)), hsl(var(--send-button-end)));
+  }
+  .chat-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--border)) transparent;
+  }
+  .chat-scrollbar::-webkit-scrollbar {
+    width: 6px;
+  }
+  .chat-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .chat-scrollbar::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--border));
+    border-radius: 3px;
+  }
+}
+@layer utilities {
+  .message-shadow {
+    box-shadow: var(--shadow-sm);
+  }
+  .input-shadow {
+    box-shadow: var(--shadow-md);
+  }
+  .header-shadow {
+    box-shadow: var(--shadow-sm);
+  }
+}
+@keyframes messageSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
   }
 }

src/pages/Index.tsx CHANGED Viewed

@@ -1,12 +1,9 @@
-// Update this page (the content is just a fallback if you fail to update the page)
 const Index = () => {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background">
-      <div className="text-center">
-        <h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
-        <p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
-      </div>
     </div>
   );
 };

+import ChatWindow from "@/components/chat/ChatWindow";
 const Index = () => {
   return (
+    <div className="min-h-screen bg-background">
+      <ChatWindow />
     </div>
   );
 };

tailwind.config.ts CHANGED Viewed

@@ -19,6 +19,33 @@ export default {
         ring: "hsl(var(--ring))",
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
         primary: {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",

         ring: "hsl(var(--ring))",
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
+        /* Chat-specific colors */
+        "chat-bg": "hsl(var(--chat-background))",
+        "message-bg": "hsl(var(--message-background))",
+        "user-gradient-start": "hsl(var(--user-gradient-start))",
+        "user-gradient-end": "hsl(var(--user-gradient-end))",
+        "user-message-fg": "hsl(var(--user-message-foreground))",
+        "bot-message-bg": "hsl(var(--bot-message-background))",
+        "bot-message-fg": "hsl(var(--bot-message-foreground))",
+        "bot-message-border": "hsl(var(--bot-message-border))",
+        "input-bg": "hsl(var(--input-background))",
+        "input-border": "hsl(var(--input-border))",
+        "input-focus-border": "hsl(var(--input-focus-border))",
+        "send-button-start": "hsl(var(--send-button-start))",
+        "send-button-end": "hsl(var(--send-button-end))",
+        "send-button-fg": "hsl(var(--send-button-foreground))",
+        "header-bg": "hsl(var(--header-background))",
+        "header-fg": "hsl(var(--header-foreground))",
+        "header-border": "hsl(var(--header-border))",
+        "quick-action-bg": "hsl(var(--quick-action-background))",
+        "quick-action-fg": "hsl(var(--quick-action-foreground))",
+        "quick-action-hover": "hsl(var(--quick-action-hover))",
+        "quick-action-border": "hsl(var(--quick-action-border))",
+        "avatar-bg": "hsl(var(--avatar-background))",
+        "avatar-fg": "hsl(var(--avatar-foreground))",
+        /* Legacy compatibility */
         primary: {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",