refactor: complete Wave AI widget remake

- Overhaul chat interface with improved message containers and styling
- Enhance responsive layout for better space utilization
- Redesign typing indicator with new animation and visual appearance
- Add message actions for copy, edit, and repeat functionality

Author: DepsCian

frontend/app/element/typingindicator.scss

@@ -1,46 +1,54 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-$dot-width: 11px;
-$dot-color: var(--success-color);
-$speed: 1.5s;
+.typing-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    padding: 0;
 
-.typing {
-    position: relative;
-    height: $dot-width;
+    &-bubble {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(from var(--accent-color) r g b / 0.1);
+        border-radius: 20px;
+        padding: 6px 12px;
+        gap: 4px;
+    }
 
-    span {
-        content: "";
-        animation: blink $speed infinite;
-        animation-fill-mode: both;
-        height: $dot-width;
-        width: $dot-width;
-        background: $dot-color;
-        position: absolute;
-        left: 0;
-        top: 0;
+    &-dot {
+        width: 6px;
+        height: 6px;
         border-radius: 50%;
+        background-color: var(--accent-color);
+        opacity: 0.7;
+
+        &:nth-child(1) {
+            animation: typing-animation 1.4s infinite ease-in-out;
+            animation-delay: 0s;
+        }
 
         &:nth-child(2) {
+            animation: typing-animation 1.4s infinite ease-in-out;
             animation-delay: 0.2s;
-            margin-left: $dot-width * 1.5;
         }
 
         &:nth-child(3) {
+            animation: typing-animation 1.4s infinite ease-in-out;
             animation-delay: 0.4s;
-            margin-left: $dot-width * 3;
         }
     }
 }
 
-@keyframes blink {
-    0% {
-        opacity: 0.1;
+@keyframes typing-animation {
+    0%,
+    100% {
+        transform: translateY(0);
     }
-    20% {
+    50% {
+        transform: translateY(-5px);
         opacity: 1;
     }
-    100% {
-        opacity: 0.1;
-    }
 }

frontend/app/element/typingindicator.tsx

@@ -1,21 +1,22 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { clsx } from "clsx";
-
+import React from "react";
 import "./typingindicator.scss";
 
-type TypingIndicatorProps = {
+export interface TypingIndicatorProps {
+    style?: React.CSSProperties;
     className?: string;
-};
-const TypingIndicator = ({ className }: TypingIndicatorProps) => {
+}
+
+export const TypingIndicator: React.FC<TypingIndicatorProps> = ({ style, className }) => {
     return (
-        <div className={clsx("typing", className)}>
-            <span></span>
-            <span></span>
-            <span></span>
+        <div className={`typing-indicator ${className || ""}`} style={style}>
+            <div className="typing-indicator-bubble">
+                <div className="typing-indicator-dot"></div>
+                <div className="typing-indicator-dot"></div>
+                <div className="typing-indicator-dot"></div>
+            </div>
         </div>
     );
 };
-
-export { TypingIndicator };