Skip to content

Commit 3640389

Browse files
MackinnonBuckSteveSandersonMS
MackinnonBuck
and
SteveSandersonMS
authored
Remove Tailwind and NPM dependency from chat template (#5846)
Co-authored-by: Steve Sanderson <[email protected]>
1 parent bab8a9b commit 3640389

31 files changed

+4533
-114
lines changed

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/.template.config/template.json

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,10 @@
228228
"sourceVariableName": "kestrelHttpPort",
229229
"fallbackVariableName": "kestrelHttpPortGenerated"
230230
},
231-
"replaces": "5000"
231+
"replaces": "5000",
232+
"onlyIf": [{
233+
"after": "localhost:"
234+
}]
232235
},
233236
"kestrelHttpsPort": {
234237
"type": "parameter",
@@ -250,7 +253,10 @@
250253
"sourceVariableName": "kestrelHttpsPort",
251254
"fallbackVariableName": "kestrelHttpsPortGenerated"
252255
},
253-
"replaces": "5001"
256+
"replaces": "5001",
257+
"onlyIf": [{
258+
"after": "localhost:"
259+
}]
254260
}
255261
}
256262
}

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/ChatWithCustomData.Web.csproj.in

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<Project Sdk="Microsoft.NET.Sdk.Web">
22

3-
<Import Project="Tailwind.targets" />
4-
53
<PropertyGroup>
64
<TargetFramework>net9.0</TargetFramework>
75
<Nullable>enable</Nullable>
@@ -38,11 +36,5 @@
3836
<ItemGroup>
3937
<Content Include="Data\**" CopyToOutputDirectory="PreserveNewest" />
4038
</ItemGroup>
41-
42-
<Target Name="BuildNpmDependencies" BeforeTargets="PrepareForBuild"
43-
Inputs="package-lock.json; rollup.config.js; wwwroot\lib.js" Outputs="wwwroot\lib.out.js">
44-
<Exec Command="npm install" />
45-
<Exec Command="npm run build" EnvironmentVariables="FORCE_COLOR=0" />
46-
</Target>
4739

4840
</Project>

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/App.razor

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55
<meta charset="utf-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<base href="/" />
8-
<link rel="stylesheet" href="@Assets["app.generated.css"]" />
8+
<link rel="stylesheet" href="@Assets["app.css"]" />
99
<link rel="stylesheet" href="@Assets["ChatWithCustomData.Web.styles.css"]" />
1010
<ImportMap />
1111
<HeadOutlet @rendermode="@renderMode" />
1212
</head>
1313

1414
<body>
1515
<Routes @rendermode="@renderMode" />
16-
<script src="lib.out.js"></script>
16+
<script src="lib.js" type="module"></script>
1717
<script src="_framework/blazor.web.js"></script>
1818
</body>
1919

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/Chat.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<NoMessagesContent>Ask me anything about ChatWithCustomData.Web.</NoMessagesContent>
1313
</ChatMessageList>
1414

15-
<div class="pt-3 pb-6 px-6 sticky bottom-0 border-t bg-gray-100">
15+
<div class="chat-container">
1616
<ChatSuggestions OnSelected="@AddUserMessageAsync" @ref="@chatSuggestions" />
1717
<ChatInput OnSend="@AddUserMessageAsync" @ref="@chatInput" />
1818
</div>

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/Chat.razor.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.chat-container {
2+
position: sticky;
3+
bottom: 0;
4+
padding-left: 1.5rem;
5+
padding-right: 1.5rem;
6+
padding-top: 0.75rem;
7+
padding-bottom: 1.5rem;
8+
border-top-width: 1px;
9+
background-color: #F3F4F6;
10+
border-color: #E5E7EB;
11+
}

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatCitation.razor

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
@using System.Web
2-
<a href="@viewerUrl" target="_blank" class="citation inline-flex bg-white px-3 py-2 rounded mt-4 mr-4 gap-2 text-sm min-w-48">
3-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
2+
<a href="@viewerUrl" target="_blank" class="citation">
3+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
44
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
55
</svg>
6-
<div class="flex flex-col">
7-
<div class="font-semibold">@File</div>
6+
<div class="citation-content">
7+
<div class="citation-file">@File</div>
88
<div>@Quote</div>
99
</div>
1010
</a>

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatCitation.razor.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,37 @@
11
.citation {
2+
display: inline-flex;
3+
padding-top: 0.5rem;
4+
padding-bottom: 0.5rem;
5+
padding-left: 0.75rem;
6+
padding-right: 0.75rem;
7+
margin-top: 1rem;
8+
margin-right: 1rem;
29
border-bottom: 2px solid #a770de;
10+
gap: 0.5rem;
11+
border-radius: 0.25rem;
12+
font-size: 0.875rem;
13+
line-height: 1.25rem;
14+
background-color: #ffffff;
315
}
416

517
.citation[href]:hover {
618
outline: 1px solid #865cb1;
719
}
820

21+
.citation svg {
22+
width: 1.5rem;
23+
height: 1.5rem;
24+
}
25+
926
.citation:active {
1027
background-color: rgba(0,0,0,0.05);
1128
}
29+
30+
.citation-content {
31+
display: flex;
32+
flex-direction: column;
33+
}
34+
35+
.citation-file {
36+
font-weight: 600;
37+
}

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatHeader.razor

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
<div class="p-6 main-background-gradient sticky top-0">
2-
<div class="mb-6 page-width">
1+
<div class="chat-header-container main-background-gradient">
2+
<div class="chat-header-controls page-width">
33
<button class="btn-default" @onclick="@OnNewChat">
4-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-gray-700">
4+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="new-chat-icon">
55
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
66
</svg>
7-
87
New chat
98
</button>
109
</div>

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatHeader.razor.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.chat-header-container {
2+
position: sticky;
3+
top: 0;
4+
padding: 1.5rem;
5+
}
6+
7+
.chat-header-controls {
8+
margin-bottom: 1.5rem;
9+
}
10+
11+
.new-chat-icon {
12+
width: 1.25rem;
13+
height: 1.25rem;
14+
color: rgb(55, 65, 81);
15+
}

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatInput.razor

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
@inject IJSRuntime JS
22

33
<EditForm Model="@this" OnValidSubmit="@SendMessageAsync">
4-
<label class="flex flex-col input-box page-width px-3 py-2 mt-3">
4+
<label class="input-box page-width">
55
<textarea @ref="@textArea" @bind="@messageText" placeholder="Type your message..." rows="1"></textarea>
66

7-
<div class="tools flex items-center mt-4">
7+
<div class="tools">
88
<button type="button" title="Attach media file" class="btn-default attach">
9-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
9+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tool-icon">
1010
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
1111
</svg>
1212
Add content
1313
</button>
1414

15-
<button type="submit" title="Send" class="send-button ml-auto">
16-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
15+
<button type="submit" title="Send" class="send-button">
16+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tool-icon">
1717
<path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
1818
</svg>
1919
</button>

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatInput.razor.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
.input-box {
2+
display: flex;
3+
flex-direction: column;
24
background: white;
35
border: 1px solid rgb(229, 231, 235);
46
border-radius: 8px;
7+
padding: 0.5rem 0.75rem;
8+
margin-top: 0.75rem;
59
}
610

711
.input-box:focus-within {
@@ -19,8 +23,20 @@ textarea {
1923
--send-button-color: #aaa;
2024
}
2125

26+
.tools {
27+
display: flex;
28+
margin-top: 1rem;
29+
align-items: center;
30+
}
31+
32+
.tool-icon {
33+
width: 1.25rem;
34+
height: 1.25rem;
35+
}
36+
2237
.send-button {
2338
color: var(--send-button-color);
39+
margin-left: auto;
2440
}
2541

2642
.send-button:hover {

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatMessageItem.razor

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
@if (Message.Role == ChatRole.User)
66
{
7-
<div class="user-message text-gray-800 px-5 py-2 rounded whitespace-pre-wrap">
7+
<div class="user-message">
88
@Message.Text
99
</div>
1010
}
@@ -14,16 +14,16 @@ else if (Message.Role == ChatRole.Assistant)
1414
{
1515
if (content is TextContent { Text: { Length: > 0 } text })
1616
{
17-
<div class="assistant-message grid grid-rows-2 gap-1">
17+
<div class="assistant-message">
1818
<div>
19-
<div class="text-white w-6 h-6 rounded-full flex items-center justify-center bg-[#9b72ce]">
20-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
19+
<div class="assistant-message-icon">
20+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
2121
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
2222
</svg>
2323
</div>
2424
</div>
25-
<div class="font-semibold">Assistant</div>
26-
<div class="col-start-2">
25+
<div class="assistant-message-header">Assistant</div>
26+
<div class="assistant-message-text">
2727
<assistant-message markdown="@text"></assistant-message>
2828

2929
@foreach (var citation in citations ?? [])
@@ -35,18 +35,18 @@ else if (Message.Role == ChatRole.Assistant)
3535
}
3636
else if (content is FunctionCallContent { Name: "Search" } fcc && fcc.Arguments?.TryGetValue("searchPhrase", out var searchPhrase) is true)
3737
{
38-
<div class="assistant-message grid grid-rows-2 gap-1 text-sm">
39-
<div class="w-6 h-6 flex items-center justify-center">
40-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
38+
<div class="assistant-search">
39+
<div class="assistant-search-icon">
40+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
4141
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
4242
</svg>
4343
</div>
44-
<div class="content-center">
44+
<div class="assistant-search-content">
4545
Searching:
46-
<span class="font-semibold">@searchPhrase</span>
46+
<span class="assistant-search-phrase">@searchPhrase</span>
4747
@if (fcc.Arguments?.TryGetValue("filenameFilter", out var filenameObj) is true && filenameObj is string filename && !string.IsNullOrEmpty(filename))
4848
{
49-
<text> in </text><span class="font-semibold">@filename</span>
49+
<text> in </text><span class="assistant-search-phrase">@filename</span>
5050
}
5151
</div>
5252
</div>

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatMessageItem.razor.css

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,67 @@
33
align-self: flex-end;
44
min-width: 25%;
55
max-width: calc(100% - 5rem);
6+
padding: 0.5rem 1.25rem;
7+
border-radius: 0.25rem;
8+
color: #1F2937;
9+
white-space: pre-wrap;
610
}
711

8-
.assistant-message {
12+
.assistant-message, .assistant-search {
13+
display: grid;
914
grid-template-rows: min-content;
1015
grid-template-columns: 2rem minmax(0, 1fr);
16+
gap: 0.25rem;
17+
}
18+
19+
.assistant-message-header {
20+
font-weight: 600;
21+
}
22+
23+
.assistant-message-text {
24+
grid-column-start: 2;
25+
}
26+
27+
.assistant-message-icon {
28+
display: flex;
29+
justify-content: center;
30+
align-items: center;
31+
border-radius: 9999px;
32+
width: 1.5rem;
33+
height: 1.5rem;
34+
color: #ffffff;
35+
background: #9b72ce;
36+
}
37+
38+
.assistant-message-icon svg {
39+
width: 1rem;
40+
height: 1rem;
41+
}
42+
43+
.assistant-search {
44+
font-size: 0.875rem;
45+
line-height: 1.25rem;
46+
}
47+
48+
.assistant-search-icon {
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
width: 1.5rem;
53+
height: 1.5rem;
54+
}
55+
56+
.assistant-search-icon svg {
57+
width: 1rem;
58+
height: 1rem;
59+
}
60+
61+
.assistant-search-content {
62+
align-content: center;
63+
}
64+
65+
.assistant-search-phrase {
66+
font-weight: 600;
1167
}
1268

1369
/* Default styling for markdown-formatted assistant messages */

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatMessageList.razor

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@inject IJSRuntime JS
22

3-
<div class="my-8 mx-6 grow">
4-
<chat-messages class="page-width flex flex-col gap-5" in-progress="@(InProgressMessage is not null)">
3+
<div class="message-list-container">
4+
<chat-messages class="page-width message-list" in-progress="@(InProgressMessage is not null)">
55
@foreach (var message in Messages)
66
{
77
<ChatMessageItem @key="@message" Message="@message" />

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatMessageList.razor.css

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
1-
.no-messages {
1+
.message-list-container {
2+
margin: 2rem 1.5rem;
3+
flex-grow: 1;
4+
}
5+
6+
.message-list {
7+
display: flex;
8+
flex-direction: column;
9+
gap: 1.25rem;
10+
}
11+
12+
.no-messages {
213
text-align: center;
314
font-size: 1.25rem;
415
color: #999;

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatSuggestions.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
@if (suggestions is not null)
44
{
5-
<div class="page-width suggestions mb-3 text-right flex flex-wrap justify-end gap-2 whitespace-nowrap">
5+
<div class="page-width suggestions">
66
@foreach (var suggestion in suggestions)
77
{
88
<button class="btn-subtle" @onclick="@(() => AddSuggestionAsync(suggestion))">

‎src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatSuggestions.razor.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.suggestions {
2+
text-align: right;
3+
white-space: nowrap;
4+
gap: 0.5rem;
5+
justify-content: flex-end;
6+
flex-wrap: wrap;
7+
display: flex;
8+
margin-bottom: 0.75rem;
9+
}

0 commit comments

Comments
 (0)