Hugging Face's logo

Spaces:
aimeow
/
ai-chat-interface
Running

App Files Community
ai-chat-interface
File size: 10,826 Bytes 
ad61268
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
 
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Chat Interface</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1', // Indigo-500
                        secondary: '#1e293b', // Slate-800
                        dark: '#0f172a', // Slate-900
                        lighter: '#334155', // Slate-700
                    }
                }
            }
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-gray-50 dark:bg-dark text-gray-800 dark:text-gray-100 h-screen overflow-hidden flex transition-colors duration-300">

    <!-- Mobile Header -->
    <div class="md:hidden fixed top-0 left-0 right-0 h-16 bg-white dark:bg-secondary border-b border-gray-200 dark:border-gray-700 flex items-center justify-between px-4 z-50">
        <button id="mobile-menu-btn" class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-lighter">
            <i data-feather="menu"></i>
        </button>
        <span class="font-bold text-lg text-primary">AI Chat</span>
        <div class="w-8"></div> <!-- Spacer -->
    </div>

    <!-- Sidebar -->
    <aside id="sidebar" class="fixed inset-y-0 left-0 transform -translate-x-full md:translate-x-0 w-64 bg-white dark:bg-secondary border-r border-gray-200 dark:border-gray-700 flex flex-col transition-transform duration-300 z-40 h-full pt-16 md:pt-0">
        
        <!-- New Chat Button -->
        <div class="p-4 border-b border-gray-200 dark:border-gray-700">
            <button onclick="window.location.reload()" class="w-full flex items-center justify-center gap-2 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-lighter transition-colors text-sm font-medium">
                <i data-feather="plus" class="w-4 h-4"></i>
                New Chat
            </button>
        </div>

        <!-- History List (Scrollable) -->
        <div class="flex-1 overflow-y-auto p-3 space-y-2 custom-scrollbar">
            <div class="text-xs font-semibold text-gray-500 dark:text-gray-400 px-2 mb-2 uppercase tracking-wider">Today</div>
            <button class="w-full text-left px-3 py-2 rounded-md bg-gray-100 dark:bg-lighter text-sm truncate flex items-center gap-3">
                <i data-feather="message-square" class="w-4 h-4 opacity-50"></i>
                <span class="truncate">Quantum Physics Explanation</span>
            </button>
            <button class="w-full text-left px-3 py-2 rounded-md hover:bg-gray-50 dark:hover:bg-lighter text-sm truncate flex items-center gap-3 text-gray-600 dark:text-gray-300">
                <i data-feather="message-square" class="w-4 h-4 opacity-50"></i>
                <span class="truncate">React Component Ideas</span>
            </button>
            <button class="w-full text-left px-3 py-2 rounded-md hover:bg-gray-50 dark:hover:bg-lighter text-sm truncate flex items-center gap-3 text-gray-600 dark:text-gray-300">
                <i data-feather="message-square" class="w-4 h-4 opacity-50"></i>
                <span class="truncate">Code Refactoring Tips</span>
            </button>
        </div>

        <!-- User Profile / Settings -->
        <div class="p-3 border-t border-gray-200 dark:border-gray-700">
            <button class="w-full flex items-center gap-3 px-3 py-2 rounded-md hover:bg-gray-50 dark:hover:bg-lighter transition-colors">
                <div class="w-8 h-8 rounded-full bg-gradient-to-tr from-primary to-purple-500 flex items-center justify-center text-white text-xs font-bold">
                    JS
                </div>
                <div class="flex-1 text-sm font-medium text-left">John Smith</div>
                <i data-feather="settings" class="w-4 h-4 text-gray-500"></i>
            </button>
        </div>
    </aside>

    <!-- Overlay for mobile sidebar -->
    <div id="sidebar-overlay" class="fixed inset-0 bg-black/50 z-30 hidden md:hidden opacity-0 transition-opacity duration-300"></div>

    <!-- Main Chat Area -->
    <main class="flex-1 flex flex-col h-full relative ml-0 md:ml-64 pt-16 md:pt-0">
        
        <!-- Mobile padding spacer -->
        <div class="md:hidden h-16"></div>

        <!-- Chat Container -->
        <div id="chat-container" class="flex-1 overflow-y-auto p-4 md:p-8 space-y-6 custom-scrollbar scroll-smooth">
            
            <!-- Welcome Screen (Hidden when chat starts) -->
            <div id="welcome-screen" class="h-full flex flex-col items-center justify-center text-center space-y-6 pb-20">
                <div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center text-primary mb-4">
                    <i data-feather="cpu" class="w-8 h-8"></i>
                </div>
                <h1 class="text-3xl font-bold text-gray-800 dark:text-white">How can I help you today?</h1>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-2xl px-4">
                    <button onclick="fillInput('Explain quantum computing in simple terms')" class="p-4 bg-white dark:bg-secondary border border-gray-200 dark:border-gray-700 rounded-xl hover:border-primary dark:hover:border-primary hover:shadow-lg transition-all text-left group">
                        <div class="text-primary mb-2 group-hover:scale-110 transition-transform"><i data-feather="book-open" class="w-5 h-5"></i></div>
                        <div class="font-medium">Explain quantum computing</div>
                        <div class="text-sm text-gray-500">in simple terms</div>
                    </button>
                    <button onclick="fillInput('Write a Python script to automate daily reports')" class="p-4 bg-white dark:bg-secondary border border-gray-200 dark:border-gray-700 rounded-xl hover:border-primary dark:hover:border-primary hover:shadow-lg transition-all text-left group">
                        <div class="text-primary mb-2 group-hover:scale-110 transition-transform"><i data-feather="code" class="w-5 h-5"></i></div>
                        <div class="font-medium">Write a Python script</div>
                        <div class="text-sm text-gray-500">to automate daily reports</div>
                    </button>
                    <button onclick="fillInput('Brainstorm creative ideas for a birthday')" class="p-4 bg-white dark:bg-secondary border border-gray-200 dark:border-gray-700 rounded-xl hover:border-primary dark:hover:border-primary hover:shadow-lg transition-all text-left group">
                        <div class="text-primary mb-2 group-hover:scale-110 transition-transform"><i data-feather="gift" class="w-5 h-5"></i></div>
                        <div class="font-medium">Birthday ideas</div>
                        <div class="text-sm text-gray-500">creative and fun</div>
                    </button>
                    <button onclick="fillInput('Translate the following text to French')" class="p-4 bg-white dark:bg-secondary border border-gray-200 dark:border-gray-700 rounded-xl hover:border-primary dark:hover:border-primary hover:shadow-lg transition-all text-left group">
                        <div class="text-primary mb-2 group-hover:scale-110 transition-transform"><i data-feather="globe" class="w-5 h-5"></i></div>
                        <div class="font-medium">Translate text</div>
                        <div class="text-sm text-gray-500">to French, Spanish, etc.</div>
                    </button>
                </div>
            </div>

            <!-- Messages will be injected here -->
            <div id="messages-wrapper" class="hidden space-y-6 pb-4">
                <!-- Example Assistant Message -->
                <div class="flex gap-4 max-w-4xl mx-auto">
                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-green-400 to-blue-500 flex-shrink-0 flex items-center justify-center text-white text-xs">
                        AI
                    </div>
                    <div class="flex-1 space-y-2">
                        <p class="font-medium text-sm text-gray-900 dark:text-gray-100">Assistant</p>
                        <div class="prose dark:prose-invert max-w-none text-gray-700 dark:text-gray-300 leading-7">
                            <p>Hello! I am your AI assistant. How can I help you today?</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Input Area -->
        <div class="bg-gradient-to-t from-gray-50 dark:from-dark via-gray-50 dark:via-dark to-transparent pt-10 pb-6 px-4 absolute bottom-0 w-full">
            <div class="max-w-4xl mx-auto">
                <div class="relative flex items-end gap-2 bg-white dark:bg-secondary border border-gray-300 dark:border-gray-700 rounded-2xl shadow-sm p-2 focus-within:ring-2 focus-within:ring-primary/50 focus-within:border-primary transition-all">
                    <button class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors rounded-xl hover:bg-gray-100 dark:hover:bg-lighter">
                        <i data-feather="plus-circle" class="w-5 h-5"></i>
                    </button>
                    <textarea 
                        id="chat-input" 
                        rows="1" 
                        placeholder="Send a message..." 
                        class="w-full bg-transparent border-none focus:ring-0 resize-none max-h-32 py-3 text-gray-800 dark:text-white placeholder-gray-400"
                        oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
                        onkeydown="handleEnter(event)"
                    ></textarea>
                    <button 
                        id="send-btn"
                        class="p-2 bg-primary text-white rounded-xl hover:bg-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-md hover:shadow-lg flex-shrink-0 mb-1"
                        onclick="sendMessage()"
                    >
                        <i data-feather="send" class="w-5 h-5"></i>
                    </button>
                </div>
                <p class="text-xs text-center text-gray-400 mt-2">AI can make mistakes. Consider checking important information.</p>
            </div>
        </div>

    </main>

    <script src="script.js"></script>
    <script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>