AI Assistant Animation Sample

This React project demonstrates an interactive assistant animation system. It allows users to toggle between animations, control talking states, and view an animated assistant built with Lottie Player and styled with Ant Design and Emotion.

[Demo]

Features

• Interactive assistant animations:
  • Loading Animation
  • Wave Animation
• User-controlled talking state (on/off).
• Clean UI with Ant Design components and Emotion styling.

Project Structure

• AssistantAnimationSample.jsx: The main component allowing users to interact with and control the assistant animations.
• Assistant.jsx: A reusable assistant component that displays the animation with a glowing container and optional "talking" state.
• Animation Files:
  • animation-loading.json: Lottie file for the loading animation.
  • animation-wave.json: Lottie file for the wave animation.

Usage

Rendering the AssistantAnimationSample Component

This component provides a demo UI for controlling the assistant animation. Users can select an animation type and toggle whether the assistant is "talking."

import AssistantAnimationSample from "./AssistantAnimationSample";

function App() {
  return (
    <div className="App">
      <AssistantAnimationSample />
    </div>
  );
}

Assistant Component

The Assistant component is a reusable unit that displays the animated assistant with a glowing container and configurable animation and talking states.

Props for Assistant

Prop	Type	Description
isTalking	Boolean	Controls whether the assistant "talks".
src	String	Lottie animation source file.

Example Usage

<Assistant src="path-to-animation.json" isTalking={true} />

Key Functionalities

AssistantAnimationSample

• Animation Selection: Users can switch between the "Loading Animation" and "Wave Animation" using a dropdown menu.
• Talking State: A toggle switch allows users to turn the assistant's "talking" state on or off, which activates the animation overlay.

Assistant

• Displays a glowing container with a static robot icon (using Phosphor Icons).
• Plays the Lottie animation on top of the glowing background when the isTalking prop is true.

Styling

This project uses Emotion for styling. Below is an example of the GlowContainer style:

const Styled = {
  GlowContainer: styled.div`
    width: 278px;
    height: 278px;
    background: #ffffff;
    box-shadow: 0px 0px 40.57px 20.285px rgba(5, 101, 223, 0.08);
    border-radius: 633.273px;
    display: flex;
    justify-content: center;
    align-items: center;
  `,
};

Dependencies

This project uses the following libraries:

• @lottiefiles/react-lottie-player: For Lottie animations.
• @phosphor-icons/react: For the static robot icon.
• @emotion/styled: For styled-components-like styling.
• antd: For the UI components (e.g., Flex, Select, Switch, Typography).