Skip to content

Commit aed7bfc

Browse files
ademilterademilter
committedFeb 27, 2025
style
1 parent a9728ee commit aed7bfc

File tree

3 files changed

+52
-39
lines changed

3 files changed

+52
-39
lines changed
 

‎resources/css/app.css

+11-8
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,27 @@
22
@tailwind components;
33
@tailwind utilities;
44

5+
.markdown > * + *{
6+
@apply mt-4;
7+
}
8+
59
.markdown h1 {
6-
@apply text-2xl py-1.5;
10+
@apply text-xl font-semibold;
711
}
812

913
.markdown h2 {
10-
@apply text-xl py-1.5;
14+
@apply text-lg font-semibold;
1115
}
1216

1317
.markdown h3 {
14-
@apply text-lg py-1.5;
18+
@apply text-base font-semibold;
1519
}
1620

1721
.markdown h4 {
1822
@apply text-base;
1923
}
2024

21-
.markdown p {
22-
@apply text-sm py-1.5 leading-8;
25+
.markdown p {;
2326
}
2427

2528
.markdown ol li {
@@ -31,9 +34,9 @@
3134
}
3235

3336
.markdown code {
34-
@apply block bg-gray-200 dark:bg-slate-700 text-sm p-4 rounded-lg;
37+
@apply block bg-gray-200 dark:bg-slate-700 text-sm p-4 rounded-lg overflow-auto;
3538
}
3639

3740
.markdown p code, .markdown li code {
38-
@apply inline-block bg-gray-200 dark:bg-slate-700 text-sm px-2 py-0.5 rounded-lg;
39-
}
41+
@apply inline-flex bg-gray-200 dark:bg-slate-700 text-sm px-2 py-0.5 rounded-lg;
42+
}

‎resources/views/components/layouts/app.blade.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full bg-gray-50 dark:bg-slate-900 dark:text-white">
2+
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -13,7 +13,7 @@
1313
<!-- Styles / Scripts -->
1414
@vite(['resources/css/app.css', 'resources/js/app.js'])
1515
</head>
16-
<body class="h-full font-sans antialiased">
16+
<body class="bg-gray-50 dark:bg-slate-900 dark:text-white antialiased lg:overflow-hidden">
1717
{{ $slot }}
1818
</body>
1919
</html>

‎resources/views/livewire/chat-page.blade.php

+39-29
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,30 @@
1-
<div class="h-full flex flex-col">
2-
<div class="px-6 pt-6 flex justify-between items-center">
3-
<div class="flex items-center space-x-2">
1+
<main class="flex flex-col">
2+
3+
<!-- HEADER -->
4+
<header class="px-4 lg:px-6 h-[60px] flex justify-between items-center lg:items-end">
5+
<div class="flex items-center gap-1">
46
<span>Powered by</span>
5-
<x-icons.vector class="w-8 h-8" />
6-
<span>Upstash Vector</span>
7+
<x-icons.vector class="size-5" />
8+
<a href="https://upstash.com" target="_blank">Upstash Vector</span>
79
</div>
810
<div class="flex items-center space-x-2">
911
<a aria-label="GitHub" href="https://github.com/upstash/chat-with-laravel-docs/" target="_blank" class="opacity-50 hover:opacity-100 p-2">
10-
<x-icons.github class="w-6 h-6" />
12+
<x-icons.github class="size-6" />
1113
</a>
1214
</div>
13-
</div>
14-
<div class="flex flex-col lg:flex-row p-6 flex-1 h-full max-h-full gap-4">
15-
<section class="flex-1 flex flex-col border dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 shadow-lg dark:shadow-none h-full">
15+
</header>
16+
17+
<!-- MAIN -->
18+
<div class="lg:h-[calc(100vh-60px)] px-4 lg:p-6 grow grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6">
19+
20+
<!-- CHAT -->
21+
<section class="lg:h-full overflow-hidden grid grid-rows-[auto_1fr_auto] border dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 shadow-md dark:shadow-none">
1622
<div class="border-b dark:border-slate-700 p-6">
1723
<h1 class="font-semibold">Chat</h1>
1824
<p class="text-sm opacity-50">Ask a question to the Laravel 12.x documentation</p>
1925
</div>
20-
<div class="p-6 flex-1 overflow-scroll space-y-6">
26+
27+
<div class="p-6 space-y-6 overflow-y-scroll min-h-[200px] max-h-[400px] lg:min-h-full lg:max-h-auto">
2128
@foreach ($chat as $message)
2229
@if ($message['role'] === 'user')
2330
<div class="flex justify-end ml-4">
@@ -33,13 +40,13 @@
3340
<div class="rounded-lg bg-gray-100 dark:bg-slate-600 px-3 py-2 text-sm markdown">{!! $message['content'] !!}</div>
3441
@if (isset($message['sources']) && count($message['sources']) > 0)
3542
<div class="pt-4">
36-
<h3 class="pb-2 text-xs">Sources</h3>
43+
<h3 class="pb-2 text-xs">Sources</h3>
3744
<ul class="flex flex-col space-y-3">
3845
@foreach ($message['sources'] as $source)
3946
<li><a class="text-xs rounded-lg bg-gray-100 dark:bg-slate-600 px-2 py-2" href="{{ $source }}">{{ $source }}</a></li>
4047
@endforeach
4148
</ul>
42-
</div>
49+
</div>
4350
@endif
4451
</div>
4552
</div>
@@ -54,40 +61,43 @@
5461
</div>
5562
@endif
5663
</div>
64+
5765
<div class="p-6 border-t dark:border-slate-700">
58-
<form wire:submit="askQuestion">
59-
<input wire:loading.attr="disabled" autofocus wire:model="question" type="text" placeholder="Write a question here and we will try to figure how the best way to answer that." class="border bg-white dark:bg-slate-700 dark:border-slate-600 rounded-lg w-full py-2 px-3 focus:ring focus:ring-orange-500 focus:outline-none">
60-
<div class="flex justify-end pt-4">
61-
<button wire:loading.attr="disabled" class="border bg-gray-50 hover:bg-gray-100 dark:border-slate-600 dark:bg-slate-700 dark:hover:bg-slate-600 focus:ring focus:ring-orange-500 focus:outline-none rounded-lg px-4 py-1.5">Send Question</button>
62-
</div>
66+
<form wire:submit="askQuestion" class="flex items-center gap-4">
67+
<input wire:loading.attr="disabled" autofocus wire:model="question" type="text" placeholder="Write a question here and we will try to figure how the best way to answer that."
68+
class="border bg-white dark:bg-slate-700 dark:border-slate-600 rounded-lg w-full py-2 px-3 focus:ring focus:ring-orange-500 focus:outline-none">
69+
<button wire:loading.attr="disabled"
70+
class="py-2 px-3 border bg-gray-50 hover:bg-gray-100 dark:border-slate-600 dark:bg-slate-700 dark:hover:bg-slate-600 focus:ring focus:ring-orange-500 focus:outline-none rounded-lg">
71+
Send</button>
6372
</form>
6473
</div>
6574
</section>
66-
<section class="flex-1 flex flex-col border dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 shadow-lg h-full">
67-
<div class="border-b dark:border-slate-700 p-6 flex justify-between items-center">
68-
<div>
75+
76+
<!-- DEBUG -->
77+
<section class="lg:h-full overflow-hidden flex flex-col border dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 shadow-md">
78+
<div class="relative border-b dark:border-slate-700 p-6">
6979
<h1 class="font-semibold">Debug Context</h1>
7080
<p class="text-sm opacity-50">See what parts of the documentation were fetched from our vector database</p>
71-
</div>
72-
<div class="flex items-center">
73-
<input type="checkbox" wire:model="useReranker" class="rounded-lg border-gray-300 dark:border-slate-600 accent-orange-600">
74-
<label class="ml-2 text-sm dark:text-slate-400">Use Reranker</label>
75-
</div>
81+
<label class="absolute right-6 top-6 flex items-center gap-1 text-sm dark:text-slate-400">
82+
<input type="checkbox" wire:model="useReranker" class="border-gray-300 dark:border-slate-600 accent-orange-600">
83+
Use Reranker
84+
</label>
7685
</div>
77-
<div class="overflow-y-scroll flex-1 flex flex-col space-y-6 divide-y dark:divide-slate-700">
86+
87+
<div class="overflow-y-scroll grow flex flex-col divide-y dark:divide-slate-700">
7888
@foreach ($context as $item)
7989
<div class="p-6">
8090
<x-markdown class="markdown" :highlight-code="false">{!! $item['text'] !!}</x-markdown>
8191
<div class="pt-6">
82-
<h3 class="font-semibold pb-2 text-sm">Sources</h3>
92+
<h3 class="font-semibold pb-2 text-xs opacity-50 uppercase">Sources</h3>
8393
<ul>
8494
@foreach ($item['sources'] as $source)
85-
<li><a class="text-xs rounded-lg bg-gray-50 dark:bg-slate-600 px-2 py-1" href="{{ $source }}">{{ $source }}</a></li>
95+
<li><a class="rounded-lg dark:bg-slate-600 underline" href="{{ $source }}">{{ $source }}</a></li>
8696
@endforeach
8797
</div>
8898
</div>
8999
@endforeach
90100
</div>
91101
</section>
92102
</div>
93-
</div>
103+
</main>

0 commit comments

Comments
 (0)
Please sign in to comment.