Repository: All-Hands-AI/OpenHands
File: frontend/src/components/features/conversation/conversation-name.tsx (TypeScript)

Code before:
              <ConversationNameContextMenu
                onClose={() => setContextMenuOpen(false)}
                onRename={handleRename}
                onDelete={handleDelete}
                onStop={shouldShowStop ? handleStop : undefined}
                onDisplayCost={
                  shouldShowDisplayCost ? handleDisplayCost : undefined
                }
                onShowAgentTools={
                  shouldShowAgentTools ? handleShowAgentTools : undefined
                }
                onShowSkills={shouldShowSkills ? handleShowSkills : undefined}
                onExportConversation={
                  shouldShowExport ? handleExportConversation : undefined
                }
                onDownloadViaVSCode={
                  shouldShowDownload ? handleDownloadViaVSCode : undefined
                }
                onTogglePublic={
                  ENABLE_PUBLIC_CONVERSATION_SHARING()
                    ? handleTogglePublic
                    : undefined
                }
                shareUrl={
                  ENABLE_PUBLIC_CONVERSATION_SHARING()
                    ? getShareUrl()
                    : undefined
                }
                onDownloadConversation={
                  shouldShowDownloadConversation
                    ? handleDownloadConversation
                    : undefined
                }
                position="bottom"
              />
            )}
          </div>
        )}
      </div>

      {/* Metrics Modal */}
      <MetricsModal
        isOpen={metricsModalVisible}
        onOpenChange={setMetricsModalVisible}
      />

      {/* System Message Modal */}
      <SystemMessageModal
        isOpen={systemModalVisible}
        onClose={() => setSystemModalVisible(false)}
        systemMessage={systemMessage || null}

Review comment (performance):
**suggestion:** We should avoid calling getShareUrl() here and then passing its returned value as a prop, since it runs on every render. If this function is expensive, it might be a good idea to memoize it. Thank you! 🙏 

```ts
const shareUrl = useMemo(() => {
  if (!conversationId) {
    return "";
  }
  return `${window.location.origin}/shared/conversations/${conversationId}`;
}, [conversationId, onContextMenuToggle]);
```

```ts
<YouComponent shareUrl={shareUrl} />
```

Code after:

        {titleMode !== "edit" && (
          <div className="relative flex items-center">
            <EllipsisButton fill="#B1B9D3" onClick={handleEllipsisClick} />
            {contextMenuOpen && (
              <ConversationNameContextMenu
                onClose={() => setContextMenuOpen(false)}
                onRename={handleRename}
                onDelete={handleDelete}
                onStop={shouldShowStop ? handleStop : undefined}
                onDisplayCost={
                  shouldShowDisplayCost ? handleDisplayCost : undefined
                }
                onShowAgentTools={
                  shouldShowAgentTools ? handleShowAgentTools : undefined
                }
                onShowSkills={shouldShowSkills ? handleShowSkills : undefined}
                onExportConversation={
                  shouldShowExport ? handleExportConversation : undefined
                }
                onDownloadViaVSCode={
                  shouldShowDownload ? handleDownloadViaVSCode : undefined
                }
                onTogglePublic={
                  ENABLE_PUBLIC_CONVERSATION_SHARING()
                    ? handleTogglePublic
                    : undefined
                }
                shareUrl={
                  ENABLE_PUBLIC_CONVERSATION_SHARING() ? shareUrl : undefined
                }
                onCopyShareLink={
                  ENABLE_PUBLIC_CONVERSATION_SHARING()
                    ? handleCopyShareLink
                    : undefined
                }
                onDownloadConversation={
                  shouldShowDownloadConversation
                    ? handleDownloadConversation
                    : undefined
                }
                position="bottom"
              />
            )}
          </div>
        )}
      </div>

      {/* Metrics Modal */}
      <MetricsModal
        isOpen={metricsModalVisible}