Link Preview Improvements

src/components/chats/ChatItem/LinkPreview.tsx

@@ -21,7 +21,7 @@ export default function LinkPreview({
   ...props
 }: LinkPreviewProps) {
   const canEmbed = useCanRenderEmbed(link)
-  const customButtonText = useMemo(() => getCustomButtonText(link), [link])
+  const internalLinkText = useMemo(() => getInternalLinkText(link), [link])
 
   if (!linkMetadata || (canEmbed && renderNullIfLinkEmbedable)) return null
 
@@ -55,6 +55,7 @@ export default function LinkPreview({
             'font-semibold',
             isMyMessage ? 'text-text-secondary-light' : 'text-text-primary'
           )}
+          onClick={(e) => e.stopPropagation()}
         >
           {siteName}
         </LinkText>
@@ -73,40 +74,41 @@ export default function LinkPreview({
           height={400}
           className='mt-2 max-h-72 rounded-lg bg-background-lighter/50 object-contain'
         />
-        {customButtonText && (
+        {internalLinkText && (
           <Button
+            onClick={(e) => e.stopPropagation()}
             variant={isMyMessage ? 'whiteOutline' : 'primaryOutline'}
             className='mt-2 w-full'
             href={link}
           >
-            {customButtonText}
+            {internalLinkText}
           </Button>
         )}
       </div>
     </div>
   )
 }
 
-const customButtonTexts = [
+const internalLinkTexts = [
   {
     checker: (link: string) =>
-      // regex for url grill.chat/[any text]/[any text]
+      // regex for url grill.chat/[any text]/[any text] for message page
       /(?:https?:\/\/)?(?:www\.)?(?:grill\.chat)\/(.+)\/(.+)\/(.+)/.test(link),
     text: 'View message',
   },
   {
     checker: (link: string) =>
-      // regex for url grill.chat/[any text]/[any text]
+      // regex for url grill.chat/[any text]/[any text] for chat page
       /(?:https?:\/\/)?(?:www\.)?(?:grill\.chat)\/(.+)\/(.+)/.test(link),
     text: 'Open chat',
   },
   {
     checker: (link: string) =>
-      // regex for url grill.chat/[any text]
+      // regex for url grill.chat/[any text] for hub page
       /(?:https?:\/\/)?(?:www\.)?(?:grill\.chat)\/(.+)/.test(link),
-    text: 'Open hub',
+    text: 'Open page',
   },
 ]
-function getCustomButtonText(link: string) {
-  return customButtonTexts.find((item) => item.checker(link))?.text
+function getInternalLinkText(link: string) {
+  return internalLinkTexts.find((item) => item.checker(link))?.text
 }

src/components/chats/ChatItem/variants/DefaultChatItem.tsx

@@ -69,6 +69,10 @@ export default function DefaultChatItem({
                   variant={isMyMessage ? 'secondary-light' : 'secondary'}
                   className={cx('underline')}
                   openInNewTab
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    attributes.onClick?.(e)
+                  }}
                 >
                   {content}
                 </LinkText>

src/components/chats/ChatList/ChatList.tsx

@@ -54,7 +54,7 @@ export type ChatListProps = ComponentProps<'div'> & {
 export default function ChatList(props: ChatListProps) {
   const isInitialized = useMyAccount((state) => state.isInitialized)
   if (!isInitialized) return null
-  return <ChatListContent {...props} />
+  return <ChatListContent key={props.chatId} {...props} />
 }
 
 const SCROLL_THRESHOLD = 1000

src/components/extensions/common/CommonChatItem.tsx

@@ -154,6 +154,10 @@ export default function CommonChatItem({
                     variant={isMyMessage ? 'default' : 'secondary'}
                     className={cx('underline')}
                     openInNewTab
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      attributes.onClick?.(e)
+                    }}
                   >
                     {content}
                   </LinkText>

src/modules/chat/ChatPage/ChatPage.tsx

@@ -68,6 +68,7 @@ export default function ChatPage({
     if (isNewChat) setIsOpenCreateSuccessModal(true)
   }, [])
   useEffect(() => {
+    if (!getUrlQuery('new')) return
     if (!isOpenCreateSuccessModal) replaceUrl(getCurrentUrlWithoutQuery('new'))
   }, [isOpenCreateSuccessModal])
 

src/stores/location.ts

@@ -1,7 +1,7 @@
 import { Router } from 'next/router'
 import { create } from './utils'
 
-let history: string[] = []
+let histories: string[] = []
 let startHistoryLength: number
 
 type State = {
@@ -24,22 +24,22 @@ export const useLocation = create<State>()((set, get) => ({
 
     Router.events.on('routeChangeComplete', () => {
       const prevUrl = get().currentUrl
-      const trackedHistoryLength = startHistoryLength + history.length
+      const trackedHistoryLength = startHistoryLength + histories.length
 
       const isPopped = trackedHistoryLength > window.history.length
       const isReplaced = trackedHistoryLength === window.history.length
       if (isPopped) {
-        history.pop()
+        histories.pop()
       } else if (isReplaced) {
-        if (history.length > 0) {
-          history.pop()
-          history.push(prevUrl)
+        if (histories.length > 0) {
+          histories.pop()
+          histories.push(prevUrl)
         }
       } else {
-        history.push(prevUrl)
+        histories.push(prevUrl)
       }
 
-      const lastHistory = history[history.length - 1]
+      const lastHistory = histories[histories.length - 1]
       set({
         currentUrl: window.location.href,
         prevUrl: lastHistory,

src/utils/links.ts

@@ -19,12 +19,12 @@ export function getCurrentUrlWithoutQuery(queryNameToRemove?: string) {
     const query = window.location.search
     const searchParams = new URLSearchParams(query)
     searchParams.delete(queryNameToRemove)
-    return (
-      window.location.origin +
-      window.location.pathname +
-      '?' +
-      searchParams.toString()
-    )
+
+    const url = window.location.origin + window.location.pathname
+    const search = searchParams.toString()
+
+    if (!search) return url
+    return url + '?' + search
   }
   return window.location.origin + window.location.pathname
 }

src/utils/window.ts

@@ -55,8 +55,9 @@ export function getIsInIos() {
 }
 
 export function replaceUrl(url: string) {
+  const pathname = url.replace(window.location.origin, '')
   window.history.replaceState(
-    { ...window.history.state, url, as: url },
+    { ...window.history.state, url: pathname, as: pathname },
     '',
     url
   )