1.65.2 • Published 5 months ago

@voiceflow/react-chat v1.65.2

Weekly downloads
-
License
MIT
Repository
-
Last release
5 months ago

react-chat

Installation

yarn add @voiceflow/react-chat

Usage

For a more complete example see our demo-react-chat repository.

import {
  Chat,
  ChatWindow,
  Launcher,
  SessionStatus,
  SystemResponse,
  TurnType,
  UserResponse,
  useRuntime,
} from '@voiceflow/react-chat';
import { useState } from 'react';
import { match } from 'ts-pattern';

const IMAGE = 'https://picsum.photos/seed/1/200/300';
const AVATAR = 'https://picsum.photos/seed/1/80/80';

const MyChat: React.FC = () => {
  const [open, setOpen] = useState(false);

  const runtime = useRuntime({
    verify: { authorization: '< DIALOG API KEY >' },
    session: { userID: '< UNIQUE USER ID >' },
  });

  const handleLaunch = async () => {
    setOpen(true);
    await runtime.launch();
  };

  const handleEnd = () => {
    runtime.setStatus(SessionStatus.ENDED);
    setOpen(false);
  };

  if (!open) {
    return (
      <span
        style={{
          position: 'absolute',
          right: '2rem',
          bottom: '2rem',
        }}
      >
        <Launcher onClick={handleLaunch} />
      </span>
    );
  }

  return (
    <div
      style={{
        position: 'absolute',
        right: '1rem',
        top: '3rem',
        bottom: '3rem',
        width: '400px',
        border: '1px solid #ddd',
        borderRadius: '8px',
        overflowX: 'hidden',
        overflowY: 'scroll',
      }}
    >
      <ChatWindow.Container>
        <Chat
          title="My Assistant"
          description="welcome to my assistant"
          image={IMAGE}
          avatar={AVATAR}
          withWatermark
          startTime={runtime.session.startTime}
          hasEnded={runtime.isStatus(SessionStatus.ENDED)}
          isLoading={!runtime.session.turns.length}
          onStart={runtime.launch}
          onEnd={handleEnd}
          onSend={runtime.reply}
          onMinimize={handleEnd}
        >
          {runtime.session.turns.map((turn, turnIndex) =>
            match(turn)
              .with({ type: TurnType.USER }, ({ id, type: _, ...props }) => <UserResponse {...props} key={id} />)
              .with({ type: TurnType.SYSTEM }, ({ id, type: _, ...props }) => (
                <SystemResponse
                  key={id}
                  {...props}
                  avatar={AVATAR}
                  isLast={turnIndex === runtime.session.turns.length - 1}
                />
              ))
              .exhaustive()
          )}
          {runtime.indicator && <SystemResponse.Indicator avatar={AVATAR} />}
        </Chat>
      </ChatWindow.Container>
    </div>
  );
};
2.39.0

6 months ago

2.38.6

6 months ago

2.38.5

6 months ago

2.38.8

6 months ago

2.38.7

6 months ago

2.41.2

6 months ago

2.41.1

6 months ago

2.41.3

5 months ago

2.41.0

6 months ago

2.40.0

6 months ago

2.34.0

6 months ago

2.34.1

6 months ago

2.30.3-rc.1

6 months ago

2.30.3-rc.0

6 months ago

2.30.3-rc.3

6 months ago

2.30.3-rc.2

6 months ago

2.33.0

6 months ago

2.32.0

6 months ago

2.32.1

6 months ago

2.31.0

6 months ago

2.38.2

6 months ago

2.38.1

6 months ago

2.38.4

6 months ago

2.38.3

6 months ago

2.38.0

6 months ago

2.37.0

6 months ago

2.36.0

6 months ago

2.35.0

6 months ago

2.23.1-rc.9

6 months ago

2.28.1-rc.0

6 months ago

2.23.1-rc.12

6 months ago

2.23.1-rc.11

6 months ago

2.23.1-rc.14

6 months ago

2.23.1-rc.13

6 months ago

2.29.0

6 months ago

2.29.1

6 months ago

2.23.1-rc.10

6 months ago

2.28.0

6 months ago

2.27.0

6 months ago

2.30.2

6 months ago

2.30.1

6 months ago

2.30.0

6 months ago

2.26.0

6 months ago

2.29.1-rc.0

6 months ago

2.25.0

6 months ago

2.25.1

6 months ago

2.23.1-rc.8

6 months ago

2.23.1-rc.5

6 months ago

2.23.1-rc.7

6 months ago

2.23.1-rc.6

6 months ago

2.23.1-rc.1

6 months ago

2.23.1-rc.0

6 months ago

2.23.1-rc.3

6 months ago

2.23.1-rc.2

6 months ago

2.24.1

6 months ago

2.24.0

6 months ago

2.6.3-rc.0

6 months ago

2.22.1

7 months ago

2.22.0

7 months ago

2.22.2

7 months ago

2.21.2

7 months ago

2.23.0

7 months ago

2.19.0

7 months ago

2.18.0

7 months ago

2.21.0

7 months ago

2.21.1

7 months ago

2.17.2

7 months ago

2.17.0

7 months ago

2.17.1

7 months ago

2.20.0

7 months ago

2.16.1

7 months ago

2.16.2

7 months ago

2.16.0

7 months ago

2.15.0

7 months ago

2.15.1

7 months ago

2.14.0

7 months ago

2.13.0

7 months ago

2.13.1

7 months ago

2.12.0

7 months ago

2.12.3

7 months ago

2.12.4

7 months ago

2.12.1

7 months ago

2.12.2

7 months ago

2.11.0

7 months ago

2.11.1

7 months ago

2.11.2

7 months ago

2.10.0

7 months ago

2.9.0

7 months ago

2.8.1

7 months ago

2.9.1

7 months ago

2.4.1

7 months ago

2.8.0

7 months ago

2.7.0

7 months ago

2.7.2

7 months ago

2.7.1

7 months ago

2.6.1

7 months ago

2.6.0

7 months ago

2.6.3

7 months ago

2.6.2

7 months ago

2.5.0

7 months ago

2.5.2

7 months ago

2.5.1

7 months ago

2.6.4

7 months ago

2.4.0

7 months ago

2.3.0

8 months ago

2.3.1

8 months ago

2.2.1

8 months ago

2.2.0

8 months ago

2.2.3

8 months ago

2.2.2

8 months ago

2.2.5

8 months ago

2.2.4

8 months ago

2.1.1

8 months ago

2.1.0

8 months ago

1.65.2

8 months ago

1.65.1

9 months ago

1.63.0

9 months ago

1.64.0

9 months ago

1.65.0

9 months ago

1.62.1

9 months ago

1.62.0

9 months ago

1.60.0

10 months ago

1.60.2

10 months ago

1.60.1

10 months ago

1.60.4

10 months ago

1.60.3

10 months ago

1.61.0

10 months ago

1.59.4

10 months ago

1.59.3

10 months ago

1.59.2

12 months ago

1.58.3

1 year ago

1.59.0

1 year ago

1.59.1

1 year ago

1.58.2

1 year ago

1.58.1

1 year ago

1.58.0

1 year ago

1.57.0

1 year ago

1.56.5

1 year ago

1.56.4

1 year ago

1.56.3

1 year ago

1.56.2

1 year ago

1.56.1

1 year ago

1.56.0

1 year ago

1.55.4

1 year ago

1.55.0

1 year ago

1.55.2

1 year ago

1.55.1

1 year ago

1.55.3

1 year ago

1.53.0

1 year ago

1.53.1

1 year ago

1.54.0

1 year ago

1.52.1

1 year ago

1.52.0

1 year ago

1.51.3

1 year ago

1.51.2

2 years ago

1.51.1

2 years ago

1.51.0

2 years ago

1.50.4

2 years ago

1.40.0

2 years ago

1.40.2

2 years ago

1.40.1

2 years ago

1.44.0

2 years ago

1.44.1

2 years ago

1.48.0

2 years ago

1.48.1

2 years ago

1.41.0

2 years ago

1.45.1

2 years ago

1.45.0

2 years ago

1.45.3

2 years ago

1.45.2

2 years ago

1.49.1

2 years ago

1.49.0

2 years ago

1.45.4

2 years ago

1.49.3

2 years ago

1.49.2

2 years ago

1.49.5

2 years ago

1.49.4

2 years ago

1.49.6

2 years ago

1.42.0

2 years ago

1.46.0

2 years ago

1.46.2

2 years ago

1.46.1

2 years ago

1.46.4

2 years ago

1.46.3

2 years ago

1.46.6

2 years ago

1.46.5

2 years ago

1.46.7

2 years ago

1.43.0

2 years ago

1.47.1

2 years ago

1.47.0

2 years ago

1.47.3

2 years ago

1.47.2

2 years ago

1.47.5

2 years ago

1.47.4

2 years ago

1.47.7

2 years ago

1.47.6

2 years ago

1.47.8

2 years ago

1.50.1

2 years ago

1.50.0

2 years ago

1.50.3

2 years ago

1.50.2

2 years ago

1.37.0

2 years ago

1.37.1

2 years ago

1.38.0

2 years ago

1.38.1

2 years ago

1.39.0

2 years ago

1.36.0

2 years ago

1.35.0

2 years ago

1.34.0

2 years ago

1.23.23

3 years ago

1.23.22

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.23.21

3 years ago

1.23.20

3 years ago

1.25.0

3 years ago

1.25.1

3 years ago

1.29.0

3 years ago

1.27.2

3 years ago

1.25.4

3 years ago

1.27.3

3 years ago

1.25.2

3 years ago

1.27.1

3 years ago

1.25.3

3 years ago

1.27.6

3 years ago

1.27.4

3 years ago

1.27.5

3 years ago

1.32.0

3 years ago

1.30.0

3 years ago

1.30.1

3 years ago

1.24.14

3 years ago

1.24.15

3 years ago

1.24.12

3 years ago

1.24.13

3 years ago

1.24.10

3 years ago

1.24.11

3 years ago

1.24.1

3 years ago

1.23.18

3 years ago

1.26.0

3 years ago

1.24.2

3 years ago

1.23.17

3 years ago

1.23.16

3 years ago

1.24.0

3 years ago

1.23.15

3 years ago

1.28.1

3 years ago

1.24.5

3 years ago

1.23.14

3 years ago

1.28.2

3 years ago

1.24.6

3 years ago

1.23.13

3 years ago

1.24.3

3 years ago

1.23.12

3 years ago

1.28.0

3 years ago

1.24.4

3 years ago

1.23.11

3 years ago

1.24.9

3 years ago

1.24.7

3 years ago

1.24.8

3 years ago

1.23.19

3 years ago

1.23.10

3 years ago

1.31.1

3 years ago

1.33.0

3 years ago

1.31.2

3 years ago

1.31.0

3 years ago

1.23.6

3 years ago

1.23.7

3 years ago

1.23.5

3 years ago

1.23.8

3 years ago

1.23.9

3 years ago

1.23.4

3 years ago

1.23.3

3 years ago

1.23.2

3 years ago

1.23.1

3 years ago

1.23.0

3 years ago

1.22.0

3 years ago

1.21.1

3 years ago

1.21.0

3 years ago

1.20.0

3 years ago

1.19.0

3 years ago

1.18.0

3 years ago

1.17.2

3 years ago

1.17.1

3 years ago

1.17.0

3 years ago

1.16.0

3 years ago

1.15.0

3 years ago

1.14.0

3 years ago

1.13.0

3 years ago

1.12.0

3 years ago

1.11.0

3 years ago

1.10.0

3 years ago

1.9.0

3 years ago

1.8.0

3 years ago

1.7.0

3 years ago

1.6.0

3 years ago

1.5.0

3 years ago

1.4.1

3 years ago

1.4.0

3 years ago

1.3.0

3 years ago

1.2.0

3 years ago

1.1.0

3 years ago

1.0.0

3 years ago