sinsintro-ai-assistant-dh/src/frontend/VoiceAssistant.css

A single npm package providing a React-based voice assistant with OpenAI function-calling, purely client-side.

/* src/frontend/VoiceAssistant.css */

/* The floating circle in the bottom-right corner */
.voice-assistant-circle {
  position: fixed;
  bottom: 20px; /* adjust spacing as needed */
  right: 20px;  /* adjust spacing as needed */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  z-index: 9999; /* ensure it is on top of everything else */
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.5s ease;
}

/* The circle when idle (not listening or speaking) */
.voice-assistant-circle.idle {
  background-color: gray;
}

/* The circle's active state: animated gradient */
.voice-assistant-circle.active {
  background: linear-gradient(
    -45deg,
    #ee7752,
    #e73c7e,
    #23a6d5,
    #23d5ab
  );
  background-size: 400% 400%;
  animation: gradientAnimation 3s ease infinite;
}

/* Keyframes for the gradient animation */
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}