diff --git a/frontend/src/components/workspace/channels/channel-runtime-config-dialog.tsx b/frontend/src/components/workspace/channels/channel-runtime-config-dialog.tsx
index 11753f5e7..c857d5449 100644
--- a/frontend/src/components/workspace/channels/channel-runtime-config-dialog.tsx
+++ b/frontend/src/components/workspace/channels/channel-runtime-config-dialog.tsx
@@ -1,7 +1,13 @@
"use client";
import { LoaderCircleIcon } from "lucide-react";
-import { type FormEvent, useEffect, useMemo, useState } from "react";
+import {
+ type CSSProperties,
+ type FormEvent,
+ useEffect,
+ useMemo,
+ useState,
+} from "react";
import { Button } from "@/components/ui/button";
import {
@@ -30,6 +36,14 @@ type ChannelRuntimeConfigDialogProps = {
) => void;
};
+type SecretInputStyle = CSSProperties & {
+ WebkitTextSecurity?: "disc";
+};
+
+const SECRET_INPUT_STYLE: SecretInputStyle = {
+ WebkitTextSecurity: "disc",
+};
+
export function ChannelRuntimeConfigDialog({
provider,
open,
@@ -83,6 +97,7 @@ export function ChannelRuntimeConfigDialog({
{fields.map((field) => {
const inputId = `channel-${provider.provider}-${field.name}`;
+ const isSecretField = field.type === "password";
return (