+
+ {
+ const id = e.target.value;
+ const entry = combinedModels.find((x) => x.id === id);
+ if (!entry) return;
+ setProvider(entry.provider as any);
+ setSelectedModel(entry.id);
+ const modelsForProv = combinedModels.filter(x => x.provider === entry.provider).map(x => x.id);
+ setAvailableModels(modelsForProv);
+ }}
+ >
+ select model (provider · model)
+ {combinedModels.map((m) => (
+ {m.label}
+ ))}
+
+
+ {selectedModel && (
+
+ )}
{
diff --git a/apps/we-dev-client/src/components/AiChat/chat/index.tsx b/apps/we-dev-client/src/components/AiChat/chat/index.tsx
index 913cf66..374cc3d 100644
--- a/apps/we-dev-client/src/components/AiChat/chat/index.tsx
+++ b/apps/we-dev-client/src/components/AiChat/chat/index.tsx
@@ -23,6 +23,7 @@ import {checkExecList, checkFinish} from "../utils/checkFinish";
import {useUrlData} from "@/hooks/useUrlData";
import {MCPTool} from "@/types/mcp";
import useMCPTools from "@/hooks/useMCPTools";
+import { useAIProviderStore } from "@/stores/aiProviderSlice";
type WeMessages = (Message & {
experimental_attachments?: Array<{
@@ -59,7 +60,7 @@ export const excludeFiles = [
"/miniprogram/components/weicon/index.css",
];
-const API_BASE = process.env.APP_BASE_URL;
+const API_BASE = process.env.APP_BASE_URL || "";
console.log(API_BASE, 'API_BASE')
enum ModelTypes {
@@ -332,6 +333,18 @@ export const BaseChat = ({uuid: propUuid}: { uuid?: string }) => {
}
}, [enabledMCPs])
+ const { provider, selectedModel } = useAIProviderStore();
+ useEffect(() => {
+ if (selectedModel) {
+ setBaseModal((prev) => ({
+ ...prev,
+ value: selectedModel,
+ label: selectedModel,
+ from: provider,
+ }));
+ }
+ }, [provider, selectedModel]);
+
// 修改 useChat 配置
const {
messages: realMessages,
diff --git a/apps/we-dev-client/src/components/Diff.tsx b/apps/we-dev-client/src/components/Diff.tsx
new file mode 100644
index 0000000..60adf91
--- /dev/null
+++ b/apps/we-dev-client/src/components/Diff.tsx
@@ -0,0 +1,86 @@
+import React, { useMemo, useState } from "react";
+
+type FilesMap = Record;
+
+interface DiffProps {
+ oldFiles: FilesMap;
+ newFiles: FilesMap;
+}
+
+function computeChangedFiles(oldFiles: FilesMap, newFiles: FilesMap): string[] {
+ const fileSet = new Set([...Object.keys(oldFiles || {}), ...Object.keys(newFiles || {})]);
+ const changed: string[] = [];
+ for (const path of fileSet) {
+ const a = oldFiles?.[path] ?? "";
+ const b = newFiles?.[path] ?? "";
+ if (a !== b) changed.push(path);
+ }
+ return changed.sort();
+}
+
+function simpleLineDiff(a: string, b: string): { type: "ctx" | "add" | "del"; text: string }[] {
+ const aLines = (a || "").split("\n");
+ const bLines = (b || "").split("\n");
+ const max = Math.max(aLines.length, bLines.length);
+ const out: { type: "ctx" | "add" | "del"; text: string }[] = [];
+ for (let i = 0; i < max; i++) {
+ const al = aLines[i];
+ const bl = bLines[i];
+ if (al === bl) {
+ if (al !== undefined) out.push({ type: "ctx", text: al });
+ } else {
+ if (al !== undefined) out.push({ type: "del", text: al });
+ if (bl !== undefined) out.push({ type: "add", text: bl });
+ }
+ }
+ return out;
+}
+
+const Diff: React.FC = ({ oldFiles, newFiles }) => {
+ const [activePath, setActivePath] = useState(null);
+ const changedFiles = useMemo(() => computeChangedFiles(oldFiles, newFiles), [oldFiles, newFiles]);
+ const diffLines = useMemo(() => {
+ if (!activePath) return [];
+ return simpleLineDiff(oldFiles?.[activePath] ?? "", newFiles?.[activePath] ?? "");
+ }, [activePath, oldFiles, newFiles]);
+
+ return (
+
+
+ {changedFiles.map((p) => (
+
setActivePath(p)}
+ className={`w-full text-left px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 ${
+ activePath === p ? "bg-gray-100 dark:bg-gray-800" : ""
+ }`}
+ >
+ {p}
+
+ ))}
+ {changedFiles.length === 0 && (
+
No changes
+ )}
+
+
+ {!activePath && changedFiles.length > 0 && (
+
Select a file to view diff
+ )}
+ {activePath && (
+
+
{activePath}
+ {diffLines.map((l, idx) => (
+
+ {l.type === "add" ? "+ " : l.type === "del" ? "- " : " "}
+ {l.text}
+
+ ))}
+
+ )}
+
+
("editor");
+ const [frameStyleMap, setFrameStyleMap] = useState>({
+ editor: "translate-x-0 opacity-100",
+ weApi: "translate-x-full opacity-100",
+ preview: "translate-x-full opacity-100",
+ diff: "translate-x-full opacity-100"
+ });
+ const { t } = useTranslation();
+ const { mode } = useChatModeStore();
+
+ const onToggle = (tab: string) => {
+ setFrameStyleMap(prev => {
+ const newMap = { ...prev };
+ Object.keys(newMap).forEach(key => {
+ if (key === tab) {
+ newMap[key] = "translate-x-0 opacity-100";
+ } else {
+ newMap[key] = "translate-x-full opacity-100";
+ }
+ });
+ return newMap;
+ });
+ };
+
+ // Web-specific content
+ const renderWebContent = (tab: string) => {
+ switch (tab) {
+ case 'editor':
+ return (
+
+
+
+ 💻
+
+
+ Code Editor
+
+
+ The full-featured code editor with syntax highlighting, autocomplete, and AI assistance
+ is available in the desktop application. Experience the power of intelligent code generation
+ and real-time collaboration.
+
+
+
+
+
Syntax highlighting for 100+ languages
+
+
+
+
AI-powered code completion
+
+
+
+
Integrated debugging tools
+
+
+
+
Real-time collaboration
+
+
+
window.open('https://we0.ai/download', '_blank')}
+ className="mt-6 bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition-colors"
+ >
+ Download Desktop App
+
+
+
+
+
+ 👁️
+
+
+ Live Preview
+
+
+ See your changes in real-time with the integrated preview system. Test your applications
+ instantly without switching between tools. Perfect for web development and UI design.
+
+
+
+
+
Real-time preview updates
+
+
+
+
Multiple device simulation
+
+
+
+
Interactive debugging
+
+
+
+
Performance monitoring
+
+
+
window.open('https://we0.ai/download', '_blank')}
+ className="mt-6 bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition-colors"
+ >
+ Get Full Preview Experience
+
+
+
+
+
+ 🔌
+
+
+ WeChat API Integration
+
+
+ Seamlessly integrate with WeChat Mini Program development. Test APIs, manage projects,
+ and deploy directly to WeChat's ecosystem with built-in tools and templates.
+
+
+
+
+
WeChat DevTools integration
+
+
+
+
API testing and validation
+
+
+
+
Mini Program templates
+
+
+
+
window.open('https://we0.ai/download', '_blank')}
+ className="mt-6 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-colors"
+ >
+ Start WeChat Development
+
+
+
+ {/* Tab Buttons */}
+
+
onToggle("editor")}
+ icon={ onToggle("preview")}
+ icon={ onToggle("weApi")}
+ icon={
+
+ {/* Content Area */}
+
+
+ {renderWebContent('editor')}
+
+
+ {renderWebContent('preview')}
+
+
+ {renderWebContent('weApi')}
+
+
+
= ({
+ active,
+ onClick,
+ icon,
+ label,
+}) => (
+
+ {icon}
+ {label}
+
+);
+
+const EditorIcon = () => (
+
+
+);
+
+const PreviewIcon = () => (
+
+
+);
+
+const ApiIcon = () => (
+
+
+);
+
+export default EditorPreviewTabs;
\ No newline at end of file
diff --git a/apps/we-dev-client/src/components/Header/Header.web.tsx b/apps/we-dev-client/src/components/Header/Header.web.tsx
new file mode 100644
index 0000000..5944bcc
--- /dev/null
+++ b/apps/we-dev-client/src/components/Header/Header.web.tsx
@@ -0,0 +1,29 @@
+import { ProjectTitle } from "./ProjectTitle";
+import HeaderActions from "./HeaderActions.web";
+import { FaCode } from "react-icons/fa6";
+
+function Header() {
+ return (
+
+
+
+ {/* Logo and Title */}
+
+
+
+
+
+ );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/apps/we-dev-client/src/components/Header/HeaderActions.tsx b/apps/we-dev-client/src/components/Header/HeaderActions.tsx
index bb63455..18e5b17 100644
--- a/apps/we-dev-client/src/components/Header/HeaderActions.tsx
+++ b/apps/we-dev-client/src/components/Header/HeaderActions.tsx
@@ -9,6 +9,50 @@ import { getWebContainerInstance } from "../WeIde/services/webcontainer";
import { useState } from "react";
import { toast } from "react-toastify";
+async function tryExec(getEndTerminal: any, cmd: string) {
+ const res = await getEndTerminal().executeCommand(cmd);
+ return res?.exitCode === 0;
+}
+
+async function ensureInstallAndBuild(getEndTerminal: any) {
+ // Try pnpm
+ if (await tryExec(getEndTerminal, "pnpm -v")) {
+ if (!(await tryExec(getEndTerminal, "pnpm run build"))) {
+ await tryExec(getEndTerminal, "pnpm install --ignore-scripts");
+ if (await tryExec(getEndTerminal, "pnpm run build")) return true;
+ } else return true;
+ }
+
+ // Try npm
+ if (await tryExec(getEndTerminal, "npm -v")) {
+ if (!(await tryExec(getEndTerminal, "npm run build"))) {
+ (await tryExec(getEndTerminal, "npm ci")) || (await tryExec(getEndTerminal, "npm install"));
+ if (await tryExec(getEndTerminal, "npm run build")) return true;
+ } else return true;
+ }
+
+ // Try yarn
+ if (await tryExec(getEndTerminal, "yarn -v")) {
+ if (!(await tryExec(getEndTerminal, "yarn build"))) {
+ await tryExec(getEndTerminal, "yarn install");
+ if (await tryExec(getEndTerminal, "yarn build")) return true;
+ } else return true;
+ }
+
+ return false;
+}
+
+async function detectOutputDir(webcontainer: any): Promise {
+ const candidates = ["dist", "build", "out", ".next/out", "public"].filter(Boolean);
+ for (const dir of candidates) {
+ try {
+ const stat = await webcontainer.fs.stat(dir);
+ if (stat?.type === "dir") return dir;
+ } catch {}
+ }
+ return null;
+}
+
// 添加一个递归获取文件的辅助函数
const getAllFiles = async (webcontainer: any, dirPath: string, zip: JSZip, baseDir: string = '') => {
@@ -89,23 +133,45 @@ export function HeaderActions() {
};
const publish = async () => {
setIsDeploying(true);
- const API_BASE = process.env.APP_BASE_URL;
+ const API_BASE = process.env.APP_BASE_URL || "";
try {
const webcontainer = await getWebContainerInstance();
-
+ // Validate package.json and build script
+ try {
+ const pkgRaw = await webcontainer.fs.readFile("package.json", "utf-8");
+ const pkg = JSON.parse(pkgRaw || "{}");
+ if (!pkg?.scripts?.build) {
+ toast.error(t('header.error.missing_build_script') || 'No "build" script found in package.json');
+ setIsDeploying(false);
+ return;
+ }
+ } catch {
+ toast.error(t('header.error.missing_package_json') || 'package.json not found');
+ setIsDeploying(false);
+ return;
+ }
+
newTerminal(async () => {
- const res = await getEndTerminal().executeCommand("npm run build");
- if (res.exitCode === 127) {
- await getEndTerminal().executeCommand("npm install");
- await getEndTerminal().executeCommand("npm run build");
+ toast.info(t('header.build.start') || 'Building project...');
+ const ok = await ensureInstallAndBuild(getEndTerminal);
+ if (!ok) {
+ toast.error(t('header.error.build_failed') || 'Build failed. Check console logs.');
+ setIsDeploying(false);
+ return;
}
try {
const zip = new JSZip();
-
+ // Detect output dir
+ const outDir = await detectOutputDir(webcontainer);
+ if (!outDir) {
+ toast.error(t('header.error.output_not_found') || 'Build output folder not found');
+ setIsDeploying(false);
+ return;
+ }
// 使用新的递归函数获取所有文件
- await getAllFiles(webcontainer, "dist", zip);
+ await getAllFiles(webcontainer, outDir, zip);
// 生成并下载 zip 文件
const blob = await zip.generateAsync({ type: "blob" });
diff --git a/apps/we-dev-client/src/components/Header/HeaderActions.web.tsx b/apps/we-dev-client/src/components/Header/HeaderActions.web.tsx
new file mode 100644
index 0000000..eb2eb42
--- /dev/null
+++ b/apps/we-dev-client/src/components/Header/HeaderActions.web.tsx
@@ -0,0 +1,100 @@
+import { useTranslation } from "react-i18next";
+import useChatModeStore from "@/stores/chatModeSlice";
+import { ChatMode } from "@/types/chat";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import { FaCode, FaDownload, FaGithub, FaQuestionCircle } from "react-icons/fa";
+
+function HeaderActions() {
+ const { t } = useTranslation();
+ const { mode, setMode } = useChatModeStore();
+ const [isWebMode] = useState(!window?.electron);
+
+ const handleModeChange = (newMode: ChatMode) => {
+ if (isWebMode && newMode === ChatMode.Builder) {
+ toast.info("Builder mode requires the desktop application for full functionality");
+ return;
+ }
+ setMode(newMode);
+ };
+
+ const handleDownload = () => {
+ window.open('https://we0.ai/download', '_blank');
+ };
+
+ const handleHelp = () => {
+ window.open('https://we0.ai/docs', '_blank');
+ };
+
+ const handleGitHub = () => {
+ window.open('https://github.com/ai-hub-2/we', '_blank');
+ };
+
+ return (
+
+ {/* Mode Toggle */}
+
+ handleModeChange(ChatMode.Chat)}
+ className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+ mode === ChatMode.Chat
+ ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm"
+ : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+ }`}
+ >
+ 💬
+ {t("Chat") || "Chat"}
+
+ handleModeChange(ChatMode.Builder)}
+ className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+ mode === ChatMode.Builder
+ ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm"
+ : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+ }`}
+ title={isWebMode ? "Builder mode requires desktop app" : "Switch to Builder mode"}
+ >
+ 🔧
+ {t("Builder") || "Builder"}
+
+
+
+ {/* Web Mode Indicator */}
+ {isWebMode && (
+
+ 🌐
+ Web
+
+ )}
+
+ {/* Action Buttons */}
+
+
+
+
+
+
+
+
+
+
+
= {
+ "openai": "https://platform.openai.com/docs/api-reference",
+ "anthropic": "https://docs.anthropic.com/en/api",
+ "google": "https://ai.google.dev/gemini-api/docs",
+ "groq": "https://console.groq.com/docs/overview",
+ "deepseek": "https://api-docs.deepseek.com",
+ "ollama": "https://github.com/ollama/ollama/blob/main/docs/api.md",
+ "azure-openai": "https://learn.microsoft.com/azure/ai-services/openai/reference",
+ "mistral": "https://docs.mistral.ai/api/",
+ "cohere": "https://docs.cohere.com/reference",
+ "perplexity": "https://docs.perplexity.ai",
+ "together": "https://docs.together.ai/docs/introduction",
+ "huggingface": "https://huggingface.co/docs/api-inference/index",
+ "fireworks": "https://readme.fireworks.ai/reference",
+ "openrouter": "https://openrouter.ai/docs",
+ "xai": "https://docs.x.ai/docs/api-reference",
+ "deepinfra": "https://deepinfra.com/docs",
+ "replicate": "https://replicate.com/docs/reference/http",
+ };
+
+ const handleProviderChange = async (newProvider: any) => {
+ setProvider(newProvider);
+ try {
+ const key = apiKeys[newProvider as keyof typeof apiKeys] || "";
+ const models = await fetchModelsForProvider(newProvider, key);
+ setAvailableModels(models);
+ setSelectedModel(models[0]);
+ const needsKey = ["openai", "anthropic", "google", "groq", "azure-openai"].includes(newProvider);
+ if (needsKey && !key) {
+ message.warning("Please set API key for the selected provider.");
+ } else if (needsKey && (!models || models.length === 0)) {
+ message.error("Failed to load models. Check API key/permissions.");
+ }
+ } catch (e) {
+ message.error("Error loading models for provider.");
+ setAvailableModels([]);
+ setSelectedModel(undefined);
+ }
+ };
+
+ const handleApiKeyChange = async (e: React.ChangeEvent) => {
+ const key = e.target.value.trim();
+ // Auto-detect provider by key prefix when possible
+ const detected = key.startsWith("sk-or-") ? "openrouter"
+ : key.startsWith("sk-") && provider !== "openrouter" ? provider
+ : provider;
+ if (detected !== provider) {
+ setProvider(detected as any);
+ }
+ setApiKey(detected as any, key);
+ try {
+ const models = await fetchModelsForProvider(detected as any, key);
+ setAvailableModels(models);
+ if (!models.includes(selectedModel || "")) setSelectedModel(models[0]);
+ if (!models || models.length === 0) {
+ message.warning("No models returned. Verify API key/plan.");
+ }
+ } catch {
+ message.error("Failed to fetch models. Check API key.");
+ setAvailableModels([]);
+ setSelectedModel(undefined);
+ }
+ };
+ const handleSaveApi = () => {
+ try {
+ localStorage.setItem('aiProviderConfig', JSON.stringify({ provider, apiKeys, selectedModel }));
+ message.success('API settings saved');
+ // Force refresh models after save
+ handleProviderChange(provider);
+ } catch {
+ message.error('Failed to save settings');
+ }
+ };
+
useEffect(() => {
localStorage.setItem("settingsConfig", JSON.stringify(formData));
}, [formData]);
@@ -776,6 +888,38 @@ export function GeneralSettings() {
)}
)}
+
+ {/* AI Provider Settings */}
+
+
AI Provider
+
+
+
+ Save
+
+
+
+
+ {/* Removed Default Model selection to centralize model choice in chat input */}
diff --git a/apps/we-dev-client/src/components/Settings/MCPSettings/AddMcpServerPopup.tsx b/apps/we-dev-client/src/components/Settings/MCPSettings/AddMcpServerPopup.tsx
index bcd7f6d..0447dd4 100644
--- a/apps/we-dev-client/src/components/Settings/MCPSettings/AddMcpServerPopup.tsx
+++ b/apps/we-dev-client/src/components/Settings/MCPSettings/AddMcpServerPopup.tsx
@@ -102,7 +102,7 @@ const CustomModal = ({ children, title, open, onOk, onCancel, okText, cancelText
)
}
-const FormField = ({ label, required, children, error, tooltip }) => (
+const FormField = ({ label, required, children, error, tooltip }: { label: any; required?: any; children: any; error?: any; tooltip?: any }) => (
@@ -127,7 +127,7 @@ const FormField = ({ label, required, children, error, tooltip }) => (
)
-const Input = ({ value, onChange, placeholder, disabled, className = "" }) => (
+const Input = ({ value, onChange, placeholder, disabled, className = "" }: { value: any; onChange: any; placeholder: any; disabled?: any; className?: string }) => (
(
/>
)
-const TextArea = ({ value, onChange, placeholder, rows = 3, className = "" }) => (
+const TextArea = ({ value, onChange, placeholder, rows = 3, className = "" }: { value: any; onChange: any; placeholder: any; rows?: number; className?: string }) => (