Add close button to live chat box.
This commit is contained in:
Haiping Chen
parent
2e136f67c1
commit
4dc1afa9a3
2
src/web-live-chat/.env
Normal file
2
src/web-live-chat/.env
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
# Public
|
||||
PUBLIC_API_HOST=http://localhost:5500
|
||||
1
src/web-live-chat/.gitignore
vendored
1
src/web-live-chat/.gitignore
vendored
|
|
@ -3,7 +3,6 @@ node_modules
|
|||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
vite.config.js.timestamp-*
|
||||
|
|
|
|||
78
src/web-live-chat/package-lock.json
generated
78
src/web-live-chat/package-lock.json
generated
|
|
@ -407,9 +407,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@eslint/eslintrc": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.3.tgz",
|
||||
"integrity": "sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==",
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
|
||||
"integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ajv": "^6.12.4",
|
||||
|
|
@ -430,9 +430,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@eslint/js": {
|
||||
"version": "8.54.0",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.54.0.tgz",
|
||||
"integrity": "sha512-ut5V+D+fOoWPgGGNj83GGjnntO39xDy6DWxO0wb7Jp3DcMX0TfIqdzHF85VTQkerdyGmuuMD9AKAo5KiNlf/AQ==",
|
||||
"version": "8.55.0",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.55.0.tgz",
|
||||
"integrity": "sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
|
|
@ -570,9 +570,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@polka/url": {
|
||||
"version": "1.0.0-next.23",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz",
|
||||
"integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg=="
|
||||
"version": "1.0.0-next.24",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.24.tgz",
|
||||
"integrity": "sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ=="
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"version": "2.11.8",
|
||||
|
|
@ -604,9 +604,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@sveltejs/kit": {
|
||||
"version": "1.27.6",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.27.6.tgz",
|
||||
"integrity": "sha512-GsjTkMbKzXdbeRg0tk8S7HNShQ4879ftRr0ZHaZfjbig1xQwG57Bvcm9U9/mpLJtCapLbLWUnygKrgcLISLC8A==",
|
||||
"version": "1.27.7",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.27.7.tgz",
|
||||
"integrity": "sha512-AzXYDoYt42clCBwLF9GTHsXyg2DFR31Ncyt8yxu8Aw4tgB433V+w+hcr1RTfAN9zKW2J2PY9FMQ8FoX/4Vw8CA==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^2.5.0",
|
||||
|
|
@ -635,9 +635,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@sveltejs/vite-plugin-svelte": {
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.5.2.tgz",
|
||||
"integrity": "sha512-Dfy0Rbl+IctOVfJvWGxrX/3m6vxPLH8o0x+8FA5QEyMUQMo4kGOVIojjryU7YomBAexOTAuYf1RT7809yDziaA==",
|
||||
"version": "2.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.5.3.tgz",
|
||||
"integrity": "sha512-erhNtXxE5/6xGZz/M9eXsmI7Pxa6MS7jyTy06zN3Ck++ldrppOnOlJwHHTsMC7DHDQdgUp4NAc4cDNQ9eGdB/w==",
|
||||
"dependencies": {
|
||||
"@sveltejs/vite-plugin-svelte-inspector": "^1.0.4",
|
||||
"debug": "^4.3.4",
|
||||
|
|
@ -1162,15 +1162,15 @@
|
|||
}
|
||||
},
|
||||
"node_modules/eslint": {
|
||||
"version": "8.54.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.54.0.tgz",
|
||||
"integrity": "sha512-NY0DfAkM8BIZDVl6PgSa1ttZbx3xHgJzSNJKYcQglem6CppHyMhRIQkBVSSMaSRnLhig3jsDbEzOjwCVt4AmmA==",
|
||||
"version": "8.55.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.55.0.tgz",
|
||||
"integrity": "sha512-iyUUAM0PCKj5QpwGfmCAG9XXbZCWsqP/eWAWrG/W0umvjuLRBECwSFdt+rCntju0xEH7teIABPwXpahftIaTdA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.2.0",
|
||||
"@eslint-community/regexpp": "^4.6.1",
|
||||
"@eslint/eslintrc": "^2.1.3",
|
||||
"@eslint/js": "8.54.0",
|
||||
"@eslint/eslintrc": "^2.1.4",
|
||||
"@eslint/js": "8.55.0",
|
||||
"@humanwhocodes/config-array": "^0.11.13",
|
||||
"@humanwhocodes/module-importer": "^1.0.1",
|
||||
"@nodelib/fs.walk": "^1.2.8",
|
||||
|
|
@ -1229,9 +1229,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/eslint-config-prettier": {
|
||||
"version": "9.0.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz",
|
||||
"integrity": "sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==",
|
||||
"version": "9.1.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
|
||||
"integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"eslint-config-prettier": "bin/cli.js"
|
||||
|
|
@ -2086,9 +2086,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/overlayscrollbars": {
|
||||
"version": "2.4.4",
|
||||
"resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-2.4.4.tgz",
|
||||
"integrity": "sha512-792lwASLr3FlZER+/P7NseFQjffDEcQOg6HtyBSLrnb3crH+Ybk0tzaljQVQZs0pjGF/xFjyvMKin6whkL0RnQ=="
|
||||
"version": "2.4.5",
|
||||
"resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-2.4.5.tgz",
|
||||
"integrity": "sha512-4OLCPuZPVdd1HnDLYS4o+kAsOCZwVz6dDA212m8ki/u3isltKyWGVjIv2aqpVHkDRf/P2K98m9Su8pdhihtAIQ=="
|
||||
},
|
||||
"node_modules/p-limit": {
|
||||
"version": "3.1.0",
|
||||
|
|
@ -2187,9 +2187,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.31",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
|
||||
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
|
||||
"version": "8.4.32",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
|
||||
"integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
@ -2205,7 +2205,7 @@
|
|||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.6",
|
||||
"nanoid": "^3.3.7",
|
||||
"picocolors": "^1.0.0",
|
||||
"source-map-js": "^1.0.2"
|
||||
},
|
||||
|
|
@ -2322,9 +2322,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/prettier-plugin-svelte": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.1.1.tgz",
|
||||
"integrity": "sha512-jLzaHfToav527/I5h2BMQfN3G5gylrJm54zFFyoXvUtfscI47877ftacUb+Eyse/3bXrhY+MtkyiuvruiHc+kg==",
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.1.2.tgz",
|
||||
"integrity": "sha512-7xfMZtwgAWHMT0iZc8jN4o65zgbAQ3+O32V6W7pXrqNvKnHnkoyQCGCbKeUyXKZLbYE0YhFRnamfxfkEGxm8qA==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"prettier": "^3.0.0",
|
||||
|
|
@ -2664,9 +2664,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/svelte-check": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.6.0.tgz",
|
||||
"integrity": "sha512-8VfqhfuRJ1sKW+o8isH2kPi0RhjXH1nNsIbCFGyoUHG+ZxVxHYRKcb+S8eaL/1tyj3VGvWYx3Y5+oCUsJgnzcw==",
|
||||
"version": "3.6.2",
|
||||
"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.6.2.tgz",
|
||||
"integrity": "sha512-E6iFh4aUCGJLRz6QZXH3gcN/VFfkzwtruWSRmlKrLWQTiO6VzLsivR6q02WYLGNAGecV3EocqZuCDrC2uttZ0g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/trace-mapping": "^0.3.17",
|
||||
|
|
@ -2892,9 +2892,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz",
|
||||
"integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==",
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
|
||||
"integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
const host = 'http://localhost:5500';
|
||||
import { PUBLIC_API_HOST } from '$env/static/public';
|
||||
const host = PUBLIC_API_HOST;
|
||||
|
||||
// user
|
||||
export const tokenUrl = `${host}/token`;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
DropdownMenu,
|
||||
DropdownItem,
|
||||
Form,
|
||||
Input
|
||||
Input,
|
||||
Button
|
||||
} from 'sveltestrap';
|
||||
|
||||
import 'overlayscrollbars/overlayscrollbars.css';
|
||||
|
|
@ -90,62 +91,26 @@
|
|||
viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' }); // set scroll offset
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function close() {
|
||||
window.parent.postMessage({ action: "close" }, "*");
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="d-lg-flex">
|
||||
<div class="w-100 user-chat">
|
||||
<div class="card">
|
||||
<div class="p-4 border-bottom" style="height: 10vh">
|
||||
<div class="p-4 border-bottom" style="height: 12vh">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-9">
|
||||
<div class="col-md-4 col-7">
|
||||
<h5 class="font-size-15 mb-1">Guest</h5>
|
||||
<p class="text-muted mb-0">
|
||||
<i class="mdi mdi-circle text-success align-middle me-1" /> Active now
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8 col-3">
|
||||
<div class="col-md-8 col-5">
|
||||
<ul class="list-inline user-chat-nav text-end mb-0">
|
||||
<li class="list-inline-item d-none d-sm-inline-block">
|
||||
<Dropdown>
|
||||
<DropdownToggle class="nav-btn dropdown-toggle" tag="button" color="">
|
||||
<i class="bx bx-search-alt-2" />
|
||||
</DropdownToggle>
|
||||
|
||||
<DropdownMenu class="dropdown-menu dropdown-menu-end dropdown-menu-md">
|
||||
<Form class="p-3">
|
||||
<div class="form-group m-0">
|
||||
<div class="input-group">
|
||||
<Input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Search ..."
|
||||
aria-label="Recipient's username"
|
||||
/>
|
||||
|
||||
<button class="btn btn-primary" type="submit"
|
||||
><i class="mdi mdi-magnify" /></button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</li>
|
||||
|
||||
<li class="list-inline-item d-none d-sm-inline-block">
|
||||
<Dropdown>
|
||||
<DropdownToggle tag="button" class="nav-btn dropdown-toggle" color="">
|
||||
<i class="bx bx-cog" />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu class="dropdown-menu-end">
|
||||
<DropdownItem>View Profile</DropdownItem>
|
||||
<DropdownItem>Clear chat</DropdownItem>
|
||||
<DropdownItem>Muted</DropdownItem>
|
||||
<DropdownItem>Delete</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<Dropdown>
|
||||
<DropdownToggle tag="button" class="nav-btn dropdown-toggle" color="">
|
||||
|
|
@ -158,12 +123,19 @@
|
|||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</li>
|
||||
<li class="list-inline-item d-sm-inline-block">
|
||||
<button type="submit" class="btn btn-secondary btn-rounded chat-send w-md waves-effect waves-light"
|
||||
on:click={close}
|
||||
>
|
||||
<span class="d-none d-sm-inline-block me-2" >Close</span> <i class="mdi mdi-window-close"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scrollbar" style="height: 80vh">
|
||||
<div class="scrollbar" style="height: 78vh">
|
||||
<div class="chat-conversation p-3">
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li>
|
||||
|
|
|
|||
Loading…
Reference in a new issue