fix(ai): use LangServe message format (type instead of role)
All checks were successful
Build Docker Image / build (push) Successful in 4m3s

This commit is contained in:
Ruslan Bakiev
2026-01-07 16:16:45 +07:00
parent 41a3b3ba39
commit 4f57686364
6 changed files with 374 additions and 27 deletions

View File

@@ -0,0 +1,332 @@
<template>
<Stack gap="6">
<PageHeader :title="t('profileAddresses.form.title_edit')" />
<Card v-if="isLoadingAddress" padding="lg">
<Stack align="center" gap="3">
<Spinner />
<Text tone="muted">{{ t('profileAddresses.states.loading') }}</Text>
</Stack>
</Card>
<Stack v-else-if="addressData" gap="4">
<Input
v-model="addressData.name"
:label="t('profileAddresses.form.name.label')"
:placeholder="t('profileAddresses.form.name.placeholder')"
/>
<!-- Address search with Mapbox -->
<div class="form-control">
<label class="label">
<span class="label-text">{{ t('profileAddresses.form.address.label') }}</span>
</label>
<div ref="searchBoxContainer" class="w-full" />
<input
v-if="addressData.address"
type="hidden"
:value="addressData.address"
/>
</div>
<!-- Mapbox map for selecting coordinates -->
<div class="form-control">
<label class="label">
<span class="label-text">{{ t('profileAddresses.form.mapLabel') }}</span>
</label>
<div class="h-80 rounded-lg overflow-hidden border border-base-300">
<MapboxMap
ref="mapComponentRef"
:map-id="'address-picker-edit'"
style="width: 100%; height: 100%"
:options="{
style: 'mapbox://styles/mapbox/streets-v12',
center: [addressData.longitude || 37.6173, addressData.latitude || 55.7558],
zoom: 12
}"
@mb-click="onMapClick"
@mb-created="onMapCreated"
>
<MapboxDefaultMarker
v-if="addressData.latitude && addressData.longitude"
:marker-id="'selected-location'"
:lnglat="[addressData.longitude, addressData.latitude]"
color="#3b82f6"
/>
</MapboxMap>
</div>
<label class="label" v-if="addressData.latitude && addressData.longitude">
<span class="label-text-alt text-success">
{{ addressData.latitude.toFixed(6) }}, {{ addressData.longitude.toFixed(6) }}
</span>
</label>
</div>
<Stack direction="row" gap="3">
<Button @click="updateAddress" :disabled="isSaving || !addressData.latitude">
{{ isSaving ? t('profileAddresses.form.updating') : t('profileAddresses.form.update') }}
</Button>
<Button variant="outline" :as="NuxtLink" :to="localePath('/clientarea/addresses')">
{{ t('common.cancel') }}
</Button>
</Stack>
<!-- Delete button -->
<div class="pt-4 border-t border-base-300">
<Button variant="ghost" class="text-error" @click="handleDelete" :disabled="isDeleting">
<Icon name="lucide:trash-2" size="16" class="mr-2" />
{{ isDeleting ? t('profileAddresses.actions.deleting') : t('profileAddresses.actions.delete') }}
</Button>
</div>
</Stack>
<EmptyState
v-else
icon="lucide:alert-circle"
:title="t('profileAddresses.error.not_found')"
:action-label="t('profileAddresses.error.back_to_list')"
:action-to="localePath('/clientarea/addresses')"
/>
</Stack>
</template>
<script setup lang="ts">
import { NuxtLink } from '#components'
import type { MapMouseEvent, Map as MapboxMapType } from 'mapbox-gl'
definePageMeta({
middleware: ['auth-oidc']
})
const route = useRoute()
const { execute, mutate } = useGraphQL()
const { t } = useI18n()
const localePath = useLocalePath()
const config = useRuntimeConfig()
const uuid = computed(() => route.params.uuid as string)
const isLoadingAddress = ref(true)
const isSaving = ref(false)
const isDeleting = ref(false)
const searchBoxContainer = ref<HTMLElement | null>(null)
const mapInstance = ref<MapboxMapType | null>(null)
const searchBoxRef = ref<any>(null)
const addressData = ref<{
uuid: string
name: string
address: string
latitude: number | null
longitude: number | null
countryCode: string | null
} | null>(null)
// Load address data
const loadAddress = async () => {
isLoadingAddress.value = true
try {
const { GetTeamAddressesDocument } = await import('~/composables/graphql/team/teams-generated')
const data = await execute(GetTeamAddressesDocument, {}, 'team', 'teams')
const addresses = data?.teamAddresses || []
const found = addresses.find((a: any) => a.uuid === uuid.value)
if (found) {
addressData.value = {
uuid: found.uuid,
name: found.name || '',
address: found.address || '',
latitude: found.latitude,
longitude: found.longitude,
countryCode: found.countryCode
}
}
} catch (e) {
console.error('Failed to load address', e)
} finally {
isLoadingAddress.value = false
}
}
await loadAddress()
const onMapCreated = (map: MapboxMapType) => {
mapInstance.value = map
}
// Reverse geocode: get address by coordinates (local language)
const reverseGeocode = async (lat: number, lng: number): Promise<{ address: string | null; countryCode: string | null }> => {
try {
const token = config.public.mapboxAccessToken
const response = await fetch(
`https://api.mapbox.com/geocoding/v5/mapbox.places/${lng},${lat}.json?access_token=${token}`
)
const data = await response.json()
const feature = data.features?.[0]
if (!feature) return { address: null, countryCode: null }
// Extract country code from context
const countryContext = feature.context?.find((c: any) => c.id?.startsWith('country.'))
const countryCode = countryContext?.short_code?.toUpperCase() || null
return { address: feature.place_name, countryCode }
} catch {
return { address: null, countryCode: null }
}
}
const onMapClick = async (event: MapMouseEvent) => {
if (!addressData.value) return
const lat = event.lngLat.lat
const lng = event.lngLat.lng
addressData.value.latitude = lat
addressData.value.longitude = lng
// Reverse geocode: load address by coordinates
const result = await reverseGeocode(lat, lng)
if (result.address) {
addressData.value.address = result.address
addressData.value.countryCode = result.countryCode
// Update SearchBox input
if (searchBoxRef.value) {
searchBoxRef.value.value = result.address
}
}
}
// Initialize Mapbox SearchBox
onMounted(async () => {
if (!searchBoxContainer.value) return
const { MapboxSearchBox } = await import('@mapbox/search-js-web')
const searchBox = new MapboxSearchBox()
searchBox.accessToken = config.public.mapboxAccessToken as string
searchBox.options = {
// Without language: uses local country language
}
searchBox.placeholder = t('profileAddresses.form.address.placeholder')
// Pre-fill with existing address
if (addressData.value?.address) {
searchBox.value = addressData.value.address
}
searchBox.addEventListener('retrieve', (event: any) => {
if (!addressData.value) return
const feature = event.detail.features?.[0]
if (feature) {
const [lng, lat] = feature.geometry.coordinates
addressData.value.address = feature.properties.full_address || feature.properties.name
addressData.value.latitude = lat
addressData.value.longitude = lng
// Extract country code from context
const countryContext = feature.properties.context?.country
addressData.value.countryCode = countryContext?.country_code?.toUpperCase() || null
// Fly to selected location
if (mapInstance.value) {
mapInstance.value.flyTo({
center: [lng, lat],
zoom: 15
})
}
}
})
searchBoxRef.value = searchBox
searchBoxContainer.value.appendChild(searchBox as unknown as Node)
})
const updateAddress = async () => {
if (!addressData.value || !addressData.value.name || !addressData.value.address || !addressData.value.latitude) return
isSaving.value = true
try {
const { UpdateTeamAddressDocument } = await import('~/composables/graphql/team/teams-generated')
const result = await mutate(UpdateTeamAddressDocument, {
input: {
uuid: addressData.value.uuid,
name: addressData.value.name,
address: addressData.value.address,
latitude: addressData.value.latitude,
longitude: addressData.value.longitude,
countryCode: addressData.value.countryCode
}
}, 'team', 'teams')
if (result.updateTeamAddress?.success) {
navigateTo(localePath('/clientarea/addresses'))
} else {
console.error('Failed to update address:', result.updateTeamAddress?.message)
}
} catch (e) {
console.error('Failed to update address', e)
} finally {
isSaving.value = false
}
}
const handleDelete = async () => {
if (!addressData.value) return
if (!confirm(t('profileAddresses.actions.confirm_delete'))) return
isDeleting.value = true
try {
const { DeleteTeamAddressDocument } = await import('~/composables/graphql/team/teams-generated')
const result = await mutate(DeleteTeamAddressDocument, { uuid: addressData.value.uuid }, 'team', 'teams')
if (result.deleteTeamAddress?.success) {
navigateTo(localePath('/clientarea/addresses'))
} else {
console.error('Failed to delete address:', result.deleteTeamAddress?.message)
}
} catch (e) {
console.error('Failed to delete address', e)
} finally {
isDeleting.value = false
}
}
</script>
<style>
/* Mapbox SearchBox styling */
mapbox-search-box {
width: 100%;
}
mapbox-search-box::part(input) {
height: 3rem;
padding: 0.5rem 1rem;
font-size: 1rem;
border: 1px solid oklch(var(--bc) / 0.2);
border-radius: var(--rounded-btn, 0.5rem);
background-color: oklch(var(--b1));
color: oklch(var(--bc));
}
mapbox-search-box::part(input):focus {
outline: 2px solid oklch(var(--p));
outline-offset: 2px;
}
mapbox-search-box::part(results-list) {
background-color: oklch(var(--b1));
border: 1px solid oklch(var(--bc) / 0.2);
border-radius: var(--rounded-btn, 0.5rem);
margin-top: 0.25rem;
}
mapbox-search-box::part(result-item) {
padding: 0.75rem 1rem;
color: oklch(var(--bc));
}
mapbox-search-box::part(result-item):hover {
background-color: oklch(var(--b2));
}
</style>

View File

@@ -25,32 +25,17 @@
</NuxtLink>
<Grid :cols="1" :md="2" :gap="4">
<Card v-for="addr in items" :key="addr.uuid" padding="small" interactive>
<div class="flex flex-col gap-1">
<div class="flex items-center justify-between">
<NuxtLink v-for="addr in items" :key="addr.uuid" :to="localePath(`/clientarea/addresses/${addr.uuid}`)" class="block">
<Card padding="small" interactive>
<div class="flex flex-col gap-1">
<Text size="base" weight="semibold" class="truncate">{{ addr.name }}</Text>
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn btn-ghost btn-xs btn-circle">
<Icon name="lucide:more-vertical" size="16" />
</label>
<ul tabindex="0" class="dropdown-content z-10 menu p-2 shadow bg-base-100 rounded-box w-40">
<li>
<a class="text-error" @click="deleteAddress(addr.uuid)">
<Icon name="lucide:trash-2" size="16" />
{{ t('profileAddresses.actions.delete') }}
</a>
</li>
</ul>
<Text tone="muted" size="sm" class="line-clamp-2">{{ addr.address }}</Text>
<div class="flex items-center mt-1">
<span class="text-lg">{{ isoToEmoji(addr.countryCode) }}</span>
</div>
</div>
<Text tone="muted" size="sm" class="line-clamp-2">{{ addr.address }}</Text>
<div class="flex items-center justify-between mt-1">
<span class="text-lg">{{ isoToEmoji(addr.countryCode) }}</span>
</div>
</div>
</Card>
</Card>
</NuxtLink>
</Grid>
</template>
@@ -79,7 +64,6 @@ const {
items,
isLoading,
itemsWithCoords,
deleteAddress,
isoToEmoji,
init
} = useTeamAddresses()

View File

@@ -87,7 +87,7 @@ const handleSend = async () => {
const body = {
input: {
messages: chat.value.map((m) => ({
role: m.role === 'assistant' ? 'assistant' : 'user',
type: m.role === 'assistant' ? 'ai' : 'human',
content: m.content
}))
}

View File

@@ -0,0 +1,15 @@
mutation UpdateTeamAddress($input: UpdateTeamAddressInput!) {
updateTeamAddress(input: $input) {
success
message
address {
uuid
name
address
latitude
longitude
countryCode
isDefault
}
}
}

View File

@@ -6,10 +6,12 @@
"actions": {
"add": "Add address",
"confirm_delete": "Delete this address?",
"delete": "Delete"
"delete": "Delete",
"deleting": "Deleting..."
},
"form": {
"title": "New address",
"title_edit": "Edit address",
"name": {
"label": "Name",
"placeholder": "e.g. Office, Warehouse, Production"
@@ -28,6 +30,8 @@
},
"save": "Save",
"saving": "Saving...",
"update": "Update",
"updating": "Updating...",
"mapLabel": "Select a point on the map"
},
"states": {
@@ -41,6 +45,10 @@
"cta": "Add first address",
"title": "No addresses"
},
"error": {
"not_found": "Address not found",
"back_to_list": "Back to addresses"
},
"status": {}
}
}

View File

@@ -6,10 +6,12 @@
"actions": {
"add": "Добавить адрес",
"delete": "Удалить",
"deleting": "Удаление...",
"confirm_delete": "Удалить этот адрес?"
},
"form": {
"title": "Новый адрес",
"title_edit": "Редактирование адреса",
"mapLabel": "Выберите точку на карте",
"name": {
"label": "Название",
@@ -28,7 +30,9 @@
"placeholder": "37.6173"
},
"save": "Сохранить",
"saving": "Сохранение..."
"saving": "Сохранение...",
"update": "Обновить",
"updating": "Обновление..."
},
"states": {
"loading": "Загружаем адреса..."
@@ -41,6 +45,10 @@
"description": "У вас пока нет сохранённых адресов",
"cta": "Добавить первый адрес"
},
"error": {
"not_found": "Адрес не найден",
"back_to_list": "Назад к адресам"
},
"status": {}
}
}