Use readable names for data source chips

Author: wujessica

src/interfaces/coral_web/src/components/Conversation/Composer/EnabledDataSources.tsx

@@ -66,8 +66,8 @@ export const EnabledDataSources: React.FC<Props> = ({ isStreaming }) => {
       {enabledTools?.map((t, i) => (
         <DataSourceChip
           key={`tool-${i}`}
-          iconName={TOOL_ID_TO_DISPLAY_INFO[t.name ?? '']?.icon ?? TOOL_FALLBACK_ICON}
-          label={t.name ?? ''}
+          iconName={TOOL_ID_TO_DISPLAY_INFO[t.name]?.icon ?? TOOL_FALLBACK_ICON}
+          label={TOOL_ID_TO_DISPLAY_INFO[t.name]?.name ?? t.name}
           onDelete={handleDeleteTool(t.name ?? '')}
         />
       ))}