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>

0 commit comments

Comments
 (0)