Function Shell

apps/webuiapps/src/components/Shell/index.tsx:87–494

()

}

const Shell: React.FC = () => {
  const [chatOpen, setChatOpen] = useState(true);
  const [reportEnabled, setReportEnabled] = useState(true);
  const [lang, setLang] = useState<'en' | 'zh'>('en');
  const [liveWallpaper, setLiveWallpaper] = useState(false);
  const [uploadOpen, setUploadOpen] = useState(false);
  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
  const [extractResult, setExtractResult] = useState<ExtractResult | null>(null);
  const [extracting, setExtracting] = useState(false);
  const [modGenerating, setModGenerating] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setUploadedFile(file);
      setExtractResult(null);
    }
    if (fileInputRef.current) fileInputRef.current.value = '';
  }, []);

  const handleRemoveFile = useCallback(() => {
    setUploadedFile(null);
    setExtractResult(null);
  }, []);

  const generateMod = useCallback(async (character: Manifest['character']): Promise<string> => {
    const llmConfig = await loadConfig();
    if (!llmConfig) {
      throw new Error(
        'No LLM configuration found. Please open Settings (gear icon) and configure your LLM API key first.',
      );
    }

    const prompt = buildModPrompt([], JSON.stringify({ character, apps: [] }));
    logger.info('Shell', 'Mod generation prompt built, length:', prompt.length);

    setModGenerating(true);
    try {
      const response = await chat([{ role: 'user', content: prompt }], [], llmConfig);
      logger.info('Shell', 'Mod generation LLM response length:', response.content.length);

      let jsonStr = response.content.trim();
      const fenceMatch = jsonStr.match(/```(?:json)?\s*([\s\S]*?)```/);
      if (fenceMatch) jsonStr = fenceMatch[1].trim();

      let modJson: Record<string, unknown>;
      try {
        modJson = JSON.parse(jsonStr);
      } catch {
        throw new Error('LLM returned invalid JSON. Try again or use a different model.');
      }

      const modId = generateModId();
      const modConfig: ModConfig = {
        id: modId,
        mod_name: (modJson.name as string) || (modJson.identifier as string) || 'Generated Mod',
        mod_name_en: (modJson.name as string) || (modJson.identifier as string) || 'Generated Mod',