106 lines
3.2 KiB
Svelte
106 lines
3.2 KiB
Svelte
<!-- Telegram-like UI in Svelte with Tailwind -->
|
|
<script lang="ts">
|
|
import { invoke } from '@tauri-apps/api/core';
|
|
|
|
let currentChat = 'John Doe';
|
|
let message = '';
|
|
let messages = [
|
|
{ id: 1, text: 'Hey there!', own: false },
|
|
{ id: 2, text: 'Hi! How are you?', own: true },
|
|
{ id: 3, text: "I'm doing great, thanks for asking!", own: false }
|
|
];
|
|
|
|
let chats = [
|
|
{ name: 'John Doe', preview: 'Hey, how are you?', active: true },
|
|
{ name: 'Alice Smith', preview: 'See you tomorrow!', active: false },
|
|
{ name: 'Bob Wilson', preview: 'Thanks for the help!', active: false }
|
|
];
|
|
|
|
async function sendMessage() {
|
|
if (!message.trim()) return;
|
|
|
|
messages = [...messages, {
|
|
id: Date.now(),
|
|
text: message,
|
|
own: true
|
|
}];
|
|
|
|
// Call Tauri backend
|
|
try {
|
|
await invoke('send_message', { content: message });
|
|
} catch (error) {
|
|
console.error('Failed to send message:', error);
|
|
}
|
|
|
|
message = '';
|
|
}
|
|
|
|
function selectChat(chatName: string) {
|
|
chats = chats.map(chat => ({
|
|
...chat,
|
|
active: chat.name === chatName
|
|
}));
|
|
currentChat = chatName;
|
|
}
|
|
</script>
|
|
|
|
<div class="flex h-screen bg-slate-900">
|
|
<!-- Sidebar -->
|
|
<div class="w-80 bg-slate-800 text-white border-r border-slate-700">
|
|
<!-- Sidebar Header -->
|
|
<div class="p-5 border-b border-slate-700">
|
|
<h3 class="text-lg font-semibold">Chats</h3>
|
|
</div>
|
|
|
|
<!-- Chat List -->
|
|
<div class="overflow-y-auto h-[calc(100vh-80px)]">
|
|
{#each chats as chat}
|
|
<button
|
|
class="px-5 w-full text-start py-3 border-b border-slate-700 cursor-pointer hover:bg-slate-700 transition-colors {chat.active ? 'bg-slate-700' : ''}"
|
|
on:click={() => selectChat(chat.name)}
|
|
tabindex="0"
|
|
>
|
|
<div class="font-medium mb-1">{chat.name}</div>
|
|
<div class="text-gray-400 text-sm">{chat.preview}</div>
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Chat Area -->
|
|
<div class="flex-1 flex flex-col bg-slate-900">
|
|
<!-- Chat Header -->
|
|
<div class="p-4 bg-slate-800 border-b border-slate-700 text-white">
|
|
<h3 class="text-lg font-semibold">{currentChat}</h3>
|
|
</div>
|
|
|
|
<!-- Messages -->
|
|
<div class="flex-1 p-5 overflow-y-auto bg-slate-900">
|
|
{#each messages as msg}
|
|
<div class="mb-4 max-w-[70%] {msg.own ? 'ml-auto text-right' : ''}">
|
|
<div class="inline-block px-3 py-2 rounded-xl text-white {msg.own ? 'bg-blue-600' : 'bg-slate-700'}">
|
|
{msg.text}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<!-- Input Area -->
|
|
<div class="p-4 bg-slate-800 border-t border-slate-700 flex gap-3">
|
|
<input
|
|
type="text"
|
|
bind:value={message}
|
|
on:keydown={(e) => e.key === 'Enter' && sendMessage()}
|
|
placeholder="Type a message..."
|
|
class="flex-1 px-4 py-2 bg-slate-900 border border-slate-600 rounded-full text-white placeholder-gray-400 outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
<button
|
|
on:click={sendMessage}
|
|
class="w-10 h-10 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition-colors flex items-center justify-center"
|
|
>
|
|
→
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|