How to embed chat in a React TypeScript application

Web
1

We are using React TypeScript and there is no UI Kit for that and going through the documentation it is kinda hard to create the code for embedding the chat in the app.

2

Hello, you should be able to integrate our TS SDK with web open-source UIKIT, although, it might require some work on the responsive part (for mobiles). Did you face any errors during the integration?

3

Can you send the link to the documentation? Thanks.

4

Please refer to this section: Amity UIKit Open Source - Amity Docs

5

That is what we were using but the UI Kits do not supports TS definition. We get the following error when we import @amityco/ui-kit package. Is there a @types package that we want to install?

Could not find a declaration file for module ‘@amityco/ui-kit’. ‘c:/Code/app/node_modules/@amityco/ui-kit/build/index.js’ implicitly has an ‘any’ type.
Try npm i --save-dev @types/amityco__ui-kit if it exists or add a new declaration (.d.ts) file containing declare module '@amityco/ui-kit';ts(7016)

image001
image0011071×240 13 KB

6

Any updates on the next steps for this?

7

Hi, our team is looking into the error, will get back to you as soon as we have the update, thank you :pray:

8

Hello @DanishMentorange , currently, we don’t have @types packages for our web uikit, however, you can integrate and fix the error base on this instruction:

  1. Create a type declaration file in the root folder of the application e.g amityUikit.d.ts. and add declare module '@amityco/ui-kit; in the file.

image
image1500×918 131 KB

  1. Add amityUikit.d.ts to file tsconfig.json
"include": [
    "src",
    "amityUikit.d.ts"
  ]

image
image1500×901 180 KB

9

Thanks that worked. But the documentation on Social & Chat UI Kits is sparse.

We are getting below errors:

  1. react-jsx-dev-runtime.development.js:87 Warning: Failed prop type: The prop apiRegion is marked as required in ForwardRef, but its value is undefined.
  2. POST http://localhost:3000/app/api.us.amity.co/v1/device 404 (Not Found)

This is the code we are using

const { user } = useAuth();

    return (
        <div className="main-wrapper">
            <div className="content-body">
                <div className="container-fluid no-gutters">
                    <div className="custom-scroll-main">
                        <AmityUiKitProvider
                            apiKey="our api key"
                            apiEndpoint="api.us.amity.co"
                            userId={user.userId}
                            displayName={user.name}
                        >
                            <AmityUiKitSocial />
                        </AmityUiKitProvider>
                    </div>
                </div>
            </div>
        </div>
    );

Also, the application console stopped working for us; but will create another ticket for that.

10

#1 Could you please specify the apiRegion={apiRegion} as well? Referring to our uikit example below

#2 Could we have your curls sample, when you make the request?

11

We tried the apiRegion but to no avail. See below code snippet

import React, { FC } from "react";
import { AmityUiKitProvider, AmityUiKitSocial } from "@amityco/ui-kit";
import useAuth from "@hooks/useAuth";

const Community: FC = ({}) => {
    const { user } = useAuth();

    return (
        <div className="main-wrapper">
            <div className="content-body">
                <div className="container-fluid no-gutters">
                    <div className="custom-scroll-main">
                        <AmityUiKitProvider
                            apiKey="our_api_key"
                            apiRegion="ApiEndpoint.US"
                            apiEndpoint="api.us.amity.co"
                            userId={user.userId}
                            displayName={user.name}
                        >
                            <AmityUiKitSocial />
                        </AmityUiKitProvider>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Community;

We do not use curl so cannot provide that for the request. The above is the only thing we have configured so if we have to make any authentication request then please let us know. Thanks.

12

@DanishMentorange You can try the following code snippet.

<AmityUiKitProvider
          key={userId}
          apiKey={apiKey}
          apiEndpoint="https://api.us.amity.co"
          userId={userId}
          displayName={userId}
          apiRegion={"us"}
        >
1 Like
13

That worked. Thank you.