fix(session-ui): refine external link glyph

packages/session-ui/src/components/basic-tool.css

@@ -367,7 +367,6 @@
 [data-component="tool-trigger"] [data-slot="basic-tool-tool-subtitle"].webfetch-link {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
   color: var(--v2-text-text-accent);
   text-decoration: none;
   overflow: visible;
@@ -393,18 +392,6 @@
     line-height: inherit;
   }
 
-  .webfetch-link-icon {
-    display: inline-flex;
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    color: var(--v2-icon-icon-accent, var(--v2-text-text-accent));
-
-    @media (hover: hover) {
-      display: none;
-    }
-  }
-
   &:hover {
     color: var(--v2-text-text-accent);
     text-decoration: none;
@@ -413,10 +400,6 @@
       text-decoration: underline;
       text-underline-offset: 2px;
     }
-
-    .webfetch-link-icon {
-      display: inline-flex;
-    }
   }
 
   &:focus-visible {
@@ -427,9 +410,5 @@
       text-decoration: underline;
       text-underline-offset: 2px;
     }
-
-    .webfetch-link-icon {
-      display: inline-flex;
-    }
   }
 }

packages/session-ui/src/components/external-link.css

@@ -0,0 +1,12 @@
+a[target="_blank"]::after {
+  content: "";
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-inline-start: 2px;
+  flex-shrink: 0;
+  vertical-align: -3px;
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 8.56V4H5.44M10 4L4 10' stroke='black'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 8.56V4H5.44M10 4L4 10' stroke='black'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
+}

packages/session-ui/src/styles/index.css

@@ -1,6 +1,7 @@
 @layer theme, base, components, utilities;
 
 @import "../components/basic-tool.css" layer(components);
+@import "../components/external-link.css" layer(components);
 @import "../components/file.css" layer(components);
 @import "../components/markdown.css" layer(components);
 @import "../components/message-part.css" layer(components);

packages/session-ui/src/tools/tool-renderer.tsx

@@ -465,7 +465,6 @@ function ExaOutput(props: { output?: string }) {
                 onClick={(event) => event.stopPropagation()}
               >
                 <span data-slot="webfetch-link-text">{url}</span>
-                <Icon name="outline-square-arrow" class="webfetch-link-icon" />
               </a>
             )}
           </For>
@@ -1268,7 +1267,6 @@ ToolRegistry.register({
                   onClick={(event) => event.stopPropagation()}
                 >
                   <span data-slot="webfetch-link-text">{url()}</span>
-                  <Icon name="outline-square-arrow" class="webfetch-link-icon" />
                 </a>
               </Show>
             </div>