Skip to content

Commit 0464a57

Browse files
waleedlatif1TheodoreSpeaks
waleedlatif1
and
TheodoreSpeaks
authored
fix(ui): posthog guard, dynamic import loading, compact variant, rebase cleanup (#4196)
* v0.6.29: login improvements, posthog telemetry (#4026) * feat(posthog): Add tracking on mothership abort (#4023) Co-authored-by: Theodore Li <theo@sim.ai> * fix(login): fix captcha headers for manual login (#4025) * fix(signup): fix turnstile key loading * fix(login): fix captcha header passing * Catch user already exists, remove login form captcha * fix(ui): posthog guard, dynamic import loading, compact variant, rebase cleanup --------- Co-authored-by: Theodore Li <theodoreqili@gmail.com>
1 parent 23ccd4a commit 0464a57

File tree

10 files changed

+56
-38
lines changed

10 files changed

+56
-38
lines changed

‎apps/sim/app/(landing)/components/collaboration/collaboration.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ import Link from 'next/link'
77
import { Badge } from '@/components/emcn'
88
import { trackLandingCta } from '@/app/(landing)/landing-analytics'
99

10-
const AuthModal = dynamic(() =>
11-
import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal)
10+
const AuthModal = dynamic(
11+
() => import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal),
12+
{ loading: () => null }
1213
)
1314

1415
interface DotGridProps {

‎apps/sim/app/(landing)/components/features/features.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ import { Badge } from '@/components/emcn'
88
import { FeaturesPreview } from '@/app/(landing)/components/features/components/features-preview'
99
import { trackLandingCta } from '@/app/(landing)/landing-analytics'
1010

11-
const AuthModal = dynamic(() =>
12-
import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal)
11+
const AuthModal = dynamic(
12+
() => import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal),
13+
{ loading: () => null }
1314
)
1415

1516
function hexToRgba(hex: string, alpha: number): string {

‎apps/sim/app/(landing)/components/footer/footer-cta.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ import { useLandingSubmit } from '@/app/(landing)/components/landing-preview/com
99
import { trackLandingCta } from '@/app/(landing)/landing-analytics'
1010
import { useAnimatedPlaceholder } from '@/hooks/use-animated-placeholder'
1111

12-
const AuthModal = dynamic(() =>
13-
import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal)
12+
const AuthModal = dynamic(
13+
() => import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal),
14+
{ loading: () => null }
1415
)
1516

1617
const MAX_HEIGHT = 120

‎apps/sim/app/(landing)/components/hero/hero.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,17 @@ import dynamic from 'next/dynamic'
44
import { cn } from '@/lib/core/utils/cn'
55
import { trackLandingCta } from '@/app/(landing)/landing-analytics'
66

7-
const AuthModal = dynamic(() =>
8-
import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal)
7+
const AuthModal = dynamic(
8+
() => import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal),
9+
{ loading: () => null }
910
)
1011

11-
const DemoRequestModal = dynamic(() =>
12-
import('@/app/(landing)/components/demo-request/demo-request-modal').then(
13-
(m) => m.DemoRequestModal
14-
)
12+
const DemoRequestModal = dynamic(
13+
() =>
14+
import('@/app/(landing)/components/demo-request/demo-request-modal').then(
15+
(m) => m.DemoRequestModal
16+
),
17+
{ loading: () => null }
1518
)
1619

1720
const LandingPreview = dynamic(

‎apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,9 @@ import {
2121
} from '@/app/(landing)/components/landing-preview/components/landing-preview-workflow/workflow-data'
2222
import { trackLandingCta } from '@/app/(landing)/landing-analytics'
2323

24-
const AuthModal = dynamic(() =>
25-
import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal)
24+
const AuthModal = dynamic(
25+
() => import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal),
26+
{ loading: () => null }
2627
)
2728

2829
type PanelTab = 'copilot' | 'editor'

‎apps/sim/app/(landing)/components/navbar/navbar.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@ import { GitHubStars } from '@/app/(landing)/components/navbar/components/github
1717
import { trackLandingCta } from '@/app/(landing)/landing-analytics'
1818
import { getBrandConfig } from '@/ee/whitelabeling'
1919

20-
const AuthModal = dynamic(() =>
21-
import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal)
20+
const AuthModal = dynamic(
21+
() => import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal),
22+
{ loading: () => null }
2223
)
2324

2425
type DropdownId = 'docs' | 'blog' | null

‎apps/sim/app/(landing)/components/pricing/pricing.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,17 @@ import dynamic from 'next/dynamic'
44
import { Badge } from '@/components/emcn'
55
import { trackLandingCta } from '@/app/(landing)/landing-analytics'
66

7-
const AuthModal = dynamic(() =>
8-
import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal)
7+
const AuthModal = dynamic(
8+
() => import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal),
9+
{ loading: () => null }
910
)
1011

11-
const DemoRequestModal = dynamic(() =>
12-
import('@/app/(landing)/components/demo-request/demo-request-modal').then(
13-
(m) => m.DemoRequestModal
14-
)
12+
const DemoRequestModal = dynamic(
13+
() =>
14+
import('@/app/(landing)/components/demo-request/demo-request-modal').then(
15+
(m) => m.DemoRequestModal
16+
),
17+
{ loading: () => null }
1518
)
1619

1720
interface PricingTier {

‎apps/sim/app/_shell/providers/session-provider.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ export function SessionProvider({ children }: { children: React.ReactNode }) {
9494
})
9595
if (
9696
typeof posthog.startSessionRecording === 'function' &&
97+
typeof posthog.sessionRecordingStarted === 'function' &&
9798
!posthog.sessionRecordingStarted()
9899
) {
99100
posthog.startSessionRecording()

‎apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client'
22

3-
import { useEffect, useRef, useState } from 'react'
3+
import { useCallback, useRef, useState } from 'react'
44
import { ArrowUp, ChevronDown, ChevronRight, Paperclip, Pencil, Trash2 } from 'lucide-react'
55
import { Tooltip } from '@/components/emcn'
66
import { UserMessageContent } from '@/app/workspace/[workspaceId]/home/components/user-message-content'
@@ -17,22 +17,23 @@ interface QueuedMessagesProps {
1717

1818
export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: QueuedMessagesProps) {
1919
const [isExpanded, setIsExpanded] = useState(true)
20-
const containerRef = useRef<HTMLDivElement>(null)
2120
const [isNarrow, setIsNarrow] = useState(false)
21+
const roRef = useRef<ResizeObserver | null>(null)
2222

23-
const hasMessages = messageQueue.length > 0
24-
25-
useEffect(() => {
26-
const el = containerRef.current
23+
const containerRef = useCallback((el: HTMLDivElement | null) => {
24+
if (roRef.current) {
25+
roRef.current.disconnect()
26+
roRef.current = null
27+
}
2728
if (!el) return
2829
const ro = new ResizeObserver((entries) => {
2930
setIsNarrow(entries[0].contentRect.width < NARROW_WIDTH_PX)
3031
})
3132
ro.observe(el)
32-
return () => ro.disconnect()
33-
}, [hasMessages])
33+
roRef.current = ro
34+
}, [])
3435

35-
if (!hasMessages) return null
36+
if (messageQueue.length === 0) return null
3637

3738
return (
3839
<div
@@ -70,7 +71,7 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
7071
content={msg.content}
7172
contexts={msg.contexts}
7273
plainMentions
73-
className='!truncate !whitespace-nowrap !text-small !leading-[20px]'
74+
compact
7475
/>
7576
</div>
7677

‎apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,17 @@ import { useWorkflows } from '@/hooks/queries/workflows'
1010
const USER_MESSAGE_CLASSES =
1111
'whitespace-pre-wrap break-words [overflow-wrap:anywhere] font-[430] font-[family-name:var(--font-inter)] text-base text-[var(--text-primary)] leading-[23px] tracking-[0] antialiased'
1212

13+
const COMPACT_CLASSES =
14+
'truncate text-small leading-[20px] font-[430] font-[family-name:var(--font-inter)] text-[var(--text-primary)] tracking-[0] antialiased'
15+
1316
interface UserMessageContentProps {
1417
content: string
1518
contexts?: ChatMessageContext[]
1619
className?: string
1720
/** When true, render mentions as plain inline text (no icon/pill) so truncation flows naturally. */
1821
plainMentions?: boolean
22+
/** Use compact single-line layout with truncation. */
23+
compact?: boolean
1924
}
2025

2126
function escapeRegex(str: string): string {
@@ -73,15 +78,15 @@ export function UserMessageContent({
7378
contexts,
7479
className,
7580
plainMentions = false,
81+
compact = false,
7682
}: UserMessageContentProps) {
7783
const trimmed = content.trim()
78-
const classes = cn(USER_MESSAGE_CLASSES, className)
84+
const classes = cn(compact ? COMPACT_CLASSES : USER_MESSAGE_CLASSES, className)
7985

80-
if (!contexts || contexts.length === 0) {
81-
return <p className={classes}>{trimmed}</p>
82-
}
83-
84-
const ranges = computeMentionRanges(content, contexts)
86+
const ranges = useMemo(
87+
() => (contexts && contexts.length > 0 ? computeMentionRanges(content, contexts) : []),
88+
[content, contexts]
89+
)
8590

8691
if (ranges.length === 0) {
8792
return <p className={classes}>{trimmed}</p>

0 commit comments

Comments
 (0)