@eventcatalog/core 4.10.12 → 4.10.14

package/eventcatalog/src/components/SchemaExplorer/ProtobufSchemaViewer.tsx

@@ -1,5 +1,12 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
 import type { ProtobufSchema, ProtobufMessage, ProtobufEnum, ProtobufField } from '@utils/protobuf-schema';
+import {
+  formatProtobufOptionValue,
+  formatProtovalidateRule,
+  getCustomFieldAnnotations,
+  getProtovalidateRules,
+  isProtovalidateRequired,
+} from './protobuf-validation';
 
 interface ProtobufSchemaViewerProps {
   schema: ProtobufSchema;
@@ -63,9 +70,21 @@ function lookupType<T>(map: Map<string, T>, typeName: string, packageName?: stri
   return undefined;
 }
 
-function formatProtobufType(field: ProtobufField): string {
-  if (field.map) return field.type;
-  return field.label ? `${field.label} ${field.type}` : field.type;
+function compactTypeName(typeName: string): string {
+  const normalized = typeName.startsWith('.') ? typeName.slice(1) : typeName;
+  return normalized.split('.').pop() ?? normalized;
+}
+
+function formatProtobufType(field: ProtobufField, compact = false): string {
+  const type = field.map
+    ? compact
+      ? `map<${field.map.keyType}, ${compactTypeName(field.map.valueType)}>`
+      : field.type
+    : compact
+      ? compactTypeName(field.type)
+      : field.type;
+
+  return field.label ? `${field.label} ${type}` : type;
 }
 
 function countFields(messages: ProtobufMessage[]): number {
@@ -92,7 +111,27 @@ const ProtobufFieldRow = ({ field, level, expand, showRequired, registry, packag
   const nestedEnum = nestedMessage ? undefined : lookupType(registry.enums, targetTypeName, packageName);
   const isCyclic = nestedMessage ? ancestors.includes(nestedMessage.name) : false;
   const hasNested = !!nestedMessage && nestedMessage.fields.length > 0 && !isCyclic;
-  const isRequired = field.label === 'required';
+  const hasRequiredAnnotation = isProtovalidateRequired(field);
+  const isRequired = hasRequiredAnnotation || field.label === 'required';
+  const validationRules = getProtovalidateRules(field).filter((rule) => rule.path !== 'required');
+  const customAnnotations = getCustomFieldAnnotations(field);
+  const fullType = formatProtobufType(field);
+  const displayType = formatProtobufType(field, true);
+  const enumRuleScope = field.map ? 'map.values.enum' : field.label === 'repeated' ? 'repeated.items.enum' : 'enum';
+  const enumConstant = validationRules.find((rule) => rule.path === `${enumRuleScope}.const`);
+  const enumIncludes = validationRules.find((rule) => rule.path === `${enumRuleScope}.in`);
+  const enumExcludes = validationRules.find((rule) => rule.path === `${enumRuleScope}.not_in`);
+  const normalizeRuleValues = (value: unknown) => (Array.isArray(value) ? value : value === undefined ? [] : [value]);
+  const includedEnumValues = normalizeRuleValues(enumIncludes?.value);
+  const excludedEnumValues = normalizeRuleValues(enumExcludes?.value);
+  const displayedEnumValues = nestedEnum?.values.filter((value) => {
+    const matches = (candidate: unknown) => String(candidate) === String(value.value) || candidate === value.name;
+    return (
+      (!enumConstant || matches(enumConstant.value)) &&
+      (includedEnumValues.length === 0 || includedEnumValues.some(matches)) &&
+      !excludedEnumValues.some(matches)
+    );
+  });
 
   useEffect(() => {
     setIsExpanded(expand);
@@ -116,40 +155,83 @@ const ProtobufFieldRow = ({ field, level, expand, showRequired, registry, packag
         )}
 
         <div className="flex-grow">
-          <div className="flex justify-between items-baseline">
-            <div>
-              <span className="proto-field-name font-semibold text-[rgb(var(--ec-page-text))] text-sm">{field.name}</span>
-              <span className="ml-1.5 text-[rgb(var(--ec-accent))] font-mono text-xs">{formatProtobufType(field)}</span>
-              {field.number !== undefined && (
-                <span className="ml-1.5 text-[rgb(var(--ec-page-text-muted))] font-mono text-xs">= {field.number}</span>
-              )}
-              {field.oneof && (
-                <span className="ml-1.5 text-[rgb(var(--ec-page-text-muted))] text-xs bg-[rgb(var(--ec-content-hover))] px-1 rounded">
-                  oneof {field.oneof}
+          <div className="-mx-1 rounded px-1 transition-colors hover:bg-[rgb(var(--ec-content-hover))]">
+            <div className="flex justify-between items-baseline">
+              <div>
+                <span className="proto-field-name font-semibold text-[rgb(var(--ec-page-text))] text-sm">{field.name}</span>
+                <span
+                  className="ml-1.5 text-[rgb(var(--ec-accent))] font-mono text-xs"
+                  title={displayType === fullType ? undefined : fullType}
+                >
+                  {displayType}
                 </span>
+                {field.number !== undefined && (
+                  <span className="ml-1.5 text-[rgb(var(--ec-page-text-muted))] font-mono text-xs">= {field.number}</span>
+                )}
+                {field.oneof && (
+                  <span className="ml-1.5 text-[rgb(var(--ec-page-text-muted))] text-xs bg-[rgb(var(--ec-content-hover))] px-1 rounded">
+                    oneof {field.oneof}
+                  </span>
+                )}
+              </div>
+              {(hasRequiredAnnotation || (showRequired && isRequired)) && (
+                <span className="text-red-600 dark:text-red-400 text-xs ml-3 flex-shrink-0">required</span>
               )}
             </div>
-            {showRequired && isRequired && (
-              <span className="text-red-600 dark:text-red-400 text-xs ml-3 flex-shrink-0">required</span>
+
+            {field.doc && <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-0.5">{field.doc}</p>}
+
+            {validationRules.length > 0 && (
+              <div className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-0.5 space-y-0">
+                {validationRules.map((rule, index) => {
+                  const display = formatProtovalidateRule(rule);
+                  return (
+                    <div key={`${rule.path}-${index}`}>
+                      {display.label}
+                      {display.value !== undefined && (
+                        <>
+                          :{' '}
+                          <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                            {display.value}
+                          </code>
+                        </>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
             )}
-          </div>
 
-          {field.doc && <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-0.5">{field.doc}</p>}
-
-          {/* Show enum values if the field type resolves to an enum */}
-          {nestedEnum && nestedEnum.values.length > 0 && (
-            <div className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-0.5">
-              <span className="text-xs inline-block">Allowed values:</span>
-              {nestedEnum.values.map((value) => (
-                <span key={value.name} className="text-xs">
-                  {' '}
-                  <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
-                    {value.name}
-                  </code>
-                </span>
-              ))}
-            </div>
-          )}
+            {customAnnotations.length > 0 && (
+              <div className="mt-0.5 space-y-0 text-xs text-gray-400 dark:text-gray-500">
+                {customAnnotations.map((annotation, index) => (
+                  <div key={`${annotation.name}-${index}`} className="flex max-w-full flex-wrap items-baseline gap-x-1">
+                    <span>Annotation:</span>
+                    <code className="break-all font-mono text-gray-500 dark:text-gray-400">{annotation.name}</code>
+                    <span>=</span>
+                    <code className="font-medium text-gray-500 dark:text-gray-400">
+                      {formatProtobufOptionValue(annotation.value)}
+                    </code>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Show enum values if the field type resolves to an enum */}
+            {nestedEnum && displayedEnumValues && displayedEnumValues.length > 0 && (
+              <div className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-0.5">
+                <span className="text-xs inline-block">Allowed values:</span>
+                {displayedEnumValues.map((value) => (
+                  <span key={value.name} className="text-xs">
+                    {' '}
+                    <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                      {value.name}
+                    </code>
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
 
           {/* Nested fields for message types */}
           {hasNested && nestedMessage && (

package/eventcatalog/src/components/SchemaExplorer/SchemaViewerHover.test.tsx

@@ -0,0 +1,33 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import { parseProtobufSchema } from '@utils/protobuf-schema';
+import AvroSchemaViewer from './AvroSchemaViewer';
+import JSONSchemaViewer from './JSONSchemaViewer';
+import ProtobufSchemaViewer from './ProtobufSchemaViewer';
+
+const PROPERTY_HOVER_CLASS = 'hover:bg-[rgb(var(--ec-content-hover))]';
+
+describe('schema viewer property hover states', () => {
+  it('adds a hover background to JSON Schema properties', () => {
+    const html = renderToStaticMarkup(
+      <JSONSchemaViewer schema={{ type: 'object', properties: { id: { type: 'string' } } }} search={false} />
+    );
+
+    expect(html).toContain(PROPERTY_HOVER_CLASS);
+  });
+
+  it('adds a hover background to Avro fields', () => {
+    const html = renderToStaticMarkup(
+      <AvroSchemaViewer schema={{ type: 'record', name: 'Example', fields: [{ name: 'id', type: 'string' }] }} search={false} />
+    );
+
+    expect(html).toContain(PROPERTY_HOVER_CLASS);
+  });
+
+  it('adds a hover background to Protobuf fields', () => {
+    const schema = parseProtobufSchema('syntax = "proto3"; message Example { string id = 1; }');
+    const html = renderToStaticMarkup(<ProtobufSchemaViewer schema={schema} search={false} />);
+
+    expect(html).toContain(PROPERTY_HOVER_CLASS);
+  });
+});

package/eventcatalog/src/components/SchemaExplorer/protobuf-validation.test.ts

@@ -0,0 +1,84 @@
+import { describe, expect, it } from 'vitest';
+import type { ProtobufField } from '@utils/protobuf-schema';
+import {
+  formatProtobufOptionValue,
+  formatProtovalidateRule,
+  getCustomFieldAnnotations,
+  getProtovalidateRules,
+  isProtovalidateRequired,
+} from './protobuf-validation';
+
+describe('protobuf validation helpers', () => {
+  it('flattens direct and aggregate Protovalidate options', () => {
+    const field: ProtobufField = {
+      name: 'status',
+      type: 'Status',
+      options: [
+        { name: '(buf.validate.field).required', value: true },
+        {
+          name: '(buf.validate.field).enum',
+          value: { defined_only: true, not_in: [0] },
+        },
+      ],
+    };
+
+    expect(getProtovalidateRules(field)).toEqual([
+      { path: 'required', value: true },
+      { path: 'enum.defined_only', value: true },
+      { path: 'enum.not_in', value: [0] },
+    ]);
+    expect(isProtovalidateRequired(field)).toBe(true);
+  });
+
+  it('ignores non-Protovalidate custom options', () => {
+    const field: ProtobufField = {
+      name: 'description',
+      type: 'string',
+      options: [{ name: '(datahub.v1.gdpr_rule).string', value: true }],
+    };
+
+    expect(getProtovalidateRules(field)).toEqual([]);
+    expect(isProtovalidateRequired(field)).toBe(false);
+    expect(getCustomFieldAnnotations(field)).toEqual([{ name: '(datahub.v1.gdpr_rule).string', value: true }]);
+  });
+
+  it('only treats extension options as custom annotations and formats aggregate values', () => {
+    const field: ProtobufField = {
+      name: 'description',
+      type: 'string',
+      options: [
+        { name: 'deprecated', value: true },
+        { name: '(buf.validate.field).string.min_len', value: 1 },
+        { name: '(datahub.v1.classification)', value: { level: 'personal', encrypted: true } },
+      ],
+    };
+
+    expect(getCustomFieldAnnotations(field)).toEqual([
+      {
+        name: '(datahub.v1.classification)',
+        value: { level: 'personal', encrypted: true },
+      },
+    ]);
+    expect(formatProtobufOptionValue(getCustomFieldAnnotations(field)[0].value)).toBe('{"level":"personal","encrypted":true}');
+  });
+
+  it('formats common rules for display', () => {
+    expect(formatProtovalidateRule({ path: 'string.email', value: true })).toEqual({ label: 'Format', value: 'Email' });
+    expect(formatProtovalidateRule({ path: 'uint32.gte', value: 1 })).toEqual({ label: 'Minimum', value: '1' });
+    expect(formatProtovalidateRule({ path: 'enum.defined_only', value: true })).toEqual({
+      label: 'Defined enum values only',
+    });
+    expect(formatProtovalidateRule({ path: 'enum.not_in', value: [0] })).toEqual({
+      label: 'Excluded values',
+      value: '0',
+    });
+    expect(formatProtovalidateRule({ path: 'repeated.items.string.min_len', value: 3 })).toEqual({
+      label: 'Item minimum length',
+      value: '3',
+    });
+    expect(formatProtovalidateRule({ path: 'map.values.string.max_len', value: 100 })).toEqual({
+      label: 'Value maximum length',
+      value: '100',
+    });
+  });
+});

package/eventcatalog/src/components/SchemaExplorer/protobuf-validation.ts

@@ -0,0 +1,149 @@
+import type { ProtobufField, ProtobufOptionValue } from '@utils/protobuf-schema';
+
+const PROTOVALIDATE_FIELD_OPTION = '(buf.validate.field)';
+
+export interface ProtovalidateRule {
+  path: string;
+  value: ProtobufOptionValue;
+}
+
+export interface ProtovalidateRuleDisplay {
+  label: string;
+  value?: string;
+}
+
+export interface ProtobufCustomAnnotation {
+  name: string;
+  value: ProtobufOptionValue;
+}
+
+const isOptionObject = (value: ProtobufOptionValue): value is { [key: string]: ProtobufOptionValue } =>
+  typeof value === 'object' && !Array.isArray(value);
+
+const flattenOptionValue = (path: string, value: ProtobufOptionValue): ProtovalidateRule[] => {
+  if (!isOptionObject(value)) return [{ path, value }];
+
+  return Object.entries(value).flatMap(([name, nestedValue]) => flattenOptionValue(path ? `${path}.${name}` : name, nestedValue));
+};
+
+export const getProtovalidateRules = (field: ProtobufField): ProtovalidateRule[] =>
+  (field.options ?? []).flatMap((option) => {
+    if (option.name !== PROTOVALIDATE_FIELD_OPTION && !option.name.startsWith(`${PROTOVALIDATE_FIELD_OPTION}.`)) return [];
+
+    const path = option.name.slice(PROTOVALIDATE_FIELD_OPTION.length).replace(/^\./, '');
+    return flattenOptionValue(path, option.value);
+  });
+
+export const isProtovalidateRequired = (field: ProtobufField) =>
+  getProtovalidateRules(field).some((rule) => rule.path === 'required' && rule.value === true);
+
+export const getCustomFieldAnnotations = (field: ProtobufField): ProtobufCustomAnnotation[] =>
+  (field.options ?? [])
+    .filter(
+      (option) =>
+        option.name.startsWith('(') &&
+        option.name !== PROTOVALIDATE_FIELD_OPTION &&
+        !option.name.startsWith(`${PROTOVALIDATE_FIELD_OPTION}.`)
+    )
+    .map(({ name, value }) => ({ name, value }));
+
+export const formatProtobufOptionValue = (value: ProtobufOptionValue): string => {
+  if (Array.isArray(value)) return value.map(formatProtobufOptionValue).join(', ');
+  if (isOptionObject(value)) return JSON.stringify(value);
+  return String(value);
+};
+
+const humanize = (value: string) => value.replace(/_/g, ' ').replace(/\b\w/g, (character) => character.toUpperCase());
+
+const FORMAT_NAMES: Record<string, string> = {
+  address: 'Address',
+  email: 'Email',
+  hostname: 'Hostname',
+  ip: 'IP',
+  ipv4: 'IPv4',
+  ipv6: 'IPv6',
+  protobuf_fqn: 'Protobuf FQN',
+  tuuid: 'TUUID',
+  uri: 'URI',
+  uri_ref: 'URI reference',
+  uuid: 'UUID',
+};
+
+const getRuleScope = (path: string) => {
+  if (path.includes('repeated.items')) return 'Item';
+  if (path.includes('map.keys')) return 'Key';
+  if (path.includes('map.values')) return 'Value';
+  return '';
+};
+
+const withScope = (scope: string, label: string) =>
+  scope ? `${scope} ${label.charAt(0).toLowerCase()}${label.slice(1)}` : label;
+
+export const formatProtovalidateRule = ({ path, value }: ProtovalidateRule): ProtovalidateRuleDisplay => {
+  const name = path.split('.').pop() ?? path;
+  const scope = getRuleScope(path);
+  const formattedValue = formatProtobufOptionValue(value);
+
+  switch (name) {
+    case 'required':
+      return value === true ? { label: 'Required' } : { label: 'Required', value: formattedValue };
+    case 'const':
+      return { label: withScope(scope, 'Constant'), value: formattedValue };
+    case 'len':
+      return { label: withScope(scope, 'Length'), value: formattedValue };
+    case 'min_len':
+      return { label: withScope(scope, 'Minimum length'), value: formattedValue };
+    case 'max_len':
+      return { label: withScope(scope, 'Maximum length'), value: formattedValue };
+    case 'len_bytes':
+      return { label: withScope(scope, 'Byte length'), value: formattedValue };
+    case 'min_bytes':
+      return { label: withScope(scope, 'Minimum byte length'), value: formattedValue };
+    case 'max_bytes':
+      return { label: withScope(scope, 'Maximum byte length'), value: formattedValue };
+    case 'pattern':
+      return { label: withScope(scope, 'Match pattern'), value: formattedValue };
+    case 'gt':
+      return { label: withScope(scope, 'Greater than'), value: formattedValue };
+    case 'gte':
+      return { label: withScope(scope, 'Minimum'), value: formattedValue };
+    case 'lt':
+      return { label: withScope(scope, 'Less than'), value: formattedValue };
+    case 'lte':
+      return { label: withScope(scope, 'Maximum'), value: formattedValue };
+    case 'in':
+      return { label: withScope(scope, 'Allowed values'), value: formattedValue };
+    case 'not_in':
+      return { label: withScope(scope, 'Excluded values'), value: formattedValue };
+    case 'defined_only':
+      return value === true
+        ? { label: 'Defined enum values only' }
+        : { label: 'Defined enum values only', value: formattedValue };
+    case 'min_items':
+      return { label: 'Minimum items', value: formattedValue };
+    case 'max_items':
+      return { label: 'Maximum items', value: formattedValue };
+    case 'unique':
+      return value === true ? { label: 'Unique items' } : { label: 'Unique items', value: formattedValue };
+    case 'min_pairs':
+      return { label: 'Minimum map entries', value: formattedValue };
+    case 'max_pairs':
+      return { label: 'Maximum map entries', value: formattedValue };
+    case 'email':
+    case 'hostname':
+    case 'ip':
+    case 'ipv4':
+    case 'ipv6':
+    case 'uri':
+    case 'uri_ref':
+    case 'address':
+    case 'uuid':
+    case 'tuuid':
+    case 'protobuf_fqn':
+      return value === true
+        ? { label: withScope(scope, 'Format'), value: FORMAT_NAMES[name] }
+        : { label: withScope(scope, humanize(name)), value: formattedValue };
+    default:
+      return { label: withScope(scope, humanize(name)), value: formattedValue };
+  }
+};

package/eventcatalog/src/components/Search/Search.astro

@@ -4,18 +4,25 @@ import SearchModal from './SearchModal.tsx';
 ---
 
 <div>
-  <div class="relative flex items-center w-full pr-4 ml-1">
+  <div class="relative flex min-w-0 items-center w-full">
     <input
       id="search-dummy-input"
       type="text"
       name="search"
       placeholder="Search EventCatalog"
       autocomplete="off"
-      class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 pl-10! text-[rgb(var(--ec-header-text))] bg-[rgb(var(--ec-header-bg))] shadow-xs ring-1 ring-inset ring-[rgb(var(--ec-dropdown-border))] placeholder:text-[rgb(var(--ec-icon-color))] font-light sm:text-sm sm:leading-6"
+      class="block h-9 min-w-0 w-full rounded-md caret-transparent border-0 py-1.5 pr-20 pl-10! text-[rgb(var(--ec-header-text))] bg-[rgb(var(--ec-header-bg))] shadow-xs ring-1 ring-inset ring-[rgb(var(--ec-dropdown-border))] placeholder:text-gray-400 font-light sm:text-sm sm:leading-6"
     />
     <MagnifyingGlassIcon className="absolute inset-y-0 left-0 h-9 w-8 flex items-center pl-4 text-[rgb(var(--ec-icon-color))]" />
-    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-6">
-      <kbd class="inline-flex items-center rounded px-1 font-sans text-xs text-[rgb(var(--ec-icon-color))]">⌘K</kbd>
+    <div class="absolute inset-y-0 right-0 flex items-center gap-1 pr-2 pointer-events-none">
+      <kbd
+        class="inline-flex h-6 min-w-6 items-center justify-center rounded-lg border border-[rgb(var(--ec-dropdown-border))] bg-[rgb(var(--ec-card-bg))] px-1 font-sans text-xs font-normal text-[rgb(var(--ec-icon-color))] shadow-xs"
+        >⌘</kbd
+      >
+      <kbd
+        class="inline-flex h-6 min-w-6 items-center justify-center rounded-lg border border-[rgb(var(--ec-dropdown-border))] bg-[rgb(var(--ec-card-bg))] px-1 font-sans text-xs font-normal text-[rgb(var(--ec-icon-color))] shadow-xs"
+        >K</kbd
+      >
     </div>
   </div>
 </div>

package/eventcatalog/src/components/Settings/AssistantSettingsForm.tsx

@@ -76,34 +76,39 @@ export const AssistantSettingsForm = ({ canEdit, initial, chatAvailable, hasPlan
       <Row
         title="Assistant Agent"
         description="Assistant agent that answers questions about your architecture directly in your catalog."
-        canEdit={canEdit && chatAvailable}
+        canEdit={canEdit}
         dirty={dirty}
         saving={saving}
-        onSave={chatAvailable ? save : undefined}
+        onSave={save}
       >
-        {chatAvailable ? (
-          <div className="space-y-3">
-            <ToggleRow
-              icon={<MessageSquare className="h-4 w-4" aria-hidden />}
-              label={chatEnabled ? 'Enabled' : 'Disabled'}
-              hint={chatEnabled ? 'Chat is available to readers of this catalog.' : 'Chat is hidden from the catalog.'}
-              checked={chatEnabled}
-              disabled={!canEdit}
-              onChange={setChatEnabled}
-            />
-            {chatEnabled && <ConfigurationRequired />}
-          </div>
-        ) : !hasPlan ? (
-          <UpgradeRequired
-            tier="Starter and Scale"
-            blurb="The EventCatalog Assistant is part of our paid plans. Upgrade to give your team a built-in AI agent that answers questions about your architecture."
-            docsUrl={ASSISTANT_DOCS_URL}
+        <div className="space-y-3">
+          <ToggleRow
+            icon={<MessageSquare className="h-4 w-4" aria-hidden />}
+            label={chatEnabled ? 'Enabled' : 'Disabled'}
+            hint={
+              chatEnabled
+                ? 'Event Catalog Assistant is visible in this catalog.'
+                : 'Event Catalog Assistant is hidden from this catalog.'
+            }
+            checked={chatEnabled}
+            disabled={!canEdit}
+            onChange={setChatEnabled}
           />
-        ) : !inSSR ? (
-          <AssistantNeedsSSR />
-        ) : !hasChatConfigFile ? (
-          <AssistantNeedsConfigFile />
-        ) : null}
+          {chatEnabled &&
+            (chatAvailable ? (
+              <ConfigurationRequired />
+            ) : !hasPlan ? (
+              <UpgradeRequired
+                tier="Starter and Scale"
+                blurb="The EventCatalog Assistant is part of our paid plans. Upgrade to give your team a built-in AI agent that answers questions about your architecture."
+                docsUrl={ASSISTANT_DOCS_URL}
+              />
+            ) : !inSSR ? (
+              <AssistantNeedsSSR />
+            ) : !hasChatConfigFile ? (
+              <AssistantNeedsConfigFile />
+            ) : null)}
+        </div>
       </Row>
     </form>
   );

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/index.astro

@@ -21,7 +21,7 @@ import {
   isVisualiserEnabled,
   isMarkdownDownloadEnabled,
   isRSSEnabled,
-  isEventCatalogChatEnabled,
+  isEventCatalogChatVisible,
   isArchitectureGraphEnabled,
 } from '@utils/feature';
 
@@ -152,11 +152,11 @@ const editUrl =
                 client:only="react"
                 variant="toolbar"
                 schemas={[]}
-                chatEnabled={isEventCatalogChatEnabled()}
+                chatEnabled={isEventCatalogChatVisible()}
                 markdownDownloadEnabled={isMarkdownDownloadEnabled()}
                 rssFeedEnabled={isRSSEnabled()}
                 editUrl={editUrl}
-                preferChatAsDefault={isEventCatalogChatEnabled()}
+                preferChatAsDefault={isEventCatalogChatVisible()}
               />
             </div>
           </div>

package/eventcatalog/src/pages/diagrams/[id]/[version]/index.astro

@@ -7,7 +7,7 @@ import config from '@config';
 import { buildUrl } from '@utils/url-builder';
 import { GitCompare, X, AlignLeft, HistoryIcon } from 'lucide-react';
 import CopyAsMarkdown from '@components/CopyAsMarkdown';
-import { isLLMSTxtEnabled, isEventCatalogChatEnabled } from '@utils/feature';
+import { isLLMSTxtEnabled, isEventCatalogChatVisible } from '@utils/feature';
 
 import { Page } from './_index.data';
 
@@ -21,7 +21,7 @@ const pageTitle = `Diagram | ${props.data.name}`;
 const currentVersion = props.data.version;
 const allVersions = props.allVersions || [currentVersion];
 const hasMultipleVersions = allVersions.length > 1;
-const chatEnabled = isEventCatalogChatEnabled();
+const chatEnabled = isEventCatalogChatVisible();
 const markdownDownloadEnabled = isLLMSTxtEnabled();
 const chatQuery = `Tell me about the "${props.data.name}" diagram (version ${props.data.version})`;
 ---

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/[docType]/[docId]/[docVersion]/index.astro

@@ -8,7 +8,7 @@ import CopyAsMarkdown from '@components/CopyAsMarkdown';
 import Badge from '@components/Badge.astro';
 import { buildUrl } from '@utils/url-builder';
 import { AlignLeftIcon, HistoryIcon } from 'lucide-react';
-import { isEventCatalogChatEnabled, isMarkdownDownloadEnabled, isResourceDocsEnabled } from '@utils/feature';
+import { isEventCatalogChatVisible, isMarkdownDownloadEnabled, isResourceDocsEnabled } from '@utils/feature';
 import { getResourceDocTypeLabel } from '@utils/collections/resource-docs';
 import { getIcon } from '@utils/badges';
 import { collectionToResourceMap } from '@utils/collections/util';
@@ -37,7 +37,7 @@ const docsBasePath = `/docs/${props.data.resourceCollection}/${props.data.resour
 const singularResourceName =
   collectionToResourceMap[props.data.resourceCollection as keyof typeof collectionToResourceMap] ??
   props.data.resourceCollection.slice(0, props.data.resourceCollection.length - 1);
-const chatEnabled = isEventCatalogChatEnabled();
+const chatEnabled = isEventCatalogChatVisible();
 const chatQuery = `Tell me about the ${props.data.type} doc "${title}" for ${props.data.resourceId} (version ${props.data.version})`;
 
 const pagefindAttributes =
@@ -69,7 +69,9 @@ const pagefindAttributes =
           {
             badges.length > 0 && (
               <div class="flex flex-wrap gap-1.5 pt-4">
-                {badges.map((badge: any) => <Badge badge={badge} />)}
+                {badges.map((badge: any) => (
+                  <Badge badge={badge} />
+                ))}
               </div>
             )
           }

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/[docType]/[docId]/index.astro

@@ -8,7 +8,7 @@ import CopyAsMarkdown from '@components/CopyAsMarkdown';
 import Badge from '@components/Badge.astro';
 import { buildUrl } from '@utils/url-builder';
 import { AlignLeftIcon, HistoryIcon } from 'lucide-react';
-import { isEventCatalogChatEnabled, isMarkdownDownloadEnabled, isResourceDocsEnabled } from '@utils/feature';
+import { isEventCatalogChatVisible, isMarkdownDownloadEnabled, isResourceDocsEnabled } from '@utils/feature';
 import { getIcon } from '@utils/badges';
 import { collectionToResourceMap } from '@utils/collections/util';
 import { getResourceDocTypeLabel } from '@utils/collections/resource-docs';
@@ -38,7 +38,7 @@ const singularResourceName =
   collectionToResourceMap[props.data.resourceCollection as keyof typeof collectionToResourceMap] ??
   props.data.resourceCollection.slice(0, props.data.resourceCollection.length - 1);
 const typeLabel = getResourceDocTypeLabel(props.data.type);
-const chatEnabled = isEventCatalogChatEnabled();
+const chatEnabled = isEventCatalogChatVisible();
 const chatQuery = `Tell me about the ${props.data.type} doc "${title}" for ${props.data.resourceId} (version ${props.data.version})`;
 
 const pagefindAttributes =
@@ -60,11 +60,17 @@ const pagefindAttributes =
             <span class="text-xs md:text-sm font-semibold text-[rgb(var(--ec-accent))] capitalize">{typeLabel}</span>
             <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{title}</h2>
           </div>
-          {props.data.summary && <p class="text-base pt-4 text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</p>}
+          {
+            props.data.summary && (
+              <p class="text-base pt-4 text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</p>
+            )
+          }
           {
             badges.length > 0 && (
               <div class="flex flex-wrap gap-1.5 pt-4">
-                {badges.map((badge: any) => <Badge badge={badge} />)}
+                {badges.map((badge: any) => (
+                  <Badge badge={badge} />
+                ))}
               </div>
             )
           }