feat: Add support for text-to-image APIs. (#13380)

* feat: Add support for text-to-image APIs.

* feat: Add support for text-to-image APIs.

frontend/src/components/agent-provider-label/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <span class="agent-provider-label">
+        <ProviderLogo :provider="provider" :display-name="name" :size="size" />
+        <span class="agent-provider-label__name" :title="name">{{ name }}</span>
+    </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import ProviderLogo from '@/components/agent-provider-logo/index.vue';
+import { getAgentProviderDisplayName } from '@/utils/agent';
+
+const props = withDefaults(
+    defineProps<{
+        provider: string;
+        displayName?: string;
+        size?: number;
+    }>(),
+    {
+        displayName: '',
+        size: 16,
+    },
+);
+
+const name = computed(() => getAgentProviderDisplayName(props.provider, props.displayName));
+</script>
+
+<style scoped lang="scss">
+.agent-provider-label {
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    min-width: 0;
+    gap: 6px;
+    white-space: nowrap;
+}
+
+.agent-provider-label__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+</style>

frontend/src/components/api-type-tag/index.vue

@@ -0,0 +1,44 @@
+<template>
+    <el-tag
+        size="small"
+        effect="dark"
+        :type="tagType"
+        :class="{ 'api-type-tag--responses': apiType === 'openai-responses' }"
+    >
+        {{ apiType || '-' }}
+    </el-tag>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+type TagType = 'primary' | 'success' | 'warning' | 'info';
+
+const props = defineProps<{
+    apiType: string;
+}>();
+
+const tagType = computed<TagType>(() => {
+    if (props.apiType === 'openai-completions') {
+        return 'primary';
+    }
+    if (props.apiType === 'openai-responses') {
+        return 'info';
+    }
+    if (props.apiType === 'anthropic-messages') {
+        return 'warning';
+    }
+    if (props.apiType.endsWith('-images')) {
+        return 'success';
+    }
+    return 'info';
+});
+</script>
+
+<style scoped lang="scss">
+.api-type-tag--responses {
+    --el-tag-bg-color: #7c3aed;
+    --el-tag-border-color: #7c3aed;
+    --el-tag-text-color: #ffffff;
+}
+</style>