From 4d5409280527cd1c1eab515d314d5c694e92a145 Mon Sep 17 00:00:00 2001
From: somethingwentwell <warwwc@gmail.com>
Date: Fri, 13 Mar 2026 02:15:28 +0800
Subject: [PATCH] feat: improve teams integration and registration UX

---
 .../versions/add_microsoft_teams_support.py   |  3 +-
 frontend/src/pages/AgentCreate.tsx            | 30 ++++++++++++++++++
 frontend/src/pages/Login.tsx                  | 31 +++++++++++--------
 3 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/backend/alembic/versions/add_microsoft_teams_support.py b/backend/alembic/versions/add_microsoft_teams_support.py
index f02ebed..d09aa6c 100644
--- a/backend/alembic/versions/add_microsoft_teams_support.py
+++ b/backend/alembic/versions/add_microsoft_teams_support.py
@@ -12,7 +12,8 @@
 def upgrade() -> None:
     # Add 'microsoft_teams' to im_provider_enum
     op.execute("ALTER TYPE im_provider_enum ADD VALUE IF NOT EXISTS 'microsoft_teams'")
-    op.add_column('chat_messages', sa.Column('thinking', sa.Text(), nullable=True))
+    # Add 'thinking' column to chat_messages if it does not already exist
+    op.execute("ALTER TABLE chat_messages ADD COLUMN IF NOT EXISTS thinking TEXT")
     # Add 'microsoft_teams' to channel_type_enum
     op.execute("ALTER TYPE channel_type_enum ADD VALUE IF NOT EXISTS 'microsoft_teams'")
 
diff --git a/frontend/src/pages/AgentCreate.tsx b/frontend/src/pages/AgentCreate.tsx
index 4a53fc6..077f6bb 100644
--- a/frontend/src/pages/AgentCreate.tsx
+++ b/frontend/src/pages/AgentCreate.tsx
@@ -560,6 +560,36 @@ export default function AgentCreate() {
                                 )}
                             </div>
 
+                            {/* Microsoft Teams (configure after creation in Agent settings) */}
+                            <div style={{ border: '1px solid var(--border-default)', borderRadius: '8px', overflow: 'hidden' }}>
+                                <div
+                                    style={{
+                                        display: 'flex', alignItems: 'center', gap: '12px', padding: '14px',
+                                        background: 'var(--bg-elevated)',
+                                    }}
+                                >
+                                    {/* Simple Teams icon */}
+                                    <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
+                                        <rect x="2.5" y="4" width="12" height="12" rx="3" fill="#6264A7" />
+                                        <path
+                                            d="M7 9h5c.3 0 .5.2.5.5v1.1c0 .3-.2.5-.5.5H10.9v4.7c0 .3-.2.5-.5.5H8.7c-.3 0-.5-.2-.5-.5v-4.7H7c-.3 0-.5-.2-.5-.5V9.5C6.5 9.2 6.7 9 7 9Z"
+                                            fill="#FFFFFF"
+                                        />
+                                        <circle cx="18.5" cy="7.5" r="2.1" fill="#7B83EB" />
+                                        <rect x="16.4" y="10.3" width="4.6" height="5.8" rx="2" fill="#7B83EB" />
+                                    </svg>
+                                    <div style={{ flex: 1 }}>
+                                        <div style={{ fontWeight: 500, fontSize: '13px' }}>Microsoft Teams</div>
+                                        <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>
+                                            Teams Bot (configure details in Agent Settings after creation)
+                                        </div>
+                                    </div>
+                                    <span style={{ fontSize: '10px', padding: '2px 8px', borderRadius: '10px', background: 'var(--bg-secondary)', color: 'var(--text-tertiary)', fontWeight: 500 }}>
+                                        Available
+                                    </span>
+                                </div>
+                            </div>
+
                             {/* Other channels — coming soon */}
                             {[
                                 { icon: '💬', name: t('wizard.step5.dingtalk', 'DingTalk'), desc: t('wizard.step5.dingtalkDesc', 'DingTalk custom robot integration') },
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 3a1bfcf..f7a085e 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -174,19 +174,24 @@ export default function Login() {
                                         placeholder={t('auth.emailPlaceholder')}
                                     />
                                 </div>
-                                <div className="login-field">
-                                    <label>{t('auth.selectCompany')}</label>
-                                    <select
-                                        value={form.tenant_id}
-                                        onChange={(e) => setForm({ ...form, tenant_id: e.target.value })}
-                                        required
-                                    >
-                                        <option value="">{t('auth.selectCompanyPlaceholder')}</option>
-                                        {tenants.map((tenant) => (
-                                            <option key={tenant.id} value={tenant.id}>{tenant.name}</option>
-                                        ))}
-                                    </select>
-                                </div>
+
+                                {/* Only show company selector if there are tenants to choose from */}
+                                {tenants.length > 0 && (
+                                    <div className="login-field">
+                                        <label>{t('auth.selectCompany')}</label>
+                                        <select
+                                            value={form.tenant_id}
+                                            onChange={(e) => setForm({ ...form, tenant_id: e.target.value })}
+                                            required
+                                        >
+                                            <option value="">{t('auth.selectCompanyPlaceholder')}</option>
+                                            {tenants.map((tenant) => (
+                                                <option key={tenant.id} value={tenant.id}>{tenant.name}</option>
+                                            ))}
+                                        </select>
+                                    </div>
+                                )}
+
                                 {invitationRequired && (
                                     <div className="login-field">
                                         <label>{t('auth.invitationCode')}</label>