feat(sohbet): soru formu hazırlanırken shimmer; araçta avatar header logosuyla aynı rota koreografisi

- soru_sor aracı hap çizmediğinden sorular üretilirken gri iskelet yerine
  "Soruları hazırlıyorum…" shimmer satırı (role=status, aria-live=polite);
  form gelince kalkar.
- DanismanAvatar araçta "zincir" yerine site başlığındaki logoyla aynı "rota".
- TextShimmerLoader (prompt-kit) projede tanımsız `shimmer` keyframe'i ve
  muted/foreground token'ı kullanıyordu; sitenin shadcn `shimmer` utility'sine
  geçti (liste-uretici / tercih-degisti-modali ile aynı kaynak).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-10-07 23:14:34 +03:00
parent 17606902bd
commit f08a26a022
2 changed files with 32 additions and 15 deletions

View File

@@ -334,16 +334,13 @@ export function TextShimmerLoader({
lg: "text-base",
}
// prompt-kit'in özgün gradyanı `--muted-foreground/--foreground` token'ı ve
// projede tanımsız bir `shimmer` keyframe'i kullanıyordu (hareket etmiyordu).
// Sitenin tek parıltı kaynağı shadcn `shimmer` utility'sidir (currentColor
// üstünden; liste-uretici.tsx ve tercih-degisti-modali.tsx ile aynı), renk
// çağıranın `text-slate-*` sınıfından gelir, karanlık mod token'dan döner.
return (
<div
className={cn(
"bg-[linear-gradient(to_right,var(--muted-foreground)_40%,var(--foreground)_60%,var(--muted-foreground)_80%)]",
"bg-size-[200%_auto] bg-clip-text font-medium text-transparent",
"animate-[shimmer_4s_infinite_linear]",
textSizes[size],
className
)}
>
<div className={cn("shimmer font-medium", textSizes[size], className)}>
{text}
</div>
)

View File

@@ -54,7 +54,7 @@ import {
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { DotsLoader } from "@/components/ui/loader";
import { DotsLoader, TextShimmerLoader } from "@/components/ui/loader";
import { Skeleton } from "@/components/ui/skeleton";
import { olay } from "@/lib/analitik";
import type { ProfilAlani } from "@/lib/danisman-profil";
@@ -283,9 +283,10 @@ export function DanismanBaslik() {
/** Danışman mesajlarının avatarı — KolayTercih markası. `canli` iken (cevap
* beklenirken/yazılırken) panel başlığındaki DanışmanlaKonuş işareti gibi
* yerinde nabız atar: danışmanın "düşündüğü" avatardan okunur. `aracta` iken
* (danışman veriye bakıyor, "…bakıyorum" hapı dönüyor) kareler sırayla
* birbirinin yerine yürür; araç bitince nabza döner. Her geçişte ve cevap
* bitince kareler yumuşakça yerine oturur.
* (danışman veriye bakıyor, "…bakıyorum" hapı dönüyor) kareler site
* başlığındaki logoyla aynı "rota" koreografisini oynar (her kare sıradakinin
* yerine süzülür; site-header.tsx, animasyonlu-mark.tsx); araç bitince nabza
* döner. Her geçişte ve cevap bitince kareler yumuşakça yerine oturur.
* `renk="turuncu"`: panel başlığındaki DanışmanlaKonuş işaretinin rengi —
* yalnız "Danışman uyarısı" balonunda (durağan; hareket "düşünüyor" demek). */
export function DanismanAvatar({
@@ -304,7 +305,7 @@ export function DanismanAvatar({
>
<AnimasyonluMark
oynat={canli}
varyant={canli && aracta ? "zincir" : "nabiz"}
varyant={canli && aracta ? "rota" : "nabiz"}
renk={renk}
className="size-5"
/>
@@ -989,6 +990,16 @@ export function SohbetClient({
const piller = aracPilleri(m);
// Soru formu balonun altında (sohbet-anketi.tsx)
const anket = mesajinAnketi(m);
// soru_sor aracı hap çizmez (arac-pilleri.tsx HAPSIZ_ARACLAR);
// sorular üretilirken (parça henüz output-available değil)
// formun yerinde shimmer satırı durur, form gelince kalkar.
const soruHazirlaniyor = m.parts.some(
(p) =>
p.type === "tool-soru_sor" &&
"state" in p &&
p.state !== "output-available" &&
p.state !== "output-error",
);
return (
<Message
key={cevapAnahtari(gorunenMesajlar, i)}
@@ -1012,9 +1023,18 @@ export function SohbetClient({
>
{baglantilariIsaretle(metin)}
</MessageContent>
) : (
) : soruHazirlaniyor ? null : (
<CevapIskeleti />
)}
{soruHazirlaniyor ? (
<div role="status" aria-live="polite">
<TextShimmerLoader
text="Soruları hazırlıyorum…"
size="sm"
className="px-0.5 text-slate-600"
/>
</div>
) : null}
{anket ? (
<SohbetAnketi
anket={anket}