Function STMTab

SettingsModal.tsx:1303–1343

()

}

function STMTab() {
  const { stmModules, toggleSTM } = useStore()

  return (
    <div className="space-y-4">
      <div>
        <h3 className="text-lg font-semibold mb-2">Semantic Transformation Modules</h3>
        <p className="text-sm theme-secondary mb-4">
          STMs modify model outputs to adjust tone, style, or behavior.
          Enable modules to transform responses in real-time.
        </p>
      </div>

      <div className="space-y-3">
        {stmModules.map((stm) => (
          <div
            key={stm.id}
            className="p-4 bg-theme-dim border border-theme-primary rounded-lg"
          >
            <div className="flex items-center justify-between">
              <div className="flex-1">
                <h4 className="font-semibold">{stm.name}</h4>
                <p className="text-sm theme-secondary">{stm.description}</p>
              </div>
              <button
                onClick={() => toggleSTM(stm.id)}
                className={`w-12 h-6 rounded-full transition-colors relative
                  ${stm.enabled ? 'bg-green-500' : 'bg-theme-accent'}`}
              >
                <span
                  className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-transform
                    ${stm.enabled ? 'left-7' : 'left-1'}`}
                />
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

function MemoryTab() {
  const {