Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix live preview in docs #919

Merged
merged 7 commits into from
Nov 5, 2024
Merged

Fix live preview in docs #919

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
65a0eee
update package
corlard3y Oct 30, 2024
38f26f1
update live preview
corlard3y Oct 31, 2024
2aba276
update yarn.lock
corlard3y Oct 31, 2024
50af24c
update user profile
corlard3y Nov 1, 2024
ba579d1
update user profile
corlard3y Nov 5, 2024
5289a11
update yarn.lock
corlard3y Nov 5, 2024
8e256d0
update yarn.lock
corlard3y Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions blog/2023-12-14-push-roadmap-recap-2023/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,11 +87,11 @@ For the first time, Web3 messaging is coming at par with and beating most Web2 m

Push launched frontend components for web3 developers to easily integrate Push products into their web3 dapps. Enough talk, let's see it in action

```jsx live
customPropMinimized = 'true';
```jsx live customPropMinimized = 'true'
// DO NOT FORGET TO IMPORT LIBRARIES
// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY
// import { ChatUIProvider, ChatView } from @pushprotocol/uiweb;
import { ChatUIProvider, ChatView } from @pushprotocol/uiweb;

function App(props) {
return (
<>
Expand Down
6 changes: 2 additions & 4 deletions docs/chat/03-ui-components/01-Integrate-Push-Chat.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ hide_title: true
slug: ./integrate-push-chat
displayed_sidebar: pushChatSidebar
sidebar_position: 1
image: "/assets/docs/previews/docs_chat_ui_components--integrate_push_chat.png"
image: '/assets/docs/previews/docs_chat_ui_components--integrate_push_chat.png'
---

# Integrate Push Chat
Expand Down Expand Up @@ -111,9 +111,7 @@ If you're using Next.js to integrate UI Components, we recommend using `Next.js

## Live playground

```jsx live
customPropMinimized = 'true';

```jsx live customPropMinimized = 'true'
// DO NOT FORGET TO IMPORT LIBRARIES
// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY
// import { ChatUIProvider, ChatView } from @pushprotocol/restapi;
Expand Down
6 changes: 2 additions & 4 deletions docs/chat/03-ui-components/02-Integrate-Support-Bot.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ hide_title: true
slug: ./integrate-support-bot
displayed_sidebar: pushChatSidebar
sidebar_position: 2
image: "/assets/docs/previews/docs_chat_ui_components--integrate_support_bot.png"
image: '/assets/docs/previews/docs_chat_ui_components--integrate_support_bot.png'
---

# Integrate Support Bot
Expand Down Expand Up @@ -227,9 +227,7 @@ module.exports = function override(config, env) {

## Live Playground

```jsx live
customPropMinimized = 'true';

```jsx live customPropMinimized = 'true'
// DO NOT FORGET TO IMPORT LIBRARIES
// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY
// import { ChatUIProvider, ChatView } from @pushprotocol/uiweb;
Expand Down
80 changes: 39 additions & 41 deletions docs/chat/03-ui-components/03-Integrate-Chat-Widget.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,25 @@ hide_title: true
slug: ./integrate-chat-widget
displayed_sidebar: pushChatSidebar
sidebar_position: 3
image: "/assets/docs/previews/docs_chat_ui_components--integrate_chat_widget.png"
image: '/assets/docs/previews/docs_chat_ui_components--integrate_chat_widget.png'
---

# Integrate Chat Widget V2




Introducing the ChatWidget: a compact yet comprehensive chat experience condensed into widget form , allowing users to initiate conversations with any wallet or group seamlessly.

With its integration into the ChatUIProvider, using the Chat Widget component is as straightforward as any other chat component. Simply wrap it with the ChatUIProvider parent wrapper to leverage its capabilities and provide users with an intuitive and powerful chat experience.

![Chat Widget using Push Chat protocol](/assets/docs/chat/ui-components/integrate-chat-widget/chat-widget-preview.png)

<head>
<title>Integrate Chat Widget V2 | UI Components | Push Chat | Push Documentation</title>
<title>
{`Integrate Chat Widget V2 | UI Components | Push Chat | Push Documentation`}
</title>
</head>

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

## Installation

Expand Down Expand Up @@ -98,30 +97,30 @@ Import the SDK package in the component file where you want to render the chat w
<Tabs className="codetabs" groupId="code-examples">
<TabItem value="react" attributes={{className: "codetab react"}} default>

```typescript
import { ChatWidget, ChatUIProvider } from "@pushprotocol/uiweb";
```typescript
import { ChatWidget, ChatUIProvider } from "@pushprotocol/uiweb";

// Push Chat is interoperable and you can receive it on any of the supported platforms
// We recommend https://app.push.org/chat or https://staging.push.org/chat or Push mobile app
// https://app.push.org/#receive-notifications
<ChatUIProvider>
<ChatWidget
chatId="0xd9c1CCAcD4B8a745e191b62BA3fcaD87229CB26d"
/>
</ChatUIProvider>
```
// Push Chat is interoperable and you can receive it on any of the supported platforms
// We recommend https://app.push.org/chat or https://staging.push.org/chat or Push mobile app
// https://app.push.org/#receive-notifications
<ChatUIProvider>
<ChatWidget
chatId="0xd9c1CCAcD4B8a745e191b62BA3fcaD87229CB26d"
/>
</ChatUIProvider>

```

</TabItem>
</Tabs>

### Customization parameters

| Prop | Type | Default | Remarks |
|-----------------|---------------|--------------|---------|
| _ `chatId`_ | `string` | `-` | recipient's address or chatId |
| `modalTitle` | `string` | `'Chat with us!'` | Modal header title. |
| `welcomeComponent` | `React.ReactNode` | - | Custom React component that will be displayed if wallet is not connected. This is the welcome screen of the chat widget component. |
| Prop | Type | Default | Remarks |
| ------------------ | ----------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| _ `chatId`_ | `string` | `-` | recipient's address or chatId |
| `modalTitle` | `string` | `'Chat with us!'` | Modal header title. |
| `welcomeComponent` | `React.ReactNode` | - | Custom React component that will be displayed if wallet is not connected. This is the welcome screen of the chat widget component. |

> Note: Parameters _`in this style`_ are mandatory.
> Note: Refer [ChatUIProvider](/docs/chat/ui-components/Advanced/ChatUIProvider/) for details on its paramters.
Expand All @@ -133,21 +132,21 @@ You can also customize the chat according to your preference —
<Tabs className="codetabs" groupId="code-examples">
<TabItem value="react" attributes={{className: "codetab react"}} default>

```typescript
import React from 'react';
import { ChatWidget, ChatUIProvider } from '@pushprotocol/uiweb';
```typescript
import React from 'react';
import { ChatWidget, ChatUIProvider } from '@pushprotocol/uiweb';

return (
<ChatUIProvider>
<ChatWidget
chatId="0xd9c1CCAcD4B8a745e191b62BA3fcaD87229CB26d" //chatId or recipient's address
welcomeComponent={<div style={{display: "flex",flexDirection:'column',border:'1px solid black',overflow:'auto',height:'100%',width:'100%'}}>
<p>Welcome</p>
</div}
/>
</ChatUIProvider>
);

return (
<ChatUIProvider>
<ChatWidget
chatId="0xd9c1CCAcD4B8a745e191b62BA3fcaD87229CB26d" //chatId or recipient's address
welcomeComponent={<div style={{display: "flex",flexDirection:'column',border:'1px solid black',overflow:'auto',height:'100%',width:'100%'}}>
<p>Welcome</p>
</div}
/>
</ChatUIProvider>
);

```

Expand All @@ -156,8 +155,7 @@ You can also customize the chat according to your preference —

## Live Playground

```jsx live
customPropMinimized="true"
```jsx live customPropMinimized="true"

// DO NOT FORGET TO IMPORT LIBRARIES
// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY
Expand Down Expand Up @@ -186,7 +184,7 @@ const customisedChatWidgetTheme: IChatTheme = {
</label>

<p />


<ChatUIProvider theme={customisedChatWidgetTheme}>
<ChatWidget
Expand Down
6 changes: 2 additions & 4 deletions ...chat/03-ui-components/Advanced/04-Integrate-Advanced-ChatViewList-Component.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ hide_title: true
slug: ./chatviewlist-component
displayed_sidebar: pushChatSidebar
sidebar_position: 4
image: "/assets/docs/previews/docs_chat_ui_components_advanced--chatviewlist_component.png"
image: '/assets/docs/previews/docs_chat_ui_components_advanced--chatviewlist_component.png'
---

# ChatViewList
Expand Down Expand Up @@ -86,9 +86,7 @@ const ChatViewListCard = styled.div`

### Live playground

```jsx live
customPropMinimized = 'true';

```jsx live customPropMinimized = 'true';
// DO NOT FORGET TO IMPORT LIBRARIES
// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY
// import { ChatUIProvider, ChatViewList } from @pushprotocol/uiweb;
Expand Down
6 changes: 2 additions & 4 deletions ...at/03-ui-components/Advanced/06-Integrate-Advanced-ChatViewBubble-Component.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ hide_title: true
slug: ./chatviewbubble-component
displayed_sidebar: pushChatSidebar
sidebar_position: 6
image: "/assets/docs/previews/docs_chat_ui_components_advanced--chatviewbubble_component.png"
image: '/assets/docs/previews/docs_chat_ui_components_advanced--chatviewbubble_component.png'
---

# ChatViewBubble
Expand Down Expand Up @@ -95,9 +95,7 @@ export default ChatViewBubbleTest;

### Live playground

```jsx live
customPropMinimized = 'true';

```jsx live customPropMinimized = 'true';
// DO NOT FORGET TO IMPORT LIBRARIES
// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY
// import { ChatUIProvider, ChatViewBubble } from @pushprotocol/uiweb;
Expand Down
6 changes: 2 additions & 4 deletions .../03-ui-components/Advanced/07-Integrate-Advanced-CreateGroupModal-Component.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ hide_title: true
slug: ./creategroupmodal-component
displayed_sidebar: pushChatSidebar
sidebar_position: 7
image: "/assets/docs/previews/docs_chat_ui_components_advanced--creategroupmodal_component.png"
image: '/assets/docs/previews/docs_chat_ui_components_advanced--creategroupmodal_component.png'
---

# CreateGroupModal
Expand Down Expand Up @@ -74,9 +74,7 @@ export default CreateGroupModalTest;

### Push CreateGroupModal Component live playground

```jsx live
customPropMinimized = 'true';

```jsx live customPropMinimized = 'true';
// DO NOT FORGET TO IMPORT LIBRARIES
// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY
// import { ChatUIProvider, CreateGroupModal,MODAL_POSITION_TYPE } from @pushprotocol/uiweb;
Expand Down
37 changes: 18 additions & 19 deletions .../chat/03-ui-components/Advanced/08-Integrate-Advanced-UserProfile-Component.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ hide_title: true
slug: ./userprofile-component
displayed_sidebar: pushChatSidebar
sidebar_position: 7
image: "/assets/docs/previews/docs_chat_ui_components_advanced--userprofile_component.png"
image: '/assets/docs/previews/docs_chat_ui_components_advanced--userprofile_component.png'
---

# UserProfile
Expand Down Expand Up @@ -73,12 +73,11 @@ export default UserProfileTest;

### Push UserProfile Component live playground

```jsx live
customPropMinimized = 'true';

```jsx live
// DO NOT FORGET TO IMPORT LIBRARIES
// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY
// import { ChatUIProvider, UserProfile,MODAL_POSITION_TYPE } from @pushprotocol/uiweb;
// import { ChatUIProvider, UserProfile } from @pushprotocol/uiweb;

function App(props) {
const [signer, setSigner] = useState(null);
const connectWallet = async () => {
Expand All @@ -98,6 +97,7 @@ function App(props) {
const disconnectWallet = async () => {
setSigner(null);
};

const buttonStyle = {
padding: '10px 20px',
backgroundColor: '#dd44b9',
Expand All @@ -107,15 +107,16 @@ function App(props) {
cursor: 'pointer',
marginTop: '20px',
};

return (
<>
<h2></h2>
<ChatUIProvider signer={signer}>
<label>
For this demo, You will need Metamask (or equivalent browser injected
wallet), you will also need to sign a transaction to see the
notifications. Connect wallet for better usage of the UserProfile
component.
</label>

<p />
<button
style={buttonStyle}
Expand All @@ -124,18 +125,16 @@ function App(props) {
{signer ? 'Disconnect wallet' : 'Connect Wallet'}
</button>

<ChatUIProvider signer={signer}>
<div
style={{
maxHeight: '75vh',
margin: '20px auto',
position: 'relative',
}}
>
<UserProfile />
</div>
</ChatUIProvider>
</>
{signer && (<div
style={{
maxHeight: "75vh",
margin: "20px auto",
position: "relative",
}}
>
<UserProfile />
</div>)}
</ChatUIProvider>
);
}
```
6 changes: 2 additions & 4 deletions .../chat/03-ui-components/Advanced/09-Integrate-Advanced-ChatPreview-Component.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ hide_title: true
slug: ./chatpreview-component
displayed_sidebar: pushChatSidebar
sidebar_position: 9
image: "/assets/docs/previews/docs_chat_ui_components_advanced--chatpreview_component.png"
image: '/assets/docs/previews/docs_chat_ui_components_advanced--chatpreview_component.png'
---

# ChatPreview
Expand Down Expand Up @@ -94,9 +94,7 @@ export default ChatPreviewTest;

### Live playground

```jsx live
customPropMinimized = 'true';

```jsx live customPropMinimized = 'true';
// DO NOT FORGET TO IMPORT LIBRARIES
// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY
// import { ChatUIProvider, ChatPreview } from @pushprotocol/uiweb;
Expand Down
6 changes: 2 additions & 4 deletions ...t/03-ui-components/Advanced/10-Integrate-Advanced-ChatPreviewList-Component.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ hide_title: true
slug: ./chatpreviewlist-component
displayed_sidebar: pushChatSidebar
sidebar_position: 10
image: "/assets/docs/previews/docs_chat_ui_components_advanced--chatpreviewlist_component.png"
image: '/assets/docs/previews/docs_chat_ui_components_advanced--chatpreviewlist_component.png'
---

# ChatPreviewList
Expand Down Expand Up @@ -83,9 +83,7 @@ export default ChatPreviewListTest;

### Live playground

```jsx live
customPropMinimized = 'true';

```jsx live customPropMinimized = 'true'
// DO NOT FORGET TO IMPORT LIBRARIES
// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY
// import { ChatUIProvider, ChatPreviewList } from @pushprotocol/uiweb;
Expand Down
6 changes: 2 additions & 4 deletions docs/notifications/01-build/16-Develop-Testing-Notifications.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ hide_title: true
slug: ./testing-notifications
displayed_sidebar: pushNotificationSidebar
sidebar_position: 16
image: "/assets/docs/previews/docs_notifications_develop--testing_notifications.png"
image: '/assets/docs/previews/docs_notifications_develop--testing_notifications.png'
---

# Testing notifications overview
Expand Down Expand Up @@ -282,9 +282,7 @@ Best way to test staging on iOS would be to join 👉 [Push Discord Channel](htt

## Live playground

```jsx live
customPropMinimized = 'true';

```jsx live customPropMinimized = 'true';
// DO NOT FORGET TO IMPORT LIBRARIES
// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY

Expand Down
Loading