# @spectalabs/specta-chat-web

> The specta-chat module is a module to be integrated into atto web

Latest version **0.0.5** (published 2023-02-14) · 0 weekly downloads

## Install

```sh
npm install @spectalabs/specta-chat-web
pnpm add @spectalabs/specta-chat-web
yarn add @spectalabs/specta-chat-web
bun add @spectalabs/specta-chat-web
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2023-02-14 |
| First published | 2023-01-09 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 14 |
| Unpacked size | 9.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ahmet.r, valez, egzonmustafa, nik-specta |

## Links

- npm: https://www.npmjs.com/package/@spectalabs/specta-chat-web
- npm.io page: https://npm.io/package/@spectalabs/specta-chat-web

## Dependencies (14)

- [react](https://npm.io/package/react.md) ^18.0.0
- [tslib](https://npm.io/package/tslib.md) ^2.4.1
- [moment](https://npm.io/package/moment.md) ^2.29.3
- [react-dom](https://npm.io/package/react-dom.md) ^18.0.0
- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4
- [@types/jest](https://npm.io/package/@types/jest.md) ^27.4.1
- [@types/node](https://npm.io/package/@types/node.md) ^16.11.26
- [@types/react](https://npm.io/package/@types/react.md) ^17.0.43
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.0
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.0.7
- [socket.io-client](https://npm.io/package/socket.io-client.md) ^4.5.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.4.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.3
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0

## Recent versions

- 0.0.5 (latest) — 2023-02-14
- 0.0.4 — 2023-02-01
- 0.0.3 — 2023-01-09
- 0.0.2 — 2023-01-09
- 0.0.1 — 2023-01-09

## README

# Specta Chat - Web Module

Specta Chat is a React.js & TypeScript package for chatting.

## Build

Specta Chat was build on React.js and TypeScript as template. [Rollup](https://rollupjs.org/guide/en/) was used as the bundler of choice. [Emotion](https://emotion.sh/docs/introduction) was used for styling (_CSS in JS_).

## Run BUILD container

```bash
npm i
```

Builds node modules to the `node_modules` folder.

```bash
npm run dev:watch
```

Runs the app for development with watcher.

When working locally run `npm link react` (_avoids duplicate version of React issues_) for the first time and each time when new package has been installed.

## Installation into other projects

```bash
npm i @spectalabs/specta-chat-web
```

### React.js

Only requires to add the package.

### React.js & TypeScript

After adding package, requires to add a new declaration (_.d.ts_) file containing:

```typescript
declare module "@spectalabs/specta-chat-web";
```

### Vue.js

Besides adding package, requires to have [Vuera](https://github.com/akxcv/vuera) installed on Vue.js project. For config details check the already provided link (_React in Vue_).

## Usage

To use the Specta Chat module simply import as:

```typescript
import { SpectaChat } from "@spectalabs/specta-chat-web";
```

and use it as:

```
<SpectaChat
   domain="<any domain name>"
   user={<logged in user object>}
   headerHeight={<any number>}
   className="<any class name>"
   theme="<any hex color code>"
/>
```

### Provided parameters

- domain - (_string type_)
- user - (_object type_)
- headerHeight - (_number type_) - This given parameter aligns module correctly right under the project's header menu, so it is preferred to be passed in
- theme - (_string type_) - Main application's color
- className - (_string type_)

### Dismiss localStorage

To clear module's **localStorage** from the projects that was installed, remove the keys on `logout()`:

```typescript
localStorage.removeItem("viewpath");
localStorage.removeItem("conversations");
localStorage.removeItem("chat");
```

### Latest version: 0.0.5

---
_Source: https://npm.io/package/@spectalabs/specta-chat-web · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._