Code Request Response

<div class="ws-code-preview space-y-4">

  <!-- Request block -->
  <div class="overflow-hidden rounded-xl border border-[var(--ws-code-preview-border)]">
    <div class="flex items-center justify-between border-b border-[var(--ws-code-preview-border)] bg-[var(--ws-code-preview-header-bg)] px-4 py-3">
      <div class="flex items-center gap-3">
        <span class="inline-flex items-center rounded-md bg-emerald-500/15 px-2 py-0.5 text-xs font-bold uppercase tracking-wide text-emerald-400">POST</span>
        <span class="font-mono text-xs text-slate-400">/v1/chat/completions</span>
      </div>
      <button class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-slate-500 transition hover:bg-slate-700 hover:text-slate-300" aria-label="Copy request">
        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"/></svg>
        Copy
      </button>
    </div>
    <pre class="overflow-x-auto bg-[var(--ws-code-preview-bg)] p-5 font-mono text-xs leading-relaxed text-[var(--ws-code-preview-text)]"><code>{
  <span class="text-sky-400">"model"</span>: <span class="text-amber-300">"mistral-large-latest"</span>,
  <span class="text-sky-400">"messages"</span>: [
    {
      <span class="text-sky-400">"role"</span>: <span class="text-amber-300">"user"</span>,
      <span class="text-sky-400">"content"</span>: <span class="text-amber-300">"Explain the difference between supervised and unsupervised learning."</span>
    }
  ],
  <span class="text-sky-400">"temperature"</span>: <span class="text-orange-400">0.7</span>,
  <span class="text-sky-400">"max_tokens"</span>: <span class="text-orange-400">512</span>
}</code></pre>
  </div>

  <!-- Response block -->
  <div class="overflow-hidden rounded-xl border border-[var(--ws-code-preview-border)]">
    <div class="flex items-center justify-between border-b border-[var(--ws-code-preview-border)] bg-[var(--ws-code-preview-header-bg)] px-4 py-3">
      <div class="flex items-center gap-3">
        <span class="inline-flex items-center rounded-md bg-sky-500/15 px-2 py-0.5 text-xs font-bold tracking-wide text-sky-400">200 OK</span>
        <span class="font-mono text-xs text-slate-400">application/json</span>
      </div>
      <button class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-slate-500 transition hover:bg-slate-700 hover:text-slate-300" aria-label="Copy response">
        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"/></svg>
        Copy
      </button>
    </div>
    <pre class="overflow-x-auto bg-[var(--ws-code-preview-bg)] p-5 font-mono text-xs leading-relaxed text-[var(--ws-code-preview-text)]"><code>{
  <span class="text-sky-400">"id"</span>: <span class="text-amber-300">"cmpl-e5cc70bb28c444948073e77776eb30ef"</span>,
  <span class="text-sky-400">"object"</span>: <span class="text-amber-300">"chat.completion"</span>,
  <span class="text-sky-400">"model"</span>: <span class="text-amber-300">"mistral-large-latest"</span>,
  <span class="text-sky-400">"choices"</span>: [
    {
      <span class="text-sky-400">"index"</span>: <span class="text-orange-400">0</span>,
      <span class="text-sky-400">"message"</span>: {
        <span class="text-sky-400">"role"</span>: <span class="text-amber-300">"assistant"</span>,
        <span class="text-sky-400">"content"</span>: <span class="text-amber-300">"Supervised learning uses labeled training data..."</span>
      },
      <span class="text-sky-400">"finish_reason"</span>: <span class="text-amber-300">"stop"</span>
    }
  ],
  <span class="text-sky-400">"usage"</span>: {
    <span class="text-sky-400">"prompt_tokens"</span>: <span class="text-orange-400">18</span>,
    <span class="text-sky-400">"completion_tokens"</span>: <span class="text-orange-400">312</span>,
    <span class="text-sky-400">"total_tokens"</span>: <span class="text-orange-400">330</span>
  }
}</code></pre>
  </div>

  <!-- Error response (400) -->
  <div class="overflow-hidden rounded-xl border border-red-500/20">
    <div class="flex items-center gap-3 border-b border-red-500/20 bg-[var(--ws-code-preview-header-bg)] px-4 py-3">
      <span class="inline-flex items-center rounded-md bg-red-500/15 px-2 py-0.5 text-xs font-bold tracking-wide text-red-400">400 Bad Request</span>
      <span class="font-mono text-xs text-slate-400">application/json</span>
    </div>
    <pre class="overflow-x-auto bg-[var(--ws-code-preview-bg)] p-5 font-mono text-xs leading-relaxed text-[var(--ws-code-preview-text)]"><code>{
  <span class="text-sky-400">"message"</span>: <span class="text-amber-300">"Invalid request: 'model' is required."</span>,
  <span class="text-sky-400">"type"</span>: <span class="text-amber-300">"invalid_request_error"</span>,
  <span class="text-sky-400">"code"</span>: <span class="text-orange-400">400</span>
}</code></pre>
  </div>

</div>