Svelte-Chat GUI

The overlay of complex chat solution for modern applications.

What is the Svelte-Chat?

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

Swift description of this

This one is the overlay which supplies to your svelte-chat app the GUI experiences.

Installation (as always - for npm)

$ npm i @svelte-chat/gui

Prerequisites

1. SvelteKit app,
2. @svelte-chat/plugin installed and embedded in your SvelteKit entity,

Overview:

In front of you are only two steps - to use (@svelte-chat/plugin not accounted)

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:

1. 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,
    }
}

2. 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

Recomendations:

1. 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
    }

Contribution:

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]

License

All what you should know about Copyrights is that all code base is under Apache 2.0