@pheem49/mint 1.15.0 → 1.16.0

package/src/renderer/src/companionWidget.ts

@@ -1,95 +0,0 @@
-import { useEffect, useState } from 'react'
-
-/**
- * Live2D companion widget + proactive-suggestion state — desktop only.
- * Extracted out of MintDashboard.tsx as prep work for merging that
- * component with the web renderer's copy, which has neither feature
- * (no `ModelPanel`, no `window.api.onProactiveSuggestion`). Pure
- * extraction: every value/handler here behaves identically to when it
- * lived inline in MintDashboard.tsx.
- *
- * `handleModelInteraction` (turns a model poke into a chat message) and
- * `toastMessage`/`showToast` stay in MintDashboard.tsx itself — both
- * reach into dashboard-wide state (the chat-sending setters, the error
- * banner, `DashboardSidebar`'s toast trigger) that isn't part of the
- * widget's own concern.
- */
-export function useCompanionWidget(onError: (message: string) => void) {
-  const [modelVisible, setModelVisible] = useState(() => window.localStorage.getItem('mint:model-visible') !== 'false')
-  const [scale, setScale] = useState(1.00)
-  const [interactionEnabled, setInteractionEnabled] = useState(() => window.localStorage.getItem('mint:interaction-enabled') !== 'false')
-  const [showInteractionGuide, setShowInteractionGuide] = useState(() => window.localStorage.getItem('mint:interaction-guide-visible') !== 'false')
-  const [isLocked, setIsLocked] = useState(false)
-  const [layoutPreset, setLayoutPreset] = useState<'chat-wide' | 'model-wide'>(() => (window.localStorage.getItem('mint:layout-preset') as 'chat-wide' | 'model-wide') || 'chat-wide')
-  const [expressionIndex, setExpressionIndex] = useState(0)
-  const [accessoryIndex, setAccessoryIndex] = useState(0)
-  const [modelReady, setModelReady] = useState(false)
-  const [proactiveSuggestion, setProactiveSuggestion] = useState<any>(null)
-
-  useEffect(() => {
-    const unlistenProactive = window.api.onProactiveSuggestion?.((suggestion: any) => {
-      setProactiveSuggestion(suggestion)
-    })
-    return () => {
-      unlistenProactive?.then?.((unlisten) => unlisten?.())
-    }
-  }, [])
-
-  const toggleModel = () => {
-    const next = !modelVisible
-    window.localStorage.setItem('mint:model-visible', String(next))
-    setModelVisible(next)
-  }
-
-  const changeLayoutPreset = (preset: 'chat-wide' | 'model-wide') => {
-    window.localStorage.setItem('mint:layout-preset', preset)
-    setLayoutPreset(preset)
-  }
-
-  const updateInteractionEnabled = (enabled: boolean) => {
-    window.localStorage.setItem('mint:interaction-enabled', String(enabled))
-    setInteractionEnabled(enabled)
-  }
-
-  const updateInteractionGuide = (visible: boolean) => {
-    window.localStorage.setItem('mint:interaction-guide-visible', String(visible))
-    setShowInteractionGuide(visible)
-  }
-
-  const dismissProactiveSuggestion = () => setProactiveSuggestion(null)
-
-  const handleProactiveAction = async (action: any) => {
-    setProactiveSuggestion(null)
-    if (action && action.type !== 'none') {
-      try {
-        await window.api.executeProactiveAction(action)
-      } catch (err) {
-        onError(String(err))
-      }
-    }
-  }
-
-  return {
-    modelVisible,
-    scale,
-    interactionEnabled,
-    showInteractionGuide,
-    isLocked,
-    layoutPreset,
-    expressionIndex,
-    accessoryIndex,
-    modelReady,
-    proactiveSuggestion,
-    setScale,
-    setIsLocked,
-    setExpressionIndex,
-    setAccessoryIndex,
-    setModelReady,
-    toggleModel,
-    changeLayoutPreset,
-    updateInteractionEnabled,
-    updateInteractionGuide,
-    dismissProactiveSuggestion,
-    handleProactiveAction,
-  }
-}

package/src/renderer/src/components/Live2DStage.tsx

@@ -1,412 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import * as PIXI from 'pixi.js'
-
-// Ensure PIXI is available globally for the live2d library
-;(window as any).PIXI = PIXI
-
-interface Live2DStageProps {
-  scale: number
-  expressionIndex: number
-  accessoryIndex: number
-  isLocked: boolean
-  isActive?: boolean
-  onLoadComplete?: () => void
-}
-
-// Map Expression Index to Live2D Expression Name
-const EXPRESSION_MAP: Record<number, string | null> = {
-  0: null,          // Default (normal)
-  1: 'Dazed',       // 呆猫 (Dumb Cat)
-  2: 'DazedEyes',   // 呆猫眼珠摇晃 (Dumb Cat Eye Roll)
-  3: 'Photo',       // 拍照 (Take Photo)
-  4: 'Click',       // 点一下 (Poke)
-  5: 'CatFilter',   // 猫咪滤镜 (Cat Filter)
-}
-
-// Map Accessory Index to Live2D Expression Name
-const ACCESSORY_MAP: Record<number, string | null> = {
-  0: null,          // Default (none)
-  1: 'Apron',       // ผ้ากันเปื้อน (Apron)
-  2: 'Glasses',     // 眼鏡 (Glasses)
-  3: 'Pen',         // 拿笔 (Hold Pen)
-}
-
-const TRACKING_SPEED = 1.25
-const MAX_DEVICE_PIXEL_RATIO = 1.25
-const IDLE_MAX_FPS = 24
-const INTERACTION_MAX_FPS = 45
-
-const clampToUnitCircle = (x: number, y: number) => {
-  if (isNaN(x) || isNaN(y) || !isFinite(x) || !isFinite(y)) {
-    return { x: 0, y: 0 }
-  }
-  const distance = Math.hypot(x, y)
-  if (distance <= 1) return { x, y }
-
-  return {
-    x: x / distance,
-    y: y / distance,
-  }
-}
-
-export default function Live2DStage({ scale, expressionIndex, accessoryIndex, isLocked, isActive = true, onLoadComplete }: Live2DStageProps) {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const modelRef = useRef<any>(null)
-  const appRef = useRef<PIXI.Application | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [shouldRender, setShouldRender] = useState(isActive)
-  const baseWidthRef = useRef<number | null>(null)
-  const baseHeightRef = useRef<number | null>(null)
-  const pointerInsideRef = useRef(false)
-
-  useEffect(() => {
-    if (isActive && !shouldRender) {
-      setShouldRender(true)
-    }
-  }, [isActive, shouldRender])
-
-  const setRenderActive = (active: boolean, interactive = pointerInsideRef.current) => {
-    const app = appRef.current
-    const model = modelRef.current
-    if (!app) return
-
-    // The model idles for most of a chat session. Keep its animation smooth
-    // without reserving a 60 FPS GPU budget until the user actually hovers it.
-    app.ticker.maxFPS = interactive && !isLocked ? INTERACTION_MAX_FPS : IDLE_MAX_FPS
-    if (model) {
-      model.autoUpdate = active
-      model.renderable = active
-    }
-
-    if (active) {
-      app.start()
-      app.render()
-    } else {
-      app.stop()
-    }
-  }
-
-  useEffect(() => {
-    if (!shouldRender) return
-    if (!canvasRef.current || !containerRef.current) return
-
-    let isMounted = true
-    let appInstance: PIXI.Application | null = null
-
-    // Load Live2D engine and model dynamically
-    const initLive2D = async () => {
-      try {
-        // Dynamically import to ensure window.PIXI exists first
-        const { Live2DModel } = await import('pixi-live2d-display/cubism4')
-
-        // Register ticker
-        try {
-          Live2DModel.registerTicker(PIXI.Ticker as any)
-        } catch (e) {
-          // Already registered
-        }
-
-        if (!isMounted) return
-
-        // Create Pixi Application
-        appInstance = new PIXI.Application({
-          view: canvasRef.current!,
-          backgroundAlpha: 0,
-          antialias: false,
-          autoDensity: true,
-          resolution: Math.min(window.devicePixelRatio || 1, MAX_DEVICE_PIXEL_RATIO),
-          resizeTo: containerRef.current!,
-        })
-        appInstance.ticker.maxFPS = IDLE_MAX_FPS
-        appInstance.ticker.minFPS = 10
-        appRef.current = appInstance
-
-        // Load the Live2D model (served from public/models)
-        const modelUrl = './models/Shiroko_Model/Shiroko/Shiroko_Core/shiroko.model3.json'
-        
-        let json: any
-        try {
-          const res = await fetch(modelUrl)
-          if (!res.ok) {
-            throw new Error(`HTTP error ${res.status}: ${res.statusText}`)
-          }
-          json = await res.json()
-          
-          // Inject the URL so pixi-live2d-display can resolve relative paths
-          json.url = modelUrl
-        } catch (e) {
-          console.error("Debug: Failed to fetch and parse JSON:", e)
-          throw e
-        }
-        
-        const model = await Live2DModel.from(json)
-        if (!isMounted) {
-          model.destroy()
-          return
-        }
-
-        modelRef.current = model
-        baseWidthRef.current = model.width || model.internalModel?.originalWidth || 1000
-        baseHeightRef.current = model.height || model.internalModel?.originalHeight || 1000
-        appInstance.stage.addChild(model as any)
-
-        // Fit model size and position relative to canvas
-        const fitModel = () => {
-          if (!modelRef.current || !appRef.current) return
-          const m = modelRef.current
-          const stageHeight = appRef.current.screen.height
-          const stageWidth = appRef.current.screen.width
-          
-          if (stageWidth < 100 || stageHeight < 100) return
-          
-          const baseWidth = baseWidthRef.current || m.width || 1000
-          const baseHeight = baseHeightRef.current || m.height || 1000
-          
-          const widthScale = stageWidth / baseWidth
-          const heightScale = stageHeight / baseHeight
-          
-          const modelScale = Math.min(widthScale, heightScale) * 1.85 * scale
-          m.scale.set(modelScale)
-          
-          // Center-center alignment with 55% Y offset
-          m.anchor.set(0.5, 0.5)
-          m.x = stageWidth / 2
-          m.y = stageHeight / 2 + stageHeight * 0.55
-        }
-
-        fitModel()
-        
-        // Handle resizing
-        appInstance.renderer.on('resize', fitModel)
-
-        // Enable mouse tracking interactions
-        model.interactive = true
-
-        const focusController = model.internalModel.focusController
-        const updateFocus = focusController.update.bind(focusController)
-        focusController.update = (deltaMs: number) => updateFocus(deltaMs * TRACKING_SPEED)
-
-        // Match the extra mouse-driven parameters configured by the original VTube Studio model.
-        model.internalModel.on('beforeModelUpdate', () => {
-          const focus = model.internalModel.focusController
-          const coreModel = model.internalModel.coreModel as {
-            setParameterValueById: (parameterId: string, value: number) => void
-          }
-
-          coreModel.setParameterValueById('Param77', focus.x * 10)
-          coreModel.setParameterValueById('Param78', focus.y)
-          coreModel.setParameterValueById('Param83', focus.x)
-          coreModel.setParameterValueById('Param86', focus.y)
-        })
-
-        applyExpressionAndAccessory(model, expressionIndex, accessoryIndex)
-        setRenderActive(isActive && document.visibilityState === 'visible')
-        setLoading(false)
-        onLoadComplete?.()
-      } catch (err) {
-        console.error('Failed to load Live2D model:', err)
-        setLoading(false)
-        onLoadComplete?.()
-      }
-    }
-
-    initLive2D()
-
-    return () => {
-      isMounted = false
-      if (appInstance) {
-        appInstance.destroy(true, {
-          children: true,
-          texture: true,
-          baseTexture: true,
-        })
-        appRef.current = null
-      }
-      modelRef.current = null
-    }
-  }, [shouldRender])
-
-  // Update scale & position dynamically when scale changes or container resizes
-  useEffect(() => {
-    if (!containerRef.current) return
-
-    const handleResize = () => {
-      if (!isActive) return
-      if (!modelRef.current || !appRef.current) return
-      const app = appRef.current
-      app.resize()
-      
-      const model = modelRef.current
-      const stageHeight = app.screen.height
-      const stageWidth = app.screen.width
-      
-      if (stageWidth < 100 || stageHeight < 100) return
-      
-      const baseWidth = baseWidthRef.current || model.width || 1000
-      const baseHeight = baseHeightRef.current || model.height || 1000
-      
-      const widthScale = stageWidth / baseWidth
-      const heightScale = stageHeight / baseHeight
-      
-      const modelScale = Math.min(widthScale, heightScale) * 1.85 * scale
-      model.scale.set(modelScale)
-      
-      model.anchor.set(0.5, 0.5)
-      model.x = stageWidth / 2
-      model.y = stageHeight / 2 + stageHeight * 0.55
-    }
-
-    const resizeObserver = new ResizeObserver(() => {
-      handleResize()
-    })
-
-    resizeObserver.observe(containerRef.current)
-
-    // Trigger immediate resize/reposition
-    handleResize()
-
-    return () => {
-      resizeObserver.disconnect()
-    }
-  }, [scale, loading, isActive])
-
-  useEffect(() => {
-    const updateRenderState = () => {
-      setRenderActive(isActive && document.visibilityState === 'visible')
-    }
-
-    updateRenderState()
-    document.addEventListener('visibilitychange', updateRenderState)
-
-    return () => {
-      document.removeEventListener('visibilitychange', updateRenderState)
-    }
-  }, [isActive])
-
-  // Only observe pointer movement while it is over the model. Listening on the
-  // entire window made normal chat typing and scrolling compete with Live2D.
-  useEffect(() => {
-    let rafId: number | null = null
-    let pendingNormalized: { x: number; y: number } | null = null
-
-    const focus = (x: number, y: number) => {
-      if (isNaN(x) || isNaN(y) || !isFinite(x) || !isFinite(y)) {
-        x = 0
-        y = 0
-      }
-      modelRef.current?.internalModel?.focusController?.focus(x, y)
-    }
-
-    const centerFocus = () => focus(0, 0)
-
-    const handlePointerMove = (event: PointerEvent) => {
-      if (isLocked || !isActive || document.visibilityState !== 'visible' || !containerRef.current) return
-
-      const rect = containerRef.current.getBoundingClientRect()
-      if (!rect.width || !rect.height) return
-
-      const x = (event.clientX - (rect.left + rect.width / 2)) / (rect.width / 2)
-      const y = ((rect.top + rect.height / 2) - event.clientY) / (rect.height / 2)
-      pendingNormalized = clampToUnitCircle(x, y)
-
-      if (rafId === null) {
-        rafId = requestAnimationFrame(() => {
-          if (pendingNormalized) {
-            focus(pendingNormalized.x, pendingNormalized.y)
-            pendingNormalized = null
-          }
-          rafId = null
-        })
-      }
-    }
-
-    const handlePointerEnter = () => {
-      if (isLocked || !isActive || document.visibilityState !== 'visible') return
-      pointerInsideRef.current = true
-      setRenderActive(true, true)
-    }
-
-    const handlePointerLeave = () => {
-      pointerInsideRef.current = false
-      centerFocus()
-      setRenderActive(isActive && document.visibilityState === 'visible', false)
-    }
-
-    const container = containerRef.current
-    if (!container) return
-    if (isLocked) handlePointerLeave()
-
-    container.addEventListener('pointermove', handlePointerMove)
-    container.addEventListener('pointerenter', handlePointerEnter)
-    container.addEventListener('pointerleave', handlePointerLeave)
-    window.addEventListener('blur', centerFocus)
-
-    return () => {
-      if (rafId !== null) {
-        cancelAnimationFrame(rafId)
-        rafId = null
-      }
-      container.removeEventListener('pointermove', handlePointerMove)
-      container.removeEventListener('pointerenter', handlePointerEnter)
-      container.removeEventListener('pointerleave', handlePointerLeave)
-      window.removeEventListener('blur', centerFocus)
-    }
-  }, [isLocked, isActive])
-
-  // Update expressions & accessories dynamically
-  useEffect(() => {
-    if (!modelRef.current) return
-    applyExpressionAndAccessory(modelRef.current, expressionIndex, accessoryIndex)
-  }, [expressionIndex, accessoryIndex])
-
-  const applyExpressionAndAccessory = (model: any, exprIdx: number, accIdx: number) => {
-    const expManager = model.internalModel?.motionManager?.expressionManager
-    if (!expManager) return
-
-    const exprName = EXPRESSION_MAP[exprIdx]
-    const accName = ACCESSORY_MAP[accIdx]
-
-    if (!exprName && !accName) {
-      expManager.resetExpression()
-      return
-    }
-
-    // Apply the active expression or accessory
-    if (exprName) {
-      model.expression(exprName)
-    } else if (accName) {
-      model.expression(accName)
-    }
-  }
-
-  return (
-    <div
-      ref={containerRef}
-      style={{
-        position: 'relative',
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      {loading && (
-        <div style={{ position: 'absolute', color: '#9f7aea', fontSize: '14px', fontFamily: 'Outfit, sans-serif' }}>
-          Loading Shiroko Live2D model...
-        </div>
-      )}
-      <canvas
-        ref={canvasRef}
-        style={{
-          width: '100%',
-          height: '100%',
-          opacity: loading ? 0 : 1,
-          transition: 'opacity 0.3s ease-out',
-          pointerEvents: isLocked ? 'none' : 'auto',
-        }}
-      />
-    </div>
-  )
-}

package/src/renderer/src/components/ModelPanel.tsx

@@ -1,155 +0,0 @@
-import Live2DStage from './Live2DStage'
-import '../css/model.css'
-import type { DashboardView } from './DashboardSidebar'
-
-type LayoutPreset = 'chat-wide' | 'model-wide'
-export type ModelInteraction = 'head' | 'cheek' | 'left hand' | 'right hand' | 'body' | 'lower body'
-
-interface ModelPanelProps {
-  scale: number
-  expressionIndex: number
-  accessoryIndex: number
-  isLocked: boolean
-  isActive: boolean
-  layoutPreset: LayoutPreset
-  sending: boolean
-  interactionEnabled: boolean
-  showInteractionGuide: boolean
-  toastMessage: string
-  onSetScale: (scale: number) => void
-  onSetLocked: (locked: boolean) => void
-  onSetView: (view: DashboardView) => void
-  onChangeLayoutPreset: (preset: LayoutPreset) => void
-  onDismissToast: () => void
-  onInteract: (area: ModelInteraction) => void
-  onModelLoadComplete: () => void
-}
-
-export default function ModelPanel({
-  scale,
-  expressionIndex,
-  accessoryIndex,
-  isLocked,
-  isActive,
-  layoutPreset,
-  sending,
-  interactionEnabled,
-  showInteractionGuide,
-  toastMessage,
-  onSetScale,
-  onSetLocked,
-  onSetView,
-  onChangeLayoutPreset,
-  onDismissToast,
-  onInteract,
-  onModelLoadComplete,
-}: ModelPanelProps) {
-  return (
-    <section className="model-stage">
-      <div className={`model-shell ${interactionEnabled ? 'interaction-enabled' : ''} ${showInteractionGuide ? 'show-interaction-guide' : ''} model-bg-stage`}>
-        <div className="model-panel-controls">
-          <button
-            className={`model-panel-control ${isLocked ? 'is-active' : ''}`}
-            onClick={() => onSetLocked(!isLocked)}
-            title={isLocked ? 'Unlock stage interactions' : 'Lock stage interactions'}
-          >
-            {isLocked ? (
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
-                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
-              </svg>
-            ) : (
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
-                <path d="M7 11V7a5 5 0 0 1 9.9-1"></path>
-              </svg>
-            )}
-          </button>
-          <button className="model-panel-control" onClick={() => window.api.maximizeWindow()} title="Maximize Window" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-              <polyline points="15 3 21 3 21 9"></polyline>
-              <polyline points="9 21 3 21 3 15"></polyline>
-              <line x1="21" y1="3" x2="14" y2="10"></line>
-              <line x1="3" y1="21" x2="10" y2="14"></line>
-            </svg>
-          </button>
-          <div className="model-scale-control">
-            <input
-              type="range"
-              min="0.5"
-              max="2.0"
-              step="0.05"
-              value={scale}
-              onChange={(event) => onSetScale(parseFloat(event.target.value))}
-              disabled={isLocked}
-            />
-            <span className="model-scale-value">{scale.toFixed(2)}x</span>
-            <button className="model-scale-reset" onClick={() => onSetScale(1.00)} disabled={isLocked} title="Reset Scale" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
-                <polyline points="3 3 3 8 8 8"></polyline>
-              </svg>
-            </button>
-          </div>
-          <button className="model-panel-control" onClick={() => onSetView('pictures')} title="Saved pictures">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-              <circle cx="8.5" cy="8.5" r="1.5"></circle>
-              <polyline points="21 15 16 10 5 21"></polyline>
-            </svg>
-          </button>
-          <div className="layout-preset-group">
-            <button className={`layout-preset-btn ${layoutPreset === 'chat-wide' ? 'is-active' : ''}`} onClick={() => onChangeLayoutPreset('chat-wide')} title="Expand chat panel (minimize model)">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <rect x="3" y="3" width="18" height="18" rx="2" />
-                <path d="M9 3v18" />
-              </svg>
-            </button>
-            <button className={`layout-preset-btn ${layoutPreset === 'model-wide' ? 'is-active' : ''}`} onClick={() => onChangeLayoutPreset('model-wide')} title="Expand model panel (minimize chat)">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <rect x="3" y="3" width="18" height="18" rx="2" />
-                <path d="M15 3v18" />
-              </svg>
-            </button>
-          </div>
-        </div>
-
-        {toastMessage && (
-          <div className="mint-notification" style={{ position: 'absolute', left: '14px', top: '62px', zIndex: 10, margin: 0, padding: '8px 14px', borderRadius: '8px', background: 'rgba(18, 18, 22, 0.85)', border: '1px solid rgba(255, 255, 255, 0.08)', backdropFilter: 'blur(12px)', color: '#f8fafc', fontSize: '0.82rem', boxShadow: '0 8px 22px rgba(0,0,0,0.2)', display: 'flex', alignItems: 'center', gap: '12px', transition: 'all 0.22s ease' }}>
-            <span>{toastMessage}</span>
-            <button onClick={onDismissToast} style={{ background: 'transparent', border: 0, color: 'white', cursor: 'pointer', display: 'inline-flex', alignItems: 'center' }}>
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <line x1="18" y1="6" x2="6" y2="18"></line>
-                <line x1="6" y1="6" x2="18" y2="18"></line>
-              </svg>
-            </button>
-          </div>
-        )}
-
-        <div className="model-activity-badge" data-state={sending ? "thinking" : "idle"}>
-          <span className="mint-status-dot" />
-          <span>{sending ? "Thinking" : "Idle"}</span>
-        </div>
-
-        <div className="model-mount" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: isLocked ? 'none' : 'auto' }}>
-          <Live2DStage
-            scale={scale}
-            expressionIndex={expressionIndex}
-            accessoryIndex={accessoryIndex}
-            isLocked={isLocked}
-            isActive={isActive}
-            onLoadComplete={onModelLoadComplete}
-          />
-          <div className="interaction-guide">
-            <div className="interaction-zone zone-head" onClick={() => onInteract('head')}><span>Head</span></div>
-            <div className="interaction-zone zone-face" onClick={() => onInteract('cheek')}><span>Cheek</span></div>
-            <div className="interaction-zone zone-left-hand" onClick={() => onInteract('left hand')}><span>Hand</span></div>
-            <div className="interaction-zone zone-right-hand" onClick={() => onInteract('right hand')}><span>Hand</span></div>
-            <div className="interaction-zone zone-body" onClick={() => onInteract('body')}><span>Body</span></div>
-            <div className="interaction-zone zone-lower" onClick={() => onInteract('lower body')}><span>Lower</span></div>
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}