feat: set ai friend profile picture and background add Edge glow effect

总结一下四个任务的变更：

1. companionStore.ts — 新增 avatarUrl / backgroundUrl 状态及对应的 setter
2. CompanionVideoPanel.tsx — 中间头像区域支持上传图片（hover 显示编辑按钮），背景支持上传替换（左上角按钮），生成时背景不再变色
3. CompanionTranscript.tsx — 对话容器和输入框在 AI 回复时（generating || speaking）边框变为紫色发光效果
4. Companion.tsx — 将 generating / speaking 传递给子组件

desktop/src/components/companion/CompanionTranscript.tsx

@@ -4,11 +4,12 @@ import { useTranslation } from '../../i18n'
 interface CompanionTranscriptProps {
   transcript: string
   fullTranscript: string
+  generating: boolean
   onSendText: (text: string) => void
   disabled?: boolean
 }
 
-export function CompanionTranscript({ transcript, fullTranscript, onSendText, disabled }: CompanionTranscriptProps) {
+export function CompanionTranscript({ transcript, fullTranscript, generating, onSendText, disabled }: CompanionTranscriptProps) {
   const scrollRef = useRef<HTMLDivElement>(null)
   const [inputValue, setInputValue] = useState('')
   const t = useTranslation()
@@ -38,7 +39,11 @@ export function CompanionTranscript({ transcript, fullTranscript, onSendText, di
       {/* Transcript display */}
       <div
         ref={scrollRef}
-        className="max-h-[150px] overflow-y-auto rounded-2xl bg-black/40 backdrop-blur-md border border-white/10 p-4 mb-2 scrollbar-thin"
+        className={`max-h-[150px] overflow-y-auto rounded-2xl bg-black/40 backdrop-blur-md border p-4 mb-2 scrollbar-thin transition-all duration-500 ${
+          generating
+            ? 'border-purple-500/50 shadow-[0_0_20px_rgba(147,51,234,0.2)]'
+            : 'border-white/10'
+        }`}
       >
         {fullTranscript && (
           <div className="text-white/40 text-xs mb-2 whitespace-pre-wrap leading-relaxed">
@@ -59,7 +64,11 @@ export function CompanionTranscript({ transcript, fullTranscript, onSendText, di
       </div>
 
       {/* Text input row */}
-      <div className="flex items-center gap-2 rounded-2xl bg-black/40 backdrop-blur-md border border-white/10 px-4 py-2">
+      <div className={`flex items-center gap-2 rounded-2xl bg-black/40 backdrop-blur-md border px-4 py-2 transition-all duration-500 ${
+          generating
+            ? 'border-purple-500/50 shadow-[0_0_20px_rgba(147,51,234,0.2)]'
+            : 'border-white/10'
+        }`}>
         <input
           type="text"
           value={inputValue}

desktop/src/components/companion/CompanionVideoPanel.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useCallback } from 'react'
 import { useTranslation } from '../../i18n'
+import { useCompanionStore } from '../../stores/companionStore'
 import type { CompanionStatus } from '../../types/companion'
 
 interface CompanionVideoPanelProps {
@@ -16,7 +17,13 @@ export function CompanionVideoPanel({
   status,
 }: CompanionVideoPanelProps) {
   const videoRef = useRef<HTMLVideoElement>(null)
+  const avatarFileRef = useRef<HTMLInputElement>(null)
+  const bgFileRef = useRef<HTMLInputElement>(null)
   const t = useTranslation()
+  const avatarUrl = useCompanionStore((s) => s.avatarUrl)
+  const backgroundUrl = useCompanionStore((s) => s.backgroundUrl)
+  const setAvatarUrl = useCompanionStore((s) => s.setAvatarUrl)
+  const setBackgroundUrl = useCompanionStore((s) => s.setBackgroundUrl)
 
   useEffect(() => {
     if (videoRef.current && webcamStream) {
@@ -24,6 +31,39 @@ export function CompanionVideoPanel({
     }
   }, [webcamStream])
 
+  const handleAvatarPick = useCallback(() => {
+    avatarFileRef.current?.click()
+  }, [])
+
+  const handleBgPick = useCallback(() => {
+    bgFileRef.current?.click()
+  }, [])
+
+  const handleAvatarFile = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0]
+      if (!file) return
+      const reader = new FileReader()
+      reader.onload = () => setAvatarUrl(reader.result as string)
+      reader.readAsDataURL(file)
+      // Reset so the same file can be re-selected
+      e.target.value = ''
+    },
+    [setAvatarUrl],
+  )
+
+  const handleBgFile = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0]
+      if (!file) return
+      const reader = new FileReader()
+      reader.onload = () => setBackgroundUrl(reader.result as string)
+      reader.readAsDataURL(file)
+      e.target.value = ''
+    },
+    [setBackgroundUrl],
+  )
+
   const statusLabel = generating
     ? t('companion.speaking')
     : speaking
@@ -34,32 +74,86 @@ export function CompanionVideoPanel({
 
   return (
     <div className="companion-video-panel absolute inset-0 overflow-hidden">
-      {/* Background gradient */}
-      <div
-        className={`absolute inset-0 transition-all duration-700 ${
-          generating
-            ? 'bg-gradient-to-br from-indigo-950 via-purple-900 to-slate-950'
-            : 'bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900'
-        }`}
+      {/* Background */}
+      {backgroundUrl ? (
+        <div
+          className="absolute inset-0 bg-cover bg-center transition-all duration-700"
+          style={{ backgroundImage: `url(${backgroundUrl})` }}
+        />
+      ) : (
+        <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 transition-all duration-700" />
+      )}
+
+      {/* Background edit button */}
+      <button
+        type="button"
+        onClick={handleBgPick}
+        className="absolute top-4 left-4 flex items-center gap-1.5 px-2.5 py-1.5 rounded-full bg-black/30 backdrop-blur-sm text-white/50 hover:text-white/80 hover:bg-black/50 transition-all text-xs"
+        title="Change background"
+      >
+        <span className="material-symbols-outlined text-sm">image</span>
+        Background
+      </button>
+      <input
+        ref={bgFileRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={handleBgFile}
       />
 
       {/* AI Presence indicator */}
       <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center gap-4">
-        <div
-          className={`w-32 h-32 rounded-full transition-all duration-500 flex items-center justify-center ${
-            generating
-              ? 'bg-purple-600/30 shadow-[0_0_60px_rgba(147,51,234,0.4)] animate-pulse'
-              : speaking
-              ? 'bg-blue-500/20 shadow-[0_0_30px_rgba(59,130,246,0.3)]'
-              : 'bg-gray-600/10'
-          }`}
-        >
-          <span className="material-symbols-outlined text-5xl text-white/60">
-            {generating ? 'record_voice_over' : 'psychology'}
-          </span>
+        <div className="relative group">
+          <div
+            className={`w-32 h-32 rounded-full transition-all duration-500 flex items-center justify-center overflow-hidden ${
+              generating
+                ? 'shadow-[0_0_60px_rgba(147,51,234,0.4)] animate-pulse ring-2 ring-purple-500/50'
+                : speaking
+                ? 'shadow-[0_0_30px_rgba(59,130,246,0.3)] ring-2 ring-blue-500/30'
+                : ''
+            }`}
+          >
+            {avatarUrl ? (
+              <img
+                src={avatarUrl}
+                alt="avatar"
+                className="w-full h-full object-cover"
+              />
+            ) : (
+              <div
+                className={`w-full h-full flex items-center justify-center ${
+                  generating
+                    ? 'bg-purple-600/30'
+                    : speaking
+                    ? 'bg-blue-500/20'
+                    : 'bg-gray-600/10'
+                }`}
+              >
+                <span className="material-symbols-outlined text-5xl text-white/60">
+                  {generating ? 'record_voice_over' : 'psychology'}
+                </span>
+              </div>
+            )}
+          </div>
+          {/* Avatar edit overlay */}
+          <button
+            type="button"
+            onClick={handleAvatarPick}
+            className="absolute -bottom-1 -right-1 w-8 h-8 rounded-full bg-purple-600/80 hover:bg-purple-600 flex items-center justify-center transition-all opacity-0 group-hover:opacity-100 shadow-lg"
+          >
+            <span className="material-symbols-outlined text-sm text-white">edit</span>
+          </button>
         </div>
         <span className="text-white/40 text-sm font-medium">{statusLabel}</span>
       </div>
+      <input
+        ref={avatarFileRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={handleAvatarFile}
+      />
 
       {/* Webcam PiP overlay */}
       {webcamStream && (

desktop/src/pages/Companion.tsx

@@ -101,6 +101,7 @@ export function Companion() {
       <CompanionTranscript
         transcript={transcript}
         fullTranscript={fullTranscript}
+        generating={generating || speaking}
         onSendText={handleSendText}
         disabled={status !== 'connected'}
       />

desktop/src/stores/companionStore.ts

@@ -12,6 +12,8 @@ interface CompanionStore {
   micEnabled: boolean
   cameraEnabled: boolean
   error: string | null
+  avatarUrl: string | null
+  backgroundUrl: string | null
 
   setServerUrl: (url: string) => void
   setVoiceName: (name: string) => void
@@ -24,6 +26,8 @@ interface CompanionStore {
   setMicEnabled: (enabled: boolean) => void
   setCameraEnabled: (enabled: boolean) => void
   setError: (error: string | null) => void
+  setAvatarUrl: (url: string | null) => void
+  setBackgroundUrl: (url: string | null) => void
   reset: () => void
 }
 
@@ -40,6 +44,8 @@ export const useCompanionStore = create<CompanionStore>((set) => ({
   micEnabled: true,
   cameraEnabled: true,
   error: null,
+  avatarUrl: null,
+  backgroundUrl: null,
 
   setServerUrl: (url) => set({ serverUrl: url }),
   setVoiceName: (name) => set({ voiceName: name }),
@@ -54,6 +60,8 @@ export const useCompanionStore = create<CompanionStore>((set) => ({
   setMicEnabled: (enabled) => set({ micEnabled: enabled }),
   setCameraEnabled: (enabled) => set({ cameraEnabled: enabled }),
   setError: (error) => set({ error }),
+  setAvatarUrl: (url) => set({ avatarUrl: url }),
+  setBackgroundUrl: (url) => set({ backgroundUrl: url }),
   reset: () =>
     set({
       status: 'disconnected',