Fix codex cache session id

2026-04-13 15:52:01 +07:00
1 parent b7d85ae463
commit 3b1a608e8d
@@ -0,0 +1,117 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Button, Modal } from "@/shared/components";
+
+export default function AddCustomModelModal({ isOpen, providerAlias, providerDisplayAlias, onSave, onClose }) {
+  const [modelId, setModelId] = useState("");
+  const [testStatus, setTestStatus] = useState(null); // null | "testing" | "ok" | "error"
+  const [testError, setTestError] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  // Reset state when modal opens
+  useEffect(() => {
+    if (isOpen) { setModelId(""); setTestStatus(null); setTestError(""); }
+  }, [isOpen]);
+
+  const handleTest = async () => {
+    if (!modelId.trim()) return;
+    setTestStatus("testing");
+    setTestError("");
+    try {
+      const res = await fetch("/api/models/test", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ model: `${providerAlias}/${modelId.trim()}` }),
+      });
+      const data = await res.json();
+      setTestStatus(data.ok ? "ok" : "error");
+      setTestError(data.error || "");
+    } catch (err) {
+      setTestStatus("error");
+      setTestError(err.message);
+    }
+  };
+
+  const handleSave = async () => {
+    if (!modelId.trim() || saving) return;
+    setSaving(true);
+    try {
+      await onSave(modelId.trim());
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") handleTest();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Add Custom Model">
+      <div className="flex flex-col gap-4">
+        <div>
+          <label className="text-sm font-medium mb-1.5 block">Model ID</label>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={modelId}
+              onChange={(e) => { setModelId(e.target.value); setTestStatus(null); setTestError(""); }}
+              onKeyDown={handleKeyDown}
+              placeholder="e.g. claude-opus-4-5"
+              className="flex-1 px-3 py-2 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+              autoFocus
+            />
+            <Button
+              variant="secondary"
+              icon="science"
+              loading={testStatus === "testing"}
+              onClick={handleTest}
+              disabled={!modelId.trim() || testStatus === "testing"}
+            >
+              {testStatus === "testing" ? "Testing..." : "Test"}
+            </Button>
+          </div>
+          <p className="text-xs text-text-muted mt-1">
+            Sent to provider as: <code className="font-mono bg-sidebar px-1 rounded">{modelId.trim() || "model-id"}</code>
+          </p>
+        </div>
+
+        {/* Test result */}
+        {testStatus === "ok" && (
+          <div className="flex items-center gap-2 text-sm text-green-600">
+            <span className="material-symbols-outlined text-base">check_circle</span>
+            Model is reachable
+          </div>
+        )}
+        {testStatus === "error" && (
+          <div className="flex items-start gap-2 text-sm text-red-500">
+            <span className="material-symbols-outlined text-base shrink-0">cancel</span>
+            <span>{testError || "Model not reachable"}</span>
+          </div>
+        )}
+
+        <div className="flex gap-2 pt-1">
+          <Button onClick={onClose} variant="ghost" fullWidth size="sm">Cancel</Button>
+          <Button
+            onClick={handleSave}
+            fullWidth
+            size="sm"
+            disabled={!modelId.trim() || saving}
+          >
+            {saving ? "Adding..." : "Add Model"}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+AddCustomModelModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  providerAlias: PropTypes.string.isRequired,
+  providerDisplayAlias: PropTypes.string.isRequired,
+  onSave: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};