The overlay of complex chat solution for modern applications.
Svelte-Chat is complex chat solution for SvelteKit applications which offers your clients top-level chat experiences and full power to administrate for your management team
This one is the overlay which supplies to your svelte-chat app the GUI experiences. full documentation
$ npm i @svelte-chat/gui
- SvelteKit app,
- @svelte-chat/plugin installed and embedded in your SvelteKit entity,
Expandable - open to see
- Chat interaction on page content background
- Empty Chat List
- Chat lists with some
- Particular selected chat
1st: Attach client interaction button to your SvelteKit App. Like below or similary:
// Route: /src/routes/+layout.svelte
<script>
import { SvelteChatButton } from "@svelte-chat/gui";
</script>
<!-- Other stuff will be load here -->
<slot/>
<SvelteChatButton/>
2nd: Connect configuration with your client-side app. This can be done generally around 2 ways:
- Use our load function which pass all configuration for client side by itself:
- Remember that: Each example from 1 point can be utilized into any server side SvelteKit load spot file like: +layout.server.ts located in scope where 'SvelteChatButton' is used
- When you just made +layout.server.ts/+page.server.ts file
import { loadLayoutServer } from "@svelte-chat/gui";
// This load automatically
export const load = loadLayoutServer;
- When you already have +layout.server.ts/+page.server.ts file
import { loadLayoutServer } from "@svelte-chat/gui"
// This load autmoatically
export const load = () => {
const math = 1 * 1 * 0;
return {
...loadLayoutServer()
math,
}
}
- Enter configuration to
<SvelteChatButton/>
initialization component target:
<script>
import { SvelteChatButton } from "svelte-chat";
</script>
</slot>
<!-- Port 10501 is a default port for server communication. When you setup other port, pass here -->
<SvelteChatButton lexConfig={{port: 10501}}/>
- As you saw this is not to far complicated. But you should be couscious side effects which happens here:
- When you skip any step application won't be work
- In 1st config option from 2nd step, default config is load automatically same as fine tuned user configuration [more about bellow]
- In 2nd config option from 2nd step, when you pass wrong port you will see an error into client side Debug Tool, so you must match-up correctly
- When you would like to have fittest apperance experiences you should setup such style for app e.g: in app.html head scope
* {
margin: 0px;
padding: 0px
}
You feel will to help in solution evolution. Don't be shy and pull issue with demand like: I would like take the participation in evolution because ...[cause]
All what you should know about Copyrights is that all code base is under Apache 2.0