-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
151 lines (140 loc) · 9.73 KB
/
Copy pathindex.html
File metadata and controls
151 lines (140 loc) · 9.73 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Chat Demo | restsend.com</title>
<script src="https://cdn.tailwindcss.com"></script>
<script type="module" src="./demo.js">
</script>
</head>
<body class="bg-gray-100 h-screen flex" id="app" x-data="demoapp">
<div class="flex flex-col w-56 shrink-0 truncate bg-white border-r border-gray-300">
<div class="p-4 border-b border-gray-300">
<h2 class="text-lg font-semibold">Accounts</h2>
</div>
<ul class="flex-1 overflow-y-auto">
<li class="p-4 border-b border-gray-300 cursor-pointer hover:bg-gray-200" @click="startApp('alice')"
:class="{ 'bg-gray-300': client && /alice/i.test(client.myId) }">Alice</li>
<li class="p-4 border-b border-gray-300 cursor-pointer hover:bg-gray-200" @click="startApp('bob')"
:class="{ 'bg-gray-300': client && /bob/i.test(client.myId) }">Bob</li>
<li class="p-4 border-b border-gray-300 cursor-pointer hover:bg-gray-200" @click="startApp()"
:class="{ 'bg-gray-300': client && /guest-demo/i.test(client.myId) }">Guest</li>
<li class="p-4 border-b border-gray-300 cursor-pointer hover:bg-gray-200" @click="startApp(undefined, true)"
:class="{ 'bg-gray-300': client && /guest-random/i.test(client.myId) }">Guest(Random)</li>
</ul>
</div>
<div class="flex flex-col w-64 border-r shrink-0 border-gray-300">
<div class="p-4 border-gray-300">
<h2 class="text-lg font-semibold">Conversation</h2>
</div>
<ul class="flex-1 overflow-y-auto shrink-0">
<template x-for="item in conversations" :key="item.topicId">
<li class="px-4 py-3 border-b border-gray-300 hover:bg-gray-200 cursor-pointer flex justify-between text-sm"
@click="chatWith(item)" :class="{ 'bg-gray-200': current && current.topicId === item.topicId }">
<div>
<div><span x-text="item.name"></span></div>
<div>
<span x-text="item.topicId"></span>
<span class="px-2 text-gray-300" x-text="'('+item.lastSeq+')'"></span>
</div>
</div>
<div>
<span x-show="item.unread > 0" x-text="item.unread"
class="bg-red-500 text-white rounded-full px-1"></span>
<span x-show="item.typing" class="bg-gray-500 text-white rounded-full px-2">⌨️</span>
</div>
</li>
</template>
</ul>
</div>
<div class="flex flex-col flex-grow flex-wrap border-r border-gray-300">
<div class="flex-1 p-4 overflow-y-auto" id="chatbox" @scrollend="onScrollMessages($event)">
<template x-for="item in messages" :key="item.chatId">
<div class="mb-4 group/item" :class="{ 'text-right': item.isSentByMe }" x-show="item.readable">
<div class="flex items-end gap-x-2" :class="[item.isSentByMe?'justify-end ml-10': 'mr-10' ]">
<div class="bg-blue-100 p-2 rounded-lg inline-block text-sm"
:class="[ item.isSentByMe ?'bg-green-100 order-1': 'bg-blue-100 order-2' ]"
:id="'chat-item-'+item.chatId" x-html="renderLog(item)"></div>
<span
class="invisible group-hover/item:visible gap-2 text-xs text-gray-500 flex items-center gap-x-1 bg-gray-50 rounded px-2 py-1"
:class="[ item.isSentByMe ?'': 'order-2' ]">
<span x-show="item.isSentByMe && item?.content?.type !=='recalled'"
class="cursor-pointer hover:text-gray-700" @click="doRecallMessage(item)">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path fill="currentColor"
d="M20 13.5V20h-2v-6.5C18 11 16 9 13.5 9H7.83l3.08 3.09L9.5 13.5L4 8l5.5-5.5l1.42 1.41L7.83 7h5.67a6.5 6.5 0 0 1 6.5 6.5" />
</svg>
</span>
<span x-show="item?.content?.type !=='recalled'" class="cursor-pointer hover:text-gray-700"
@click="doQuoteMessage(item)">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path fill="currentColor"
d="M21 3a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6.455L2 22.5V4a1 1 0 0 1 1-1zm-1 2H4v13.385L5.763 17H20zm-9.485 2.412l.447.688c-1.668.903-1.639 2.352-1.639 2.665c.155-.022.318-.025.48-.01a1.76 1.76 0 0 1 1.613 1.745a1.75 1.75 0 0 1-1.75 1.75c-.537 0-1.05-.245-1.374-.59c-.515-.546-.792-1.16-.792-2.155c0-1.75 1.228-3.318 3.015-4.093m5 0l.447.688c-1.668.903-1.639 2.352-1.639 2.665c.155-.022.318-.025.48-.01a1.76 1.76 0 0 1 1.613 1.745a1.75 1.75 0 0 1-1.75 1.75c-.537 0-1.05-.245-1.374-.59c-.515-.546-.792-1.16-.792-2.155c0-1.75 1.228-3.318 3.015-4.093" />
</svg>
</span>
<span class="cursor-pointer hover:text-red-500" @click="doDeleteMessage(item)">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path fill="currentColor"
d="M7 21q-.825 0-1.412-.587T5 19V6q-.425 0-.712-.288T4 5t.288-.712T5 4h4q0-.425.288-.712T10 3h4q.425 0 .713.288T15 4h4q.425 0 .713.288T20 5t-.288.713T19 6v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zm-7 11q.425 0 .713-.288T11 16V9q0-.425-.288-.712T10 8t-.712.288T9 9v7q0 .425.288.713T10 17m4 0q.425 0 .713-.288T15 16V9q0-.425-.288-.712T14 8t-.712.288T13 9v7q0 .425.288.713T14 17M7 6v13z" />
</svg>
</span>
</span>
</div>
<div class="gap-2 text-xs mt-1">
<span x-text="item.createdAt.toLocaleString()" class="text-gray-500"></span>
<span x-text="item.seq" class="text-gray-400"></span>
</div>
</div>
</template>
</div>
<div class="p-2 border-t">
<div class="flex justify-between items-center py-1 px-2 bg-gray-200 border-l-4 border-gray-500"
x-show="quoteMessage">
<p x-html="renderQuote()" class="text-gray-600 text-sm"></p>
<span class="cursor-pointer text-sm" @click="doQuoteMessage(undefined)">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5 text-gray-500 hover:text-gray-700">
<path stroke-linecap="round" stroke-linejoin="round"
d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</span>
</div>
<div class="pt-2 flex items-center">
<input type="text" class="flex-1 p-2 border border-gray-300 rounded-lg focus:bg-white focus:text-gray-900 placeholder:text-sm focus:placeholder-gray-500 focus:outline-none
focus:border-zinc-950 focus:border ring-0 focus:ring-0" placeholder="Type your message..."
@keydown="doTyping" x-model="textMessage" @keyup.enter="sendMessage">
<div
class="ml-3 my-auto relative rounded-full transition duration-500 ease-in-out text-gray-500 focus:outline-none">
<input type="file" id="fileInput" class="h-5 w-6 opacity-0" @change="doSendFiles(event)"
placeholder="Choice your file" />
<label for="fileInput" class="cursor-pointer absolute z-10 top-0 left-0 h-6 w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="text-gray-700 hover:text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" />
</svg>
</label>
</div>
<button
class="ml-3 px-4 text-center py-1 bg-blue-100 text-blue-600 font-semibold rounded-md cursor-pointer shadow-sm hover:bg-blue-200"
@click="sendMessage">Send</button>
</div>
</div>
</div>
<div class="flex flex-col shrink-0 w-80 xl:w-[30rem] bg-indigo-100">
<div class="flex-1 p-4 overflow-y-auto text-gray-600">
<div class="border-gray-300 flex justify-between">
<h2 class="text-lg font-semibold text-gray-950">Logs</h2>
<button @click="clearLogs"
class="py-1 bg-gray-950 hover:bg-gray-800 text-white rounded-md px-3">Clear</button>
</div>
<template x-for="(item, idx) in logs" :key="idx">
<p class="text-sm py-1">
<span x-text="item.time"></span> : <span x-text="item.text"></span>
</p>
</template>
</div>
</div>
</body>
</html>