helixml / chat-widget

React Component Usage - helixml/chat-widget

To integrate the chat widget into your React application using the Helix ML Chat Widget project (https://github.com/helixml/chat-widget/), you can create a custom plugin in your existing monorepo app. The plugin will use the ChatIcon component from @backstage/core-components and the GraphQlDefinitionWidget from @backstage/plugin-api-docs.

First, let’s create a new plugin folder in your monorepo app. For example, github-playground-chat-plugin.

Next, add the required dependencies to the plugin’s package.json:

"dependencies": {
"@backstage/core-components": "^1.0.1",
"@backstage/core-plugin-api": "^1.1.0",
"@backstage/theme": "^1.0.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"styled-components": "^5.3.3"
}

Now, create a new component, ChatWidget.tsx, in the plugin’s src folder:

// src/ChatWidget.tsx
import React from 'react';
import { useApi } from '@backstage/core-plugin-api';
import { makeStyles, Theme } from '@backstage/theme';
import { ChatIcon } from '@backstage/core-components';
import { GraphQlDefinitionWidget } from '@backstage/plugin-api-docs';
import { useChatWidget } from './hooks/useChatWidget';

const useStyles = makeStyles((theme: Theme) => ({
root: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
},
}));

export const ChatWidget = () => {
const classes = useStyles();
const api = useApi();
const { data, loading, error } = useChatWidget(api);

if (loading) {
return <div>Loading...</div>;
}

if (error) {
return <div>Error: {error.message}</div>;
}

return (
<div className={classes.root}>
<ChatIcon />
<GraphQlDefinitionWidget
title="Chat Widget"
description="This is a custom chat widget for the Backstage platform."
definition={data}
/>
</div>
);
};

Create a new folder hooks in the plugin’s src folder and add the useChatWidget.ts file:

// src/hooks/useChatWidget.ts
import { useQuery } from '@apollo/client';
import { gql } from '@octokit/graphql';
import { useApi } from '@backstage/core-plugin-api';
import { ChatWidgetQuery } from './types';

export const useChatWidget = (api: any) => {
const GET_CHAT_DATA = gql`
query ChatWidgetQuery {
viewer {
login
}
}
`;

return useQuery<ChatWidgetQuery>(GET_CHAT_DATA, {
fetchPolicy: 'network-only',
context: {
headers: {
authorization: `Bearer ${api.getApiKey()}`
}
}
});
};

Create a new folder types in the plugin’s src folder and add the types.ts file:

// src/types/types.ts
import { DocumentNode } from 'graphql';

export interface ChatWidgetQuery {
viewer: {
login: string;
};
}

export const ChatWidgetQueryDocument: DocumentNode = /* GraphQL */ `
query ChatWidgetQuery {
viewer {
login
}
}
`;

Finally, register the plugin in your app’s index.tsx:

// index.tsx
import { AppRouter } from '@backstage/core-app-api';
import { Router } from '@backstage/react-router';
import { ChatWidget } from './plugins/github-playground-chat-plugin/src/ChatWidget';

const router = AppRouter.fromRouteConfig(
require.context('./routes', true, /\.(tsx|jsx)$/),
);

const App = () => {
return (
<Provider>
<Router>
<ChatWidget />
{router}
</Router>
</Provider>
);
};

This example demonstrates how to integrate the chat widget into your React application using the Helix ML Chat Widget project. You can further customize the ChatWidget component to fit your specific use case.

Sources: