Skip to content

Commit c8b2c9e

Browse files
emir-karabegemir-karabeg
committed
improvement(subdomain): added header links
1 parent fd82b99 commit c8b2c9e

3 files changed

Lines changed: 193 additions & 12 deletions

File tree

‎apps/sim/app/chat/[subdomain]/components/chat-client.tsx‎

Lines changed: 157 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import { Input } from '@/components/ui/input'
1515
import { OTPInputForm } from '@/components/ui/input-otp-form'
1616
import { ScrollArea } from '@/components/ui/scroll-area'
1717
import { cn } from '@/lib/utils'
18+
import { getFormattedGitHubStars } from '@/app/(landing)/actions/github'
19+
import HeaderLinks from './components/header-links/header-links'
1820
import MarkdownRenderer from './components/markdown-renderer/markdown-renderer'
1921

2022
// Define message type
@@ -96,6 +98,7 @@ export default function ChatClient({ subdomain }: { subdomain: string }) {
9698
const messagesEndRef = useRef<HTMLDivElement>(null)
9799
const messagesContainerRef = useRef<HTMLDivElement>(null)
98100
const inputRef = useRef<HTMLInputElement>(null)
101+
const [starCount, setStarCount] = useState('3.4k')
99102

100103
// Authentication state
101104
const [authRequired, setAuthRequired] = useState<'password' | 'email' | null>(null)
@@ -163,6 +166,15 @@ export default function ChatClient({ subdomain }: { subdomain: string }) {
163166
// Fetch chat config on mount
164167
useEffect(() => {
165168
fetchChatConfig()
169+
170+
// Fetch GitHub stars
171+
getFormattedGitHubStars()
172+
.then((formattedStars) => {
173+
setStarCount(formattedStars)
174+
})
175+
.catch((err) => {
176+
console.error('Failed to fetch GitHub stars:', err)
177+
})
166178
}, [subdomain])
167179

168180
// Handle keyboard input for message sending
@@ -514,6 +526,49 @@ export default function ChatClient({ subdomain }: { subdomain: string }) {
514526
return (
515527
<div className="flex items-center justify-center min-h-screen bg-gray-50">
516528
<div className="p-6 max-w-md mx-auto bg-white rounded-xl shadow-md">
529+
<div className="flex justify-between items-center mb-2">
530+
<a href="https://simstudio.ai" target="_blank" rel="noopener noreferrer">
531+
<svg
532+
width="32"
533+
height="32"
534+
viewBox="0 0 50 50"
535+
fill="none"
536+
xmlns="http://www.w3.org/2000/svg"
537+
className="rounded-[6px]"
538+
>
539+
<rect width="50" height="50" fill="#701FFC" />
540+
<path
541+
d="M34.1455 20.0728H16.0364C12.7026 20.0728 10 22.7753 10 26.1091V35.1637C10 38.4975 12.7026 41.2 16.0364 41.2H34.1455C37.4792 41.2 40.1818 38.4975 40.1818 35.1637V26.1091C40.1818 22.7753 37.4792 20.0728 34.1455 20.0728Z"
542+
fill="#701FFC"
543+
stroke="white"
544+
strokeWidth="3.5"
545+
strokeLinecap="round"
546+
strokeLinejoin="round"
547+
/>
548+
<path
549+
d="M25.0919 14.0364C26.7588 14.0364 28.1101 12.6851 28.1101 11.0182C28.1101 9.35129 26.7588 8 25.0919 8C23.425 8 22.0737 9.35129 22.0737 11.0182C22.0737 12.6851 23.425 14.0364 25.0919 14.0364Z"
550+
fill="#701FFC"
551+
stroke="white"
552+
strokeWidth="4"
553+
strokeLinecap="round"
554+
strokeLinejoin="round"
555+
/>
556+
<path
557+
d="M25.0915 14.856V19.0277V14.856ZM20.5645 32.1398V29.1216V32.1398ZM29.619 29.1216V32.1398V29.1216Z"
558+
fill="#701FFC"
559+
/>
560+
<path
561+
d="M25.0915 14.856V19.0277M20.5645 32.1398V29.1216M29.619 29.1216V32.1398"
562+
stroke="white"
563+
strokeWidth="4"
564+
strokeLinecap="round"
565+
strokeLinejoin="round"
566+
/>
567+
<circle cx="25" cy="11" r="2" fill="#701FFC" />
568+
</svg>
569+
</a>
570+
<HeaderLinks stars={starCount} />
571+
</div>
517572
<h2 className="text-xl font-bold text-red-500 mb-2">Error</h2>
518573
<p className="text-gray-700">{error}</p>
519574
</div>
@@ -530,6 +585,49 @@ export default function ChatClient({ subdomain }: { subdomain: string }) {
530585
return (
531586
<div className="flex items-center justify-center min-h-screen bg-gray-50">
532587
<div className="p-6 max-w-md w-full mx-auto bg-white rounded-xl shadow-md">
588+
<div className="flex justify-between items-center w-full mb-4">
589+
<a href="https://simstudio.ai" target="_blank" rel="noopener noreferrer">
590+
<svg
591+
width="32"
592+
height="32"
593+
viewBox="0 0 50 50"
594+
fill="none"
595+
xmlns="http://www.w3.org/2000/svg"
596+
className="rounded-[6px]"
597+
>
598+
<rect width="50" height="50" fill="#701FFC" />
599+
<path
600+
d="M34.1455 20.0728H16.0364C12.7026 20.0728 10 22.7753 10 26.1091V35.1637C10 38.4975 12.7026 41.2 16.0364 41.2H34.1455C37.4792 41.2 40.1818 38.4975 40.1818 35.1637V26.1091C40.1818 22.7753 37.4792 20.0728 34.1455 20.0728Z"
601+
fill="#701FFC"
602+
stroke="white"
603+
strokeWidth="3.5"
604+
strokeLinecap="round"
605+
strokeLinejoin="round"
606+
/>
607+
<path
608+
d="M25.0919 14.0364C26.7588 14.0364 28.1101 12.6851 28.1101 11.0182C28.1101 9.35129 26.7588 8 25.0919 8C23.425 8 22.0737 9.35129 22.0737 11.0182C22.0737 12.6851 23.425 14.0364 25.0919 14.0364Z"
609+
fill="#701FFC"
610+
stroke="white"
611+
strokeWidth="4"
612+
strokeLinecap="round"
613+
strokeLinejoin="round"
614+
/>
615+
<path
616+
d="M25.0915 14.856V19.0277V14.856ZM20.5645 32.1398V29.1216V32.1398ZM29.619 29.1216V32.1398V29.1216Z"
617+
fill="#701FFC"
618+
/>
619+
<path
620+
d="M25.0915 14.856V19.0277M20.5645 32.1398V29.1216M29.619 29.1216V32.1398"
621+
stroke="white"
622+
strokeWidth="4"
623+
strokeLinecap="round"
624+
strokeLinejoin="round"
625+
/>
626+
<circle cx="25" cy="11" r="2" fill="#701FFC" />
627+
</svg>
628+
</a>
629+
<HeaderLinks stars={starCount} />
630+
</div>
533631
<div className="text-center mb-6">
534632
<h2 className="text-xl font-bold mb-2">{title}</h2>
535633
<p className="text-gray-600">
@@ -744,18 +842,65 @@ export default function ChatClient({ subdomain }: { subdomain: string }) {
744842
}
745843
`}</style>
746844

747-
{/* Header with title */}
748-
<div className="flex items-center justify-between px-4 py-3">
749-
<h2 className="text-lg font-medium">
750-
{chatConfig.customizations?.headerText || chatConfig.title || 'Chat'}
751-
</h2>
752-
{chatConfig.customizations?.logoUrl && (
753-
<img
754-
src={chatConfig.customizations.logoUrl}
755-
alt={`${chatConfig.title} logo`}
756-
className="h-6 w-6 object-contain"
757-
/>
758-
)}
845+
{/* Header with title and links */}
846+
<div className="flex items-center justify-between px-6 py-4">
847+
<div className="flex items-center gap-2">
848+
{chatConfig?.customizations?.logoUrl && (
849+
<img
850+
src={chatConfig.customizations.logoUrl}
851+
alt={`${chatConfig?.title || 'Chat'} logo`}
852+
className="h-6 w-6 object-contain"
853+
/>
854+
)}
855+
<h2 className="text-lg font-medium">
856+
{chatConfig?.customizations?.headerText || chatConfig?.title || 'Chat'}
857+
</h2>
858+
</div>
859+
<div className="flex items-center gap-3">
860+
<HeaderLinks stars={starCount} />
861+
{!chatConfig?.customizations?.logoUrl && (
862+
<a href="https://simstudio.ai" target="_blank" rel="noopener noreferrer">
863+
<svg
864+
width="32"
865+
height="32"
866+
viewBox="0 0 50 50"
867+
fill="none"
868+
xmlns="http://www.w3.org/2000/svg"
869+
className="rounded-[6px]"
870+
>
871+
<rect width="50" height="50" fill="#701FFC" />
872+
<path
873+
d="M34.1455 20.0728H16.0364C12.7026 20.0728 10 22.7753 10 26.1091V35.1637C10 38.4975 12.7026 41.2 16.0364 41.2H34.1455C37.4792 41.2 40.1818 38.4975 40.1818 35.1637V26.1091C40.1818 22.7753 37.4792 20.0728 34.1455 20.0728Z"
874+
fill="#701FFC"
875+
stroke="white"
876+
strokeWidth="3.5"
877+
strokeLinecap="round"
878+
strokeLinejoin="round"
879+
/>
880+
<path
881+
d="M25.0919 14.0364C26.7588 14.0364 28.1101 12.6851 28.1101 11.0182C28.1101 9.35129 26.7588 8 25.0919 8C23.425 8 22.0737 9.35129 22.0737 11.0182C22.0737 12.6851 23.425 14.0364 25.0919 14.0364Z"
882+
fill="#701FFC"
883+
stroke="white"
884+
strokeWidth="4"
885+
strokeLinecap="round"
886+
strokeLinejoin="round"
887+
/>
888+
<path
889+
d="M25.0915 14.856V19.0277V14.856ZM20.5645 32.1398V29.1216V32.1398ZM29.619 29.1216V32.1398V29.1216Z"
890+
fill="#701FFC"
891+
/>
892+
<path
893+
d="M25.0915 14.856V19.0277M20.5645 32.1398V29.1216M29.619 29.1216V32.1398"
894+
stroke="white"
895+
strokeWidth="4"
896+
strokeLinecap="round"
897+
strokeLinejoin="round"
898+
/>
899+
<circle cx="25" cy="11" r="2" fill="#701FFC" />
900+
</svg>
901+
</a>
902+
)}
903+
</div>
759904
</div>
760905

761906
{/* Messages container */}

‎apps/sim/app/chat/[subdomain]/components/components/header-links/header-links.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
'use client'
2+
3+
import { motion } from 'framer-motion'
4+
import { GithubIcon } from '@/components/icons'
5+
6+
interface HeaderLinksProps {
7+
stars: string
8+
}
9+
10+
export default function HeaderLinks({ stars }: HeaderLinksProps) {
11+
return (
12+
<div className="flex items-center">
13+
<motion.a
14+
href="https://github.com/simstudioai/sim"
15+
className="flex items-center gap-1.5 text-foreground/80 hover:text-foreground/100 p-1 rounded-md transition-colors duration-200"
16+
aria-label="GitHub"
17+
target="_blank"
18+
rel="noopener noreferrer"
19+
initial={{ opacity: 0, y: -5 }}
20+
animate={{ opacity: 1, y: 0 }}
21+
transition={{ duration: 0.2, ease: 'easeOut', delay: 0.1 }}
22+
>
23+
<GithubIcon className="w-[24px] h-[24px]" />
24+
<span className="text-sm font-medium hidden sm:inline">{stars}</span>
25+
</motion.a>
26+
</div>
27+
)
28+
}

‎apps/sim/public/icon.svg‎

Lines changed: 8 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)