Chat Environment Variables

Редактор env-переменных с маской для секретов и add/remove.

"use client";

import { useState } from "react";
import {
  ChatEnvironmentVariables,
  type ChatEnvVariable,
} from "@/components/ui/chat-environment-variables";

const seed: ChatEnvVariable[] = [
  { key: "DATABASE_URL", value: "postgres://localhost:5432/app", secret: true },
  { key: "ANTHROPIC_API_KEY", value: "sk-ant-...", secret: true },
  { key: "NODE_ENV", value: "development" },
  { key: "NEXT_PUBLIC_APP_URL", value: "http://localhost:4000" },
];

export default function Particle() {
  const [vars, setVars] = useState(seed);

  return (
    <div className="w-full max-w-xl p-4">
      <ChatEnvironmentVariables onChange={setVars} variables={vars} />
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-environment-variables

Использование

"use client";
import { useState } from "react";
import {
  type ChatEnvVariable,
  ChatEnvironmentVariables,
} from "@/components/ui/chat-environment-variables";
 
const [vars, setVars] = useState<ChatEnvVariable[]>([
  { key: "DATABASE_URL", value: "postgres://…", secret: true },
  { key: "NODE_ENV", value: "production" },
]);
 
<ChatEnvironmentVariables onChange={setVars} variables={vars} />
 
// или read-only (без `onChange`)
<ChatEnvironmentVariables readOnly variables={vars} />

Поведение

Secret values маскируются точками, кнопка-глаз раскрывает.
Add row в footer — Enter / submit добавляет в массив.
Remove — X справа от строки. readOnly режим скрывает Add и Remove.
При write-режиме редактирование сразу вызывает onChange с полным массивом.

Тип

type ChatEnvVariable = {
  key: string;
  value: string;
  secret?: boolean;
};

На этой странице

Установка Использование Поведение Тип