@wix/ai-assistant-avatar 0.39.0

package/README.md

@@ -0,0 +1,343 @@
+# @wix/ai-assistant-avatar Usage Guide &nbsp;&nbsp;<img width="34" height="34" alt="Avatar (1)" src="https://github.com/user-attachments/assets/3f667860-eaa6-4cc4-bb9a-1d9d6e493c3a" />
+
+## Overview
+
+`@wix/ai-assistant-avatar` is a React component library that provides an animated avatar (Astro) for AI assistant interfaces. The avatar uses `@wix/aria-ai-avatar` to provide smooth, interactive animations including eye tracking, state transitions, and movement animations.
+
+### Key Features
+
+- **Animated Avatar Component**: Animated character with multiple states powered by `@wix/aria-ai-avatar`
+- **Eye Tracking**: Automatic eye movement following mouse cursor or typing position
+- **State Management**: Multiple animation states (idle, loading, thinking, etc.)
+- **Smooth Transitions**: Coordinated animations for moving between UI positions
+- **Imperative API**: Full control via ref methods for programmatic animation control
+
+## Installation
+
+```bash
+yarn add @wix/ai-assistant-avatar
+```
+
+### Peer Dependencies
+
+- `react`: `^16.8.0` or higher
+- `react-dom`: `^16.8.0` or higher
+
+### Runtime Dependencies
+
+The package includes these dependencies (automatically installed):
+- `@wix/aria-ai-avatar`: Avatar animation runtime
+- `classnames`: CSS class name utilities
+
+## Basic Usage
+
+```tsx
+import React, { useRef } from 'react';
+import { AiAssistantAvatar, AstroRef } from '@wix/ai-assistant-avatar';
+
+function MyComponent() {
+  const avatarRef = useRef<AstroRef>(null);
+
+  return (
+    <div>
+      <AiAssistantAvatar ref={avatarRef} />
+      <button onClick={() => avatarRef.current?.trigger.idle()}>
+        Reset to Idle
+      </button>
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### Component Props (`AstroProps`)
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `mode` | `'light' \| 'dark'` | lib default | Color mode of the avatar |
+| `variant` | `'2d' \| '3d'` | lib default | Visual variant of the avatar |
+
+The avatar uses fixed dimensions of 94x94 pixels (defined in `ASTRO_SIZE`).
+
+### Ref API (`AstroRef`)
+
+The component exposes an imperative handle via ref:
+
+#### Animation Triggers
+
+```typescript
+trigger: {
+  idle: () => Promise<void>;           // Switch to idle state
+  undo: () => Promise<void>;           // Undo event animation
+  ideaSpark: () => Promise<void>;      // Idea spark event animation
+  boredom: () => Promise<void>;        // Toggle between SLEEPING and IDLE states
+  bigLoader: () => Promise<void>;      // Toggle between BIG_LOADER and IDLE states
+  smallLoader: () => Promise<void>;    // Toggle to SMALL_LOADER (from SMALL state)
+  shrink: () => Promise<void>;         // Toggle between SMALL and IDLE states
+  publish: () => Promise<void>;        // Publish event animation
+}
+```
+
+#### Visibility & Interaction
+
+```typescript
+hide: () => void;      // Hide the avatar
+show: () => void;      // Show the avatar
+onMouseMove: (clientX: number, clientY: number) => void;  // Track mouse for eye movement
+onUserTyping: (caretX: number, caretY: number) => void;  // Track typing position
+onTravelHomeFrom: (x: number, y: number, options: MoveOptions) => Promise<void>;  // Animate from offset TO home position
+onTravelAwayTo: (x: number, y: number, options: MoveOptions) => Promise<void>;  // Animate from home TO offset position
+changeAstroColor: (color: string) => void;  // Change avatar color using any valid CSS color string (e.g. '#ff0000', 'rgb(255,0,0)')
+toggleAvatarBackground: () => void;  // Toggle avatar background visibility
+```
+
+#### State Properties
+
+```typescript
+avatarHidden: boolean;              // Whether the avatar is hidden
+getState: () => AvatarState;        // Get current animation state
+wrapper: HTMLDivElement | null;     // DOM wrapper element
+```
+
+## Examples
+
+### Example 1: State-Based Chat Avatar
+
+Complete example showing how to control avatar animations based on chat state, with mouse tracking:
+
+```tsx
+import React, { useRef, useEffect } from 'react';
+import { AiAssistantAvatar, AstroRef } from '@wix/ai-assistant-avatar';
+
+function ChatAvatar({
+  isLoading,
+  hasNewMessage
+}: {
+  isLoading: boolean;
+  hasNewMessage: boolean;
+}) {
+  const avatarRef = useRef<AstroRef>(null);
+
+  // Update avatar state based on chat status
+  useEffect(() => {
+    if (isLoading) {
+      avatarRef.current?.trigger.bigLoader();
+    } else if (hasNewMessage) {
+      avatarRef.current?.trigger.ideaSpark();
+      setTimeout(() => avatarRef.current?.trigger.idle(), 1000);
+    } else {
+      avatarRef.current?.trigger.idle();
+    }
+  }, [isLoading, hasNewMessage]);
+
+  // Enable eye tracking with mouse movement
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      avatarRef.current?.onMouseMove(e.clientX, e.clientY);
+    };
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, []);
+
+  return <AiAssistantAvatar ref={avatarRef} />;
+}
+```
+
+### Example 2: Single Instance with Portal Pattern
+
+For complex UIs where the avatar moves between positions (input box, messages, welcome screen), use a single avatar instance with React portals:
+
+```tsx
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { AiAssistantAvatar, AstroRef, AvatarState } from '@wix/ai-assistant-avatar';
+
+function AvatarManager() {
+  const avatarRef = useRef<AstroRef>(null);
+  const inputSlotRef = useRef<HTMLDivElement>(null);
+  const messageSlotRef = useRef<HTMLDivElement>(null);
+
+  const [activeSlot, setActiveSlot] = useState<HTMLDivElement | null>(null);
+  const [previousPosition, setPreviousPosition] = useState<DOMRect | null>(null);
+  const [moveOptions, setMoveOptions] = useState({ endState: AvatarState.IDLE });
+
+  // Animate when slot changes
+  useEffect(() => {
+    if (!avatarRef.current || !activeSlot) return;
+
+    const currentRect = avatarRef.current.wrapper?.getBoundingClientRect();
+    if (currentRect) {
+      const deltaX = previousPosition ? previousPosition.x - currentRect.x : 0;
+      const deltaY = previousPosition ? previousPosition.y - currentRect.y : 0;
+
+      avatarRef.current.onTravelHomeFrom(deltaX, deltaY, moveOptions).then(() => {
+        setPreviousPosition(currentRect);
+      });
+    }
+  }, [activeSlot]);
+
+  const moveToMessage = useCallback(() => {
+    if (!messageSlotRef.current) return;
+
+    // Capture current position before moving
+    const currentRect = avatarRef.current?.wrapper?.getBoundingClientRect();
+    if (currentRect) setPreviousPosition(currentRect);
+
+    setMoveOptions({ endState: AvatarState.SMALL_LOADER });
+    setActiveSlot(messageSlotRef.current);
+  }, []);
+
+  const moveToInput = useCallback(() => {
+    if (!inputSlotRef.current) return;
+
+    const currentRect = avatarRef.current?.wrapper?.getBoundingClientRect();
+    if (currentRect) setPreviousPosition(currentRect);
+
+    setMoveOptions({ endState: AvatarState.IDLE });
+    setActiveSlot(inputSlotRef.current);
+  }, []);
+
+  return (
+    <>
+      {/* Slot placeholders - avatar will portal into the active one */}
+      <div ref={inputSlotRef} />
+      <div ref={messageSlotRef} />
+
+      {/* Single avatar instance rendered via portal */}
+      {activeSlot && createPortal(
+        <AiAssistantAvatar ref={avatarRef} />,
+        activeSlot
+      )}
+
+      <button onClick={moveToMessage}>Move to Message</button>
+      <button onClick={moveToInput}>Move to Input</button>
+    </>
+  );
+}
+```
+
+### Example 3: Typing Position Tracking
+
+Track user's typing position so avatar eyes follow the caret:
+
+```tsx
+function InputWithAvatar() {
+  const avatarRef = useRef<AstroRef>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleInputChange = () => {
+    const input = inputRef.current;
+    if (!input || !avatarRef.current) return;
+
+    // Get caret position
+    const selectionStart = input.selectionStart || 0;
+    const rect = input.getBoundingClientRect();
+
+    // Calculate approximate caret position
+    const textBeforeCaret = input.value.substring(0, selectionStart);
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+
+    if (context) {
+      context.font = getComputedStyle(input).font;
+      const textWidth = context.measureText(textBeforeCaret).width;
+      const caretX = rect.left + textWidth;
+      const caretY = rect.top + rect.height / 2;
+
+      // Avatar eyes will follow the caret
+      avatarRef.current.onUserTyping(caretX, caretY);
+    }
+  };
+
+  return (
+    <div>
+      <input ref={inputRef} onChange={handleInputChange} />
+      <AiAssistantAvatar ref={avatarRef} />
+    </div>
+  );
+}
+```
+
+## Configuration Constants
+
+### Animation States (`AvatarState`)
+
+The `AvatarState` enum is exported from `@wix/ai-assistant-avatar`:
+
+```typescript
+import { AvatarState } from '@wix/ai-assistant-avatar';
+
+AvatarState.IDLE          // Default idle state
+AvatarState.SMALL         // Shrunk/minimized state
+AvatarState.SMALL_LOADER  // Small loading indicator
+AvatarState.BIG_LOADER    // Large loading indicator
+AvatarState.SLEEPING      // Boredom/sleeping state
+```
+
+### Size Constants (`ASTRO_SIZE`)
+
+```typescript
+ASTRO_SIZE = {
+  WIDTH: 94,
+  HEIGHT: 94,
+}
+```
+
+## Advanced Patterns
+
+### Visibility Control
+
+Control avatar visibility programmatically:
+
+```tsx
+// Hide/show avatar
+avatarRef.current?.hide();
+avatarRef.current?.show();
+
+// Check if hidden
+const isHidden = avatarRef.current?.avatarHidden;
+```
+
+### Background Toggle
+
+Toggle avatar background visibility:
+
+```tsx
+avatarRef.current?.toggleAvatarBackground();
+```
+
+## Best Practices
+
+1. **Single Instance with Portals**: Use a single avatar instance with `createPortal` for moving between UI positions
+2. **Animation Coordination**: Use the appropriate travel method based on direction:
+   - `onTravelHomeFrom(x, y)` - Avatar arriving: animates FROM offset TO home position
+   - `onTravelAwayTo(x, y)` - Avatar departing: animates FROM home TO offset position
+3. **Performance**: Control visibility with `hide()`/`show()` methods
+4. **State Management**: Use `AvatarState` enum instead of magic strings
+5. **Error Handling**: Wrap animation calls in try-catch blocks
+
+## Troubleshooting
+
+**Avatar not appearing**: Ensure ref is initialized and the portal target element exists in the DOM
+
+**Animations not triggering**: Verify ref is attached and methods are called after mount
+
+**Eye tracking not working**: Ensure `onMouseMove` receives viewport coordinates (`clientX`, `clientY`)
+
+**Position transitions not smooth**: Check that `onTravelHomeFrom` delta coordinates are calculated correctly (previous position minus current position)
+
+**Portal not rendering**: Ensure `activeSlot` state is set to a valid DOM element before rendering the portal
+
+## TypeScript Support
+
+The package includes full TypeScript definitions:
+
+```typescript
+import type { AstroRef, AstroProps, Position, MoveOptions } from '@wix/ai-assistant-avatar';
+import { AvatarState } from '@wix/ai-assistant-avatar';
+```
+
+## Additional Resources
+
+- Example Implementation: See `packages/ai-assistant-chat-ui` for a complete integration example with the portal pattern

package/dist/cjs/Astro/Astro.js

@@ -0,0 +1,200 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.AiAssistantAvatar = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _AstroModule = _interopRequireDefault(require("./Astro.module.scss"));
+var _config = require("./config");
+var _hooks = require("./hooks");
+var _DotTrail = require("./components/DotTrail");
+var _ariaAiAvatar = require("@wix/aria-ai-avatar");
+var _jsxFileName = "/home/builduser/work/4baef6c1cf3e5e6a/packages/ai-assistant-avatar/dist/cjs/Astro/Astro.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const AiAssistantAvatar = exports.AiAssistantAvatar = /*#__PURE__*/(0, _react.forwardRef)(({
+  mode,
+  variant
+}, ref) => {
+  const wrapperRef = (0, _react.useRef)(null);
+  const typingTimeout = (0, _react.useRef)(null);
+  const [isTyping, setIsTyping] = (0, _react.useState)(false);
+  const [showBg, setShowBg] = (0, _react.useState)(false);
+  const {
+    AriaAvatar,
+    avatarHidden,
+    setAvatarHidden
+  } = (0, _hooks.useAvatarSetup)({
+    mode,
+    variant
+  });
+  const {
+    setCenter
+  } = (0, _hooks.useMovement)(wrapperRef, _config.ASTRO_SIZE.WIDTH, _config.ASTRO_SIZE.HEIGHT);
+  const {
+    leadDotRef,
+    trailRefs,
+    hideDots,
+    moveFromOffsetWithDots,
+    moveToOffsetWithDots
+  } = (0, _hooks.useDotAnimation)(setCenter, setAvatarHidden, AriaAvatar.setState);
+  const onTravelHomeFrom = async (x, y, options) => {
+    const pos = {
+      x,
+      y
+    };
+    await moveFromOffsetWithDots(pos, options);
+  };
+  const onTravelAwayTo = async (x, y, options) => {
+    const pos = {
+      x,
+      y
+    };
+    await moveToOffsetWithDots(pos, options);
+  };
+  const onMouseMove = (clientX, clientY) => {
+    if (isTyping) {
+      return;
+    }
+    AriaAvatar.lookAt(clientX, clientY);
+  };
+  const onUserTyping = (caretX, caretY) => {
+    try {
+      setIsTyping(true);
+      AriaAvatar.lookAt(caretX, caretY);
+      if (typingTimeout.current) {
+        clearTimeout(typingTimeout.current);
+      }
+      typingTimeout.current = setTimeout(() => {
+        setIsTyping(false);
+      }, 500);
+    } catch (err) {
+      console.error('[Astro] Error tracking typing:', err);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (typingTimeout.current) {
+        clearTimeout(typingTimeout.current);
+      }
+    };
+  }, []);
+  const hideAvatar = ({
+    withDots = false
+  } = {}) => {
+    setAvatarHidden(true);
+    if (withDots) {
+      hideDots();
+    }
+  };
+  const showAvatar = () => {
+    setAvatarHidden(false);
+  };
+  (0, _react.useImperativeHandle)(ref, () => ({
+    trigger: {
+      shrink: () => {
+        if (AriaAvatar.getState() === _ariaAiAvatar.AvatarState.SMALL) {
+          return AriaAvatar.setState(_ariaAiAvatar.AvatarState.IDLE);
+        }
+        return AriaAvatar.setState(_ariaAiAvatar.AvatarState.SMALL);
+      },
+      smallLoader: () => {
+        if (AriaAvatar.getState() === _ariaAiAvatar.AvatarState.SMALL) {
+          return AriaAvatar.setState(_ariaAiAvatar.AvatarState.SMALL_LOADER);
+        }
+        return AriaAvatar.setState(_ariaAiAvatar.AvatarState.SMALL);
+      },
+      pulse: () => Promise.resolve(),
+      idle: async () => {
+        if (AriaAvatar.getState() === _ariaAiAvatar.AvatarState.SMALL_LOADER) {
+          await AriaAvatar.setState(_ariaAiAvatar.AvatarState.SMALL);
+        }
+        return AriaAvatar.setState(_ariaAiAvatar.AvatarState.IDLE);
+      },
+      undo: () => AriaAvatar.fireEvent(_ariaAiAvatar.AvatarEvent.UNDO_EVENT),
+      boredom: () => {
+        if (AriaAvatar.getState() === _ariaAiAvatar.AvatarState.SLEEPING) {
+          return AriaAvatar.setState(_ariaAiAvatar.AvatarState.IDLE);
+        }
+        return AriaAvatar.setState(_ariaAiAvatar.AvatarState.SLEEPING);
+      },
+      bigLoader: () => {
+        if (AriaAvatar.getState() === _ariaAiAvatar.AvatarState.BIG_LOADER) {
+          return AriaAvatar.setState(_ariaAiAvatar.AvatarState.IDLE);
+        }
+        return AriaAvatar.setState(_ariaAiAvatar.AvatarState.BIG_LOADER);
+      },
+      ideaSpark: () => AriaAvatar.fireEvent(_ariaAiAvatar.AvatarEvent.IDEA_SPARK),
+      publish: () => AriaAvatar.fireEvent(_ariaAiAvatar.AvatarEvent.PUBLISH_EVENT)
+    },
+    avatarHidden,
+    wrapper: wrapperRef.current,
+    getState: AriaAvatar.getState,
+    onMouseMove,
+    onUserTyping,
+    onTravelHomeFrom,
+    onTravelAwayTo,
+    changeAstroColor: color => {
+      AriaAvatar.setAvatarColor(color);
+    },
+    toggleAvatarBackground: () => {
+      if (showBg) {
+        setShowBg(false);
+        AriaAvatar.hideBg();
+      } else {
+        setShowBg(true);
+        AriaAvatar.showBg();
+      }
+    },
+    hide: hideAvatar,
+    show: showAvatar
+  }));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _AstroModule.default.avatar,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 172,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DotTrail.DotTrail, {
+    leadDotRef: leadDotRef,
+    trailRefs: trailRefs,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 173,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: wrapperRef,
+    className: _AstroModule.default.astro,
+    style: {
+      opacity: avatarHidden ? 0 : 1
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 175,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: _config.ASTRO_SIZE.WIDTH,
+      height: _config.ASTRO_SIZE.HEIGHT
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 182,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(AriaAvatar.AriaAvatar, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 183,
+      columnNumber: 13
+    }
+  }))));
+});
+//# sourceMappingURL=Astro.js.map

package/dist/cjs/Astro/Astro.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_AstroModule","_interopRequireDefault","_config","_hooks","_DotTrail","_ariaAiAvatar","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AiAssistantAvatar","exports","forwardRef","mode","variant","ref","wrapperRef","useRef","typingTimeout","isTyping","setIsTyping","useState","showBg","setShowBg","AriaAvatar","avatarHidden","setAvatarHidden","useAvatarSetup","setCenter","useMovement","ASTRO_SIZE","WIDTH","HEIGHT","leadDotRef","trailRefs","hideDots","moveFromOffsetWithDots","moveToOffsetWithDots","useDotAnimation","setState","onTravelHomeFrom","x","y","options","pos","onTravelAwayTo","onMouseMove","clientX","clientY","lookAt","onUserTyping","caretX","caretY","current","clearTimeout","setTimeout","err","console","error","useEffect","hideAvatar","withDots","showAvatar","useImperativeHandle","trigger","shrink","getState","AvatarState","SMALL","IDLE","smallLoader","SMALL_LOADER","pulse","Promise","resolve","idle","undo","fireEvent","AvatarEvent","UNDO_EVENT","boredom","SLEEPING","bigLoader","BIG_LOADER","ideaSpark","IDEA_SPARK","publish","PUBLISH_EVENT","wrapper","changeAstroColor","color","setAvatarColor","toggleAvatarBackground","hideBg","hide","show","createElement","className","s","avatar","__self","__source","fileName","lineNumber","columnNumber","DotTrail","astro","style","opacity","width","height"],"sources":["../../../src/Astro/Astro.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  Ref,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport s from './Astro.module.scss';\nimport type { AstroRef, AstroProps, MoveOptions } from './types';\nimport { ASTRO_SIZE } from './config';\nimport { useAvatarSetup, useMovement, useDotAnimation } from './hooks';\nimport { DotTrail } from './components/DotTrail';\nimport { AvatarEvent, AvatarState } from '@wix/aria-ai-avatar';\n\nexport const AiAssistantAvatar = forwardRef<AstroRef, AstroProps>(\n  ({ mode, variant }, ref: Ref<AstroRef> | null) => {\n    const wrapperRef = useRef<HTMLDivElement | null>(null);\n    const typingTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const [isTyping, setIsTyping] = useState(false);\n\n    const [showBg, setShowBg] = useState(false);\n\n    const { AriaAvatar, avatarHidden, setAvatarHidden } = useAvatarSetup({\n      mode,\n      variant,\n    });\n\n    const { setCenter } = useMovement(\n      wrapperRef,\n      ASTRO_SIZE.WIDTH,\n      ASTRO_SIZE.HEIGHT,\n    );\n\n    const {\n      leadDotRef,\n      trailRefs,\n      hideDots,\n      moveFromOffsetWithDots,\n      moveToOffsetWithDots,\n    } = useDotAnimation(setCenter, setAvatarHidden, AriaAvatar.setState);\n\n    const onTravelHomeFrom = async (\n      x: number,\n      y: number,\n      options?: MoveOptions,\n    ) => {\n      const pos = { x, y };\n      await moveFromOffsetWithDots(pos, options);\n    };\n\n    const onTravelAwayTo = async (\n      x: number,\n      y: number,\n      options?: MoveOptions,\n    ) => {\n      const pos = { x, y };\n      await moveToOffsetWithDots(pos, options);\n    };\n\n    const onMouseMove = (clientX: number, clientY: number) => {\n      if (isTyping) {\n        return;\n      }\n\n      AriaAvatar.lookAt(clientX, clientY);\n    };\n\n    const onUserTyping = (caretX: number, caretY: number) => {\n      try {\n        setIsTyping(true);\n        AriaAvatar.lookAt(caretX, caretY);\n\n        if (typingTimeout.current) {\n          clearTimeout(typingTimeout.current);\n        }\n\n        typingTimeout.current = setTimeout(() => {\n          setIsTyping(false);\n        }, 500);\n      } catch (err) {\n        console.error('[Astro] Error tracking typing:', err);\n      }\n    };\n\n    useEffect(() => {\n      return () => {\n        if (typingTimeout.current) {\n          clearTimeout(typingTimeout.current);\n        }\n      };\n    }, []);\n\n    const hideAvatar = ({ withDots = false }: { withDots?: boolean } = {}) => {\n      setAvatarHidden(true);\n\n      if (withDots) {\n        hideDots();\n      }\n    };\n\n    const showAvatar = () => {\n      setAvatarHidden(false);\n    };\n\n    useImperativeHandle(ref, () => ({\n      trigger: {\n        shrink: () => {\n          if (AriaAvatar.getState() === AvatarState.SMALL) {\n            return AriaAvatar.setState(AvatarState.IDLE);\n          }\n          return AriaAvatar.setState(AvatarState.SMALL);\n        },\n        smallLoader: () => {\n          if (AriaAvatar.getState() === AvatarState.SMALL) {\n            return AriaAvatar.setState(AvatarState.SMALL_LOADER);\n          }\n          return AriaAvatar.setState(AvatarState.SMALL);\n        },\n        pulse: () => Promise.resolve(),\n        idle: async () => {\n          if (AriaAvatar.getState() === AvatarState.SMALL_LOADER) {\n            await AriaAvatar.setState(AvatarState.SMALL);\n          }\n          return AriaAvatar.setState(AvatarState.IDLE);\n        },\n        undo: () => AriaAvatar.fireEvent(AvatarEvent.UNDO_EVENT),\n        boredom: () => {\n          if (AriaAvatar.getState() === AvatarState.SLEEPING) {\n            return AriaAvatar.setState(AvatarState.IDLE);\n          }\n          return AriaAvatar.setState(AvatarState.SLEEPING);\n        },\n        bigLoader: () => {\n          if (AriaAvatar.getState() === AvatarState.BIG_LOADER) {\n            return AriaAvatar.setState(AvatarState.IDLE);\n          }\n          return AriaAvatar.setState(AvatarState.BIG_LOADER);\n        },\n        ideaSpark: () => AriaAvatar.fireEvent(AvatarEvent.IDEA_SPARK),\n        publish: () => AriaAvatar.fireEvent(AvatarEvent.PUBLISH_EVENT),\n      },\n      avatarHidden,\n      wrapper: wrapperRef.current,\n      getState: AriaAvatar.getState,\n\n      onMouseMove,\n      onUserTyping,\n      onTravelHomeFrom,\n      onTravelAwayTo,\n\n      changeAstroColor: (color: string) => {\n        AriaAvatar.setAvatarColor(color);\n      },\n\n      toggleAvatarBackground: () => {\n        if (showBg) {\n          setShowBg(false);\n          AriaAvatar.hideBg();\n        } else {\n          setShowBg(true);\n          AriaAvatar.showBg();\n        }\n      },\n\n      hide: hideAvatar,\n      show: showAvatar,\n    }));\n\n    return (\n      <div className={s.avatar}>\n        <DotTrail leadDotRef={leadDotRef} trailRefs={trailRefs} />\n\n        <div\n          ref={wrapperRef}\n          className={s.astro}\n          style={{\n            opacity: avatarHidden ? 0 : 1,\n          }}\n        >\n          <div style={{ width: ASTRO_SIZE.WIDTH, height: ASTRO_SIZE.HEIGHT }}>\n            <AriaAvatar.AriaAvatar />\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/Astro/Astro.module.scss

@@ -0,0 +1,46 @@
+@mixin position {
+  opacity: 0;
+  margin: 16px;
+  border-radius: 50%;
+  position: absolute;
+}
+
+$astroZIndex: 3;
+
+.avatar {
+  width: 32px;
+  height: 32px;
+}
+
+.astro {
+  @include position;
+  z-index: $astroZIndex;
+  transition: opacity 80ms linear;
+  transform: translate3d(0, 0, 0);
+
+  clip-path: inset(23px 23px 23px 23px); // cut off the edges to stop hijacking mouse events. maybe we need to reduce canvas size itself instead of this.
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+
+.leadDot {
+  @include position;
+  z-index: $astroZIndex - 1;
+  transition: opacity 150ms ease-in-out;
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+
+.trailDot {
+  @include position;
+  z-index: $astroZIndex - 2;
+  transition: opacity 150ms ease-in-out;
+
+  @starting-style {
+    opacity: 0;
+  }
+}

package/dist/cjs/Astro/components/DotTrail.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.DotTrail = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _config = require("../config");
+var _AstroModule = _interopRequireDefault(require("../Astro.module.scss"));
+var _jsxFileName = "/home/builduser/work/4baef6c1cf3e5e6a/packages/ai-assistant-avatar/dist/cjs/Astro/components/DotTrail.tsx";
+const DotTrail = ({
+  leadDotRef,
+  trailRefs
+}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  ref: leadDotRef,
+  className: _AstroModule.default.leadDot,
+  style: {
+    width: _config.ANIMATION_CONFIG.DOT_SIZE,
+    height: _config.ANIMATION_CONFIG.DOT_SIZE,
+    background: _config.ANIMATION_CONFIG.DOT_COLOR
+  },
+  __self: void 0,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 12,
+    columnNumber: 5
+  }
+}), Array.from({
+  length: _config.ANIMATION_CONFIG.TRAIL_COUNT
+}).map((_, i) => /*#__PURE__*/_react.default.createElement("div", {
+  key: i,
+  ref: el => trailRefs.current[i] = el,
+  className: _AstroModule.default.trailDot,
+  style: {
+    width: _config.ANIMATION_CONFIG.DOT_SIZE,
+    height: _config.ANIMATION_CONFIG.DOT_SIZE,
+    background: _config.ANIMATION_CONFIG.DOT_COLOR,
+    filter: _config.ANIMATION_CONFIG.TRAIL_BLUR ? `blur(${_config.ANIMATION_CONFIG.TRAIL_BLUR}px)` : 'none'
+  },
+  __self: void 0,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 23,
+    columnNumber: 7
+  }
+})));
+exports.DotTrail = DotTrail;
+//# sourceMappingURL=DotTrail.js.map

package/dist/cjs/Astro/components/DotTrail.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_config","_AstroModule","_jsxFileName","DotTrail","leadDotRef","trailRefs","default","createElement","Fragment","ref","className","s","leadDot","style","width","ANIMATION_CONFIG","DOT_SIZE","height","background","DOT_COLOR","__self","__source","fileName","lineNumber","columnNumber","Array","from","length","TRAIL_COUNT","map","_","i","key","el","current","trailDot","filter","TRAIL_BLUR","exports"],"sources":["../../../../src/Astro/components/DotTrail.tsx"],"sourcesContent":["import React, { MutableRefObject } from 'react';\nimport { ANIMATION_CONFIG } from '../config';\nimport s from '../Astro.module.scss';\n\ntype DotTrailProps = {\n  leadDotRef: MutableRefObject<HTMLDivElement | null>;\n  trailRefs: MutableRefObject<(HTMLDivElement | null)[]>;\n};\n\nexport const DotTrail = ({ leadDotRef, trailRefs }: DotTrailProps) => (\n  <>\n    <div\n      ref={leadDotRef}\n      className={s.leadDot}\n      style={{\n        width: ANIMATION_CONFIG.DOT_SIZE,\n        height: ANIMATION_CONFIG.DOT_SIZE,\n        background: ANIMATION_CONFIG.DOT_COLOR,\n      }}\n    />\n\n    {Array.from({ length: ANIMATION_CONFIG.TRAIL_COUNT }).map((_, i) => (\n      <div\n        key={i}\n        ref={(el) => (trailRefs.current[i] = el)}\n        className={s.trailDot}\n        style={{\n          width: ANIMATION_CONFIG.DOT_SIZE,\n          height: ANIMATION_CONFIG.DOT_SIZE,\n          background: ANIMATION_CONFIG.DOT_COLOR,\n          filter: ANIMATION_CONFIG.TRAIL_BLUR\n            ? `blur(${ANIMATION_CONFIG.TRAIL_BLUR}px)`\n            : 'none',\n        }}\n      />\n    ))}\n  </>\n);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAH,sBAAA,CAAAC,OAAA;AAAqC,IAAAG,YAAA;AAO9B,MAAMC,QAAQ,GAAGA,CAAC;EAAEC,UAAU;EAAEC;AAAyB,CAAC,kBAC/DR,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAAAV,MAAA,CAAAS,OAAA,CAAAE,QAAA,qBACEX,MAAA,CAAAS,OAAA,CAAAC,aAAA;EACEE,GAAG,EAAEL,UAAW;EAChBM,SAAS,EAAEC,oBAAC,CAACC,OAAQ;EACrBC,KAAK,EAAE;IACLC,KAAK,EAAEC,wBAAgB,CAACC,QAAQ;IAChCC,MAAM,EAAEF,wBAAgB,CAACC,QAAQ;IACjCE,UAAU,EAAEH,wBAAgB,CAACI;EAC/B,CAAE;EAAAC,MAAA;EAAAC,QAAA;IAAAC,QAAA,EAAApB,YAAA;IAAAqB,UAAA;IAAAC,YAAA;EAAA;AAAA,CACH,CAAC,EAEDC,KAAK,CAACC,IAAI,CAAC;EAAEC,MAAM,EAAEZ,wBAAgB,CAACa;AAAY,CAAC,CAAC,CAACC,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,kBAC7DlC,MAAA,CAAAS,OAAA,CAAAC,aAAA;EACEyB,GAAG,EAAED,CAAE;EACPtB,GAAG,EAAGwB,EAAE,IAAM5B,SAAS,CAAC6B,OAAO,CAACH,CAAC,CAAC,GAAGE,EAAI;EACzCvB,SAAS,EAAEC,oBAAC,CAACwB,QAAS;EACtBtB,KAAK,EAAE;IACLC,KAAK,EAAEC,wBAAgB,CAACC,QAAQ;IAChCC,MAAM,EAAEF,wBAAgB,CAACC,QAAQ;IACjCE,UAAU,EAAEH,wBAAgB,CAACI,SAAS;IACtCiB,MAAM,EAAErB,wBAAgB,CAACsB,UAAU,GAC/B,QAAQtB,wBAAgB,CAACsB,UAAU,KAAK,GACxC;EACN,CAAE;EAAAjB,MAAA;EAAAC,QAAA;IAAAC,QAAA,EAAApB,YAAA;IAAAqB,UAAA;IAAAC,YAAA;EAAA;AAAA,CACH,CACF,CACD,CACH;AAACc,OAAA,CAAAnC,QAAA,GAAAA,QAAA","ignoreList":[]}