feat: Add user settings for voice and persona

Introduces a new `UserSettings` interface and default settings. This allows users to customize voice preferences (name, style, gender) and persona characteristics within the application. This enhances personalization and user experience by tailoring interactions to individual needs and preferences.

components/Tooltip.tsx

@@ -0,0 +1,46 @@
+
+import React, { useState } from 'react';
+
+interface TooltipProps {
+  content: string;
+  children: React.ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const Tooltip: React.FC<TooltipProps> = ({ content, children, position = 'top' }) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const positionClasses = {
+    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+    left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+    right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+  };
+
+  const arrowClasses = {
+    top: 'top-full left-1/2 -translate-x-1/2 border-t-slate-800',
+    bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-slate-800',
+    left: 'left-full top-1/2 -translate-y-1/2 border-l-slate-800',
+    right: 'right-full top-1/2 -translate-y-1/2 border-r-slate-800',
+  };
+
+  return (
+    <div 
+      className="relative inline-block group"
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+      onFocus={() => setIsVisible(true)}
+      onBlur={() => setIsVisible(false)}
+    >
+      {children}
+      {isVisible && (
+        <div className={`absolute z-[100] w-max max-w-xs px-3 py-2 text-[11px] font-medium text-white bg-slate-800 rounded-lg shadow-xl animate-in fade-in zoom-in-95 duration-200 pointer-events-none ${positionClasses[position]}`}>
+          {content}
+          <div className={`absolute border-4 border-transparent ${arrowClasses[position]}`} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default React.memo(Tooltip);