Update snapshots

take out toggle button when closing tab
Add copilot toggle button
2025-12-27 12:51:41 +00:00 · 2023-10-06 12:43:57 -05:00 · 2023-10-06 12:28:01 -05:00 · 2023-10-06 11:36:15 -05:00 · 2023-10-05 10:37:59 -04:00 · 2023-10-04 14:18:54 -07:00
22 changed files with 761 additions and 674 deletions
--- a/images/CopilotCommand.svg
+++ b/images/CopilotCommand.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3626 11.9771C13.1573 11.9837 13.019 12.0288 12.9215 12.0836C12.817 12.1424 12.7301 12.229 12.6508 12.3542C12.4802 12.6239 12.3837 12.9957 12.252 13.5033L12.2347 13.5699C12.1079 14.0581 11.9424 14.6764 11.5775 15.1594C11.1788 15.687 10.5903 16 9.74835 16H4.63681C3.55423 16 2.75741 15.2435 2.18373 14.3271C1.60629 13.4047 1.17786 12.2045 0.845481 11.0542L0.845003 11.0525C0.464365 9.73512 -0.017355 8.06787 0.000479698 6.72244C0.00951195 6.04103 0.145994 5.34953 0.569528 4.825C1.00712 4.28305 1.66518 4.02294 2.50365 4.02294H2.63739C2.84267 4.01631 2.98102 3.97123 3.07848 3.9164C3.18305 3.85757 3.26995 3.77102 3.34916 3.64584C3.51985 3.37613 3.61631 3.00432 3.74801 2.49671L3.76529 2.43012C3.89213 1.94191 4.05757 1.32365 4.42251 0.840633C4.82119 0.312966 5.40972 0 6.25165 0H11.3632C12.4458 0 13.2426 0.756543 13.8163 1.67295C14.3937 2.59534 14.8221 3.79546 15.1545 4.94582L15.155 4.94748C15.5356 6.26488 16.0174 7.93213 15.9995 9.27756C15.9905 9.95897 15.854 10.6505 15.4305 11.175C14.9929 11.717 14.3348 11.9771 13.4963 11.9771H13.3626ZM14.1354 5.28381C13.8114 4.16251 13.4194 3.09096 12.9303 2.3096C12.4374 1.52225 11.9215 1.14296 11.3632 1.14296H7.95613C8.10274 1.42082 8.22537 1.731 8.33548 2.05199C8.48008 2.47355 8.61427 2.94842 8.75233 3.43699L8.78302 3.54557C9.32758 5.47082 10.008 7.94794 10.4498 9.5646C10.6507 10.2998 11.2693 10.8098 11.9798 10.8333H13.4156C13.4253 10.8333 13.4351 10.8335 13.4447 10.8341H13.4963C14.1298 10.8341 14.4484 10.6443 14.6237 10.4272C14.813 10.1928 14.9255 9.8162 14.9328 9.26133C14.9477 8.13479 14.5323 6.65749 14.1354 5.28381ZM3.06972 13.6904C3.56261 14.4777 4.0785 14.857 4.63681 14.857H8.04387C7.89726 14.5792 7.77463 14.269 7.66452 13.948C7.51992 13.5265 7.38573 13.0516 7.24767 12.563L7.21698 12.4544C6.67242 10.5292 5.99197 8.05206 5.55019 6.4354C5.34929 5.70024 4.73069 5.19015 4.02018 5.16674H2.58445C2.57465 5.16674 2.56492 5.16646 2.55526 5.1659H2.50365C1.87025 5.1659 1.5516 5.35572 1.37634 5.57277C1.18703 5.80723 1.07454 6.1838 1.06719 6.73867C1.05225 7.86521 1.46769 9.34251 1.86459 10.7162C2.18857 11.8375 2.58057 12.909 3.06972 13.6904ZM9.10298 10.8333H9.87304C9.67506 10.5554 9.5217 10.236 9.42598 9.88575C9.233 9.17956 8.99466 8.30985 8.74215 7.39421L8.47331 6.42622C8.26579 5.67902 7.62465 5.16674 6.89702 5.16674H6.12695C6.32494 5.44463 6.4783 5.76395 6.57402 6.11425C6.767 6.82044 7.00534 7.69015 7.25785 8.60579L7.52669 9.57378C7.73421 10.321 8.37535 10.8333 9.10298 10.8333ZM6.89702 4.02378C7.23212 4.02378 7.55609 4.08968 7.85646 4.21152C7.82459 4.0984 7.7931 3.98682 7.76205 3.87706L7.73417 3.77844C7.59304 3.27914 7.46754 2.83514 7.33414 2.44626C7.19129 2.02979 7.05211 1.71602 6.90214 1.4942C6.77014 1.29897 6.56087 1.14296 6.25165 1.14296C5.69009 1.14296 5.42306 1.33297 5.2517 1.55976C5.04661 1.83121 4.92755 2.21889 4.79304 2.73662C4.78284 2.77588 4.77249 2.81622 4.76191 2.85744C4.66966 3.21703 4.55997 3.64464 4.37733 4.02378H6.89702ZM9.10298 11.9762C8.76788 11.9762 8.44391 11.9103 8.14354 11.7885C8.1754 11.9016 8.2069 12.0132 8.23795 12.1229L8.26583 12.2216C8.40696 12.7208 8.53246 13.1649 8.66585 13.5537C8.80871 13.9702 8.94789 14.284 9.09786 14.5058C9.22986 14.701 9.43913 14.857 9.74835 14.857C10.3099 14.857 10.5769 14.667 10.7483 14.4402C10.9534 14.1688 11.0725 13.7811 11.207 13.2634C11.2172 13.2241 11.2275 13.1838 11.2381 13.1426C11.3303 12.783 11.44 12.3554 11.6227 11.9762H9.10298Z" fill="#0078D4"/>
+</svg>
--- a/images/QueryCopilotNewLogo.svg
+++ b/images/QueryCopilotNewLogo.svg
@@ -1,34 +1,40 @@
-<svg width="32" height="34" viewBox="0 0 32 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 0.739258L16 1.04436V9.68622L11.2 10.8013L9.60002 12.9967V16.4479C9.60002 18.7669 10.8545 20.9045 12.879 22.0353L17.4036 24.5626L9.6 28.69L6.35592 29.1523L3.27902 27.4337C1.25445 26.3028 0 24.1652 0 21.8462V11.7591C0 9.43952 1.25512 7.30147 3.28055 6.17085L12.3174 1.12639L12.3121 1.13012L13 0.739258Z" fill="url(#paint0_radial_857_143948)"/>
-<path d="M13 0.739258L16 1.04436V9.68622L11.2 10.8013L9.60002 12.9967V16.4479C9.60002 18.7669 10.8545 20.9045 12.879 22.0353L17.4036 24.5626L9.6 28.69L6.35592 29.1523L3.27902 27.4337C1.25445 26.3028 0 24.1652 0 21.8462V11.7591C0 9.43952 1.25512 7.30147 3.28055 6.17085L12.3174 1.12639L12.3121 1.13012L13 0.739258Z" fill="url(#paint1_linear_857_143948)"/>
-<path d="M22.399 12.001L30.399 16.801L31.999 18.401V21.8452C31.999 24.1642 30.7446 26.3018 28.72 27.4327L19.12 32.7949C17.1804 33.8784 14.8177 33.8784 12.878 32.7949L3.27804 27.4327C3.09146 27.3284 2.91141 27.2157 2.73828 27.095L3.278 27.3965C5.21762 28.4799 7.58035 28.4799 9.51996 27.3965L19.12 22.0342C21.1445 20.9033 22.399 18.7657 22.399 16.4467V12.001Z" fill="url(#paint2_radial_857_143948)"/>
-<path d="M22.399 12.001L30.399 16.801L31.999 18.401V21.8452C31.999 24.1642 30.7446 26.3018 28.72 27.4327L19.12 32.7949C17.1804 33.8784 14.8177 33.8784 12.878 32.7949L3.27804 27.4327C3.09146 27.3284 2.91141 27.2157 2.73828 27.095L3.278 27.3965C5.21762 28.4799 7.58035 28.4799 9.51996 27.3965L19.12 22.0342C21.1445 20.9033 22.399 18.7657 22.399 16.4467V12.001Z" fill="url(#paint3_linear_857_143948)"/>
-<path d="M28.7191 6.17053L19.119 0.811705C17.1802 -0.270568 14.819 -0.270568 12.8802 0.811704L12.3151 1.1271C10.6239 2.31737 9.59961 4.26472 9.59961 6.36025V13.0461L12.8802 11.2149C14.819 10.1326 17.1802 10.1326 19.119 11.2149L28.7191 16.5737C30.6984 17.6786 31.9421 19.7456 31.9977 22.0039C31.999 21.9514 31.9996 21.8987 31.9996 21.8459V11.7588C31.9996 9.4392 30.7445 7.30115 28.7191 6.17053Z" fill="url(#paint4_radial_857_143948)"/>
-<path d="M28.7191 6.17053L19.119 0.811705C17.1802 -0.270568 14.819 -0.270568 12.8802 0.811704L12.3151 1.1271C10.6239 2.31737 9.59961 4.26472 9.59961 6.36025V13.0461L12.8802 11.2149C14.819 10.1326 17.1802 10.1326 19.119 11.2149L28.7191 16.5737C30.6984 17.6786 31.9421 19.7456 31.9977 22.0039C31.999 21.9514 31.9996 21.8987 31.9996 21.8459V11.7588C31.9996 9.4392 30.7445 7.30115 28.7191 6.17053Z" fill="url(#paint5_linear_857_143948)"/>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34px" height="34px" viewBox="0 0 34 34" version="1.1">
 <defs>
-<radialGradient id="paint0_radial_857_143948" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.5054 9.8837) rotate(112.544) scale(23.4519 19.3067)">
-<stop offset="0.206732" stop-color="#4995D0"/>
-<stop offset="0.875628" stop-color="#0078D4"/>
+<radialGradient id="radial0" gradientUnits="userSpaceOnUse" cx="0" cy="0" fx="0" fy="0" r="1" gradientTransform="matrix(-7.787324,-9.624098,9.028449,-7.305356,26.915817,14.703725)">
+<stop offset="0.0955758" style="stop-color:rgb(0%,47.058824%,83.137255%);stop-opacity:1;"/>
+<stop offset="0.715277" style="stop-color:rgb(4.705882%,43.921569%,60.784314%);stop-opacity:1;"/>
+<stop offset="1" style="stop-color:rgb(3.921569%,31.372549%,47.45098%);stop-opacity:1;"/>
 </radialGradient>
-<linearGradient id="paint1_linear_857_143948" x1="11.0625" y1="26.6174" x2="9.78695" y2="24.2436" gradientUnits="userSpaceOnUse">
-<stop offset="0.9999" stop-color="#0078D4"/>
-<stop offset="1" stop-color="#0078D4" stop-opacity="0"/>
+<radialGradient id="radial1" gradientUnits="userSpaceOnUse" cx="0" cy="0" fx="0" fy="0" r="1" gradientTransform="matrix(7.955722,8.152531,-8.011265,7.817866,7.897393,23.013892)">
+<stop offset="0" style="stop-color:rgb(0%,56.862745%,92.156863%);stop-opacity:1;"/>
+<stop offset="0.523516" style="stop-color:rgb(15.294118%,39.215686%,90.588235%);stop-opacity:1;"/>
+<stop offset="0.923392" style="stop-color:rgb(2.352941%,21.176471%,76.470588%);stop-opacity:1;"/>
+</radialGradient>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="5.16831" y1="2" x2="7.75605" y2="17.2359" gradientTransform="matrix(1.416667,0,0,1.416667,0,0)">
+<stop offset="0.289817" style="stop-color:rgb(0%,64.705882%,85.098039%);stop-opacity:1;"/>
+<stop offset="0.662336" style="stop-color:rgb(12.941176%,79.215686%,69.803922%);stop-opacity:1;"/>
+<stop offset="0.950002" style="stop-color:rgb(41.568627%,86.27451%,56.470588%);stop-opacity:1;"/>
 </linearGradient>
-<radialGradient id="paint2_radial_857_143948" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.899 24.5214) rotate(-3.9995) scale(24.6197 15.4594)">
-<stop offset="0.140029" stop-color="#80C8FF"/>
-<stop offset="0.952721" stop-color="#0078D4"/>
-</radialGradient>
-<linearGradient id="paint3_linear_857_143948" x1="26.8932" y1="15.5508" x2="25.5491" y2="17.8921" gradientUnits="userSpaceOnUse">
-<stop offset="0.9999" stop-color="#3F8AC3"/>
-<stop offset="1" stop-color="#8C66BA" stop-opacity="0"/>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="7.25046" y1="2" x2="7.87502" y2="16.4401" gradientTransform="matrix(1.416667,0,0,1.416667,0,0)">
+<stop offset="0" style="stop-color:rgb(6.27451%,78.823529%,92.54902%);stop-opacity:1;"/>
+<stop offset="0.166667" style="stop-color:rgb(0.392157%,68.235294%,89.411765%);stop-opacity:0;"/>
 </linearGradient>
-<radialGradient id="paint4_radial_857_143948" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(26.632 16.3878) rotate(-138.33) scale(22.8015 13.0047)">
-<stop stop-color="#7BC6FF"/>
-<stop offset="0.839255" stop-color="#0078D4"/>
+<radialGradient id="radial2" gradientUnits="userSpaceOnUse" cx="0" cy="0" fx="0" fy="0" r="1" gradientTransform="matrix(-9.930588,25.254205,-30.30117,-11.915182,29.269325,8.70791)">
+<stop offset="0.154405" style="stop-color:rgb(15.294118%,44.313725%,84.705882%);stop-opacity:1;"/>
+<stop offset="0.678875" style="stop-color:rgb(7.843137%,69.411765%,100%);stop-opacity:1;"/>
+<stop offset="0.931138" style="stop-color:rgb(8.627451%,74.901961%,87.45098%);stop-opacity:1;"/>
 </radialGradient>
-<linearGradient id="paint5_linear_857_143948" x1="9.59961" y1="8.71337" x2="12.2131" y2="8.71337" gradientUnits="userSpaceOnUse">
-<stop offset="0.9999" stop-color="#0078D4"/>
-<stop offset="1" stop-color="#436DCD" stop-opacity="0"/>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="21.2403" y1="7.01008" x2="20.306" y2="12.5802" gradientTransform="matrix(1.416667,0,0,1.416667,0,0)">
+<stop offset="0.0581535" style="stop-color:rgb(7.843137%,69.411765%,100%);stop-opacity:1;"/>
+<stop offset="0.708063" style="stop-color:rgb(16.078431%,46.27451%,85.882353%);stop-opacity:0;"/>
 </linearGradient>
 </defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial0);" d="M 24.1875 5.1875 C 23.777344 3.792969 22.496094 2.832031 21.039062 2.832031 L 20.078125 2.832031 C 18.496094 2.832031 17.140625 3.960938 16.855469 5.519531 L 15.175781 14.625 L 15.628906 13.066406 C 16.039062 11.664062 17.320312 10.703125 18.777344 10.703125 L 24.335938 10.703125 L 26.667969 11.613281 L 28.917969 10.703125 L 28.261719 10.703125 C 26.804688 10.703125 25.523438 9.746094 25.113281 8.347656 Z M 24.1875 5.1875 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial1);" d="M 10.152344 28.796875 C 10.558594 30.199219 11.839844 31.167969 13.300781 31.167969 L 15.359375 31.167969 C 17.128906 31.167969 18.578125 29.765625 18.636719 27.996094 L 18.941406 19.011719 L 18.371094 20.945312 C 17.960938 22.339844 16.679688 23.296875 15.226562 23.296875 L 9.613281 23.296875 L 7.613281 22.210938 L 5.449219 23.296875 L 6.09375 23.296875 C 7.554688 23.296875 8.839844 24.261719 9.246094 25.664062 Z M 10.152344 28.796875 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 20.898438 2.832031 L 9.535156 2.832031 C 6.289062 2.832031 4.339844 7.121094 3.042969 11.410156 C 1.503906 16.492188 -0.507812 23.289062 5.316406 23.289062 L 10.222656 23.289062 C 11.6875 23.289062 12.972656 22.320312 13.375 20.910156 C 14.230469 17.929688 15.722656 12.722656 16.898438 8.761719 C 17.496094 6.75 17.992188 5.019531 18.753906 3.941406 C 19.183594 3.339844 19.894531 2.832031 20.898438 2.832031 Z M 20.898438 2.832031 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 20.898438 2.832031 L 9.535156 2.832031 C 6.289062 2.832031 4.339844 7.121094 3.042969 11.410156 C 1.503906 16.492188 -0.507812 23.289062 5.316406 23.289062 L 10.222656 23.289062 C 11.6875 23.289062 12.972656 22.320312 13.375 20.910156 C 14.230469 17.929688 15.722656 12.722656 16.898438 8.761719 C 17.496094 6.75 17.992188 5.019531 18.753906 3.941406 C 19.183594 3.339844 19.894531 2.832031 20.898438 2.832031 Z M 20.898438 2.832031 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial2);" d="M 13.101562 31.167969 L 24.464844 31.167969 C 27.710938 31.167969 29.660156 26.878906 30.957031 22.589844 C 32.496094 17.507812 34.507812 10.710938 28.6875 10.710938 L 23.78125 10.710938 C 22.3125 10.710938 21.027344 11.679688 20.625 13.089844 C 19.769531 16.074219 18.277344 21.277344 17.101562 25.238281 C 16.503906 27.253906 16.007812 28.980469 15.246094 30.058594 C 14.816406 30.660156 14.105469 31.167969 13.101562 31.167969 Z M 13.101562 31.167969 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 13.101562 31.167969 L 24.464844 31.167969 C 27.710938 31.167969 29.660156 26.878906 30.957031 22.589844 C 32.496094 17.507812 34.507812 10.710938 28.6875 10.710938 L 23.78125 10.710938 C 22.3125 10.710938 21.027344 11.679688 20.625 13.089844 C 19.769531 16.074219 18.277344 21.277344 17.101562 25.238281 C 16.503906 27.253906 16.007812 28.980469 15.246094 30.058594 C 14.816406 30.660156 14.105469 31.167969 13.101562 31.167969 Z M 13.101562 31.167969 "/>
+</g>
 </svg>
--- a/images/X-errorMessage.svg
+++ b/images/X-errorMessage.svg
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 0C8.73438 0 9.44271 0.0963542 10.125 0.289062C10.8073 0.476562 11.4427 0.744792 12.0312 1.09375C12.625 1.44271 13.1641 1.86198 13.6484 2.35156C14.138 2.83594 14.5573 3.375 14.9062 3.96875C15.2552 4.55729 15.5234 5.19271 15.7109 5.875C15.9036 6.55729 16 7.26562 16 8C16 8.73438 15.9036 9.44271 15.7109 10.125C15.5234 10.8073 15.2552 11.4453 14.9062 12.0391C14.5573 12.6276 14.138 13.1667 13.6484 13.6562C13.1641 14.1406 12.625 14.5573 12.0312 14.9062C11.4427 15.2552 10.8073 15.526 10.125 15.7188C9.44271 15.9062 8.73438 16 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.526 4.55469 15.2552 3.96094 14.9062C3.3724 14.5573 2.83333 14.1406 2.34375 13.6562C1.85938 13.1667 1.44271 12.6276 1.09375 12.0391C0.744792 11.4453 0.473958 10.8073 0.28125 10.125C0.09375 9.44271 0 8.73438 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.473958 5.19271 0.744792 4.55729 1.09375 3.96875C1.44271 3.375 1.85938 2.83594 2.34375 2.35156C2.83333 1.86198 3.3724 1.44271 3.96094 1.09375C4.55469 0.744792 5.19271 0.476562 5.875 0.289062C6.55729 0.0963542 7.26562 0 8 0ZM8 15C8.64583 15 9.26562 14.9167 9.85938 14.75C10.4583 14.5833 11.0156 14.349 11.5312 14.0469C12.0521 13.7396 12.5234 13.375 12.9453 12.9531C13.3724 12.526 13.737 12.0547 14.0391 11.5391C14.3464 11.0182 14.5833 10.4609 14.75 9.86719C14.9167 9.26823 15 8.64583 15 8C15 7.35417 14.9167 6.73438 14.75 6.14062C14.5833 5.54167 14.3464 4.98438 14.0391 4.46875C13.737 3.94792 13.3724 3.47656 12.9453 3.05469C12.5234 2.6276 12.0521 2.26302 11.5312 1.96094C11.0156 1.65365 10.4583 1.41667 9.85938 1.25C9.26562 1.08333 8.64583 1 8 1C7.35417 1 6.73177 1.08333 6.13281 1.25C5.53906 1.41667 4.98177 1.65365 4.46094 1.96094C3.94531 2.26302 3.47396 2.6276 3.04688 3.05469C2.625 3.47656 2.26042 3.94792 1.95312 4.46875C1.65104 4.98438 1.41667 5.54167 1.25 6.14062C1.08333 6.73438 1 7.35417 1 8C1 8.64583 1.08333 9.26823 1.25 9.86719C1.41667 10.4609 1.65104 11.0182 1.95312 11.5391C2.26042 12.0547 2.625 12.526 3.04688 12.9531C3.47396 13.375 3.94531 13.7396 4.46094 14.0469C4.98177 14.349 5.53906 14.5833 6.13281 14.75C6.73177 14.9167 7.35417 15 8 15ZM11.4609 5.24219L8.71094 8L11.4609 10.7578L10.7578 11.4609L8 8.71094L5.24219 11.4609L4.53906 10.7578L7.28906 8L4.53906 5.24219L5.24219 4.53906L8 7.28906L10.7578 4.53906L11.4609 5.24219Z" fill="#E00B1C"/>
-</svg>
--- a/src/Common/CosmosClient.ts
+++ b/src/Common/CosmosClient.ts
@@ -7,6 +7,7 @@ import { getErrorMessage } from "./ErrorHandlingUtils";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { PriorityLevel } from "../Common/Constants";
 import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
+import { AuthType } from "../AuthType";

 const _global = typeof self === "undefined" ? window : self;

@@ -94,6 +95,18 @@ export function client(): Cosmos.CosmosClient {
  _defaultHeaders["x-ms-cosmos-sdk-supportedcapabilities"] =
    SDKSupportedCapabilities.None | SDKSupportedCapabilities.PartitionMerge;

+  if (
+    userContext.authType === AuthType.ConnectionString ||
+    userContext.authType === AuthType.EncryptedToken ||
+    userContext.authType === AuthType.ResourceToken
+  ) {
+    // Default to low priority. Needed for non-AAD-auth scenarios
+    // where we cannot use RP API, and thus, cannot detect whether priority
+    // based execution is enabled.
+    // The header will be ignored if priority based execution is disabled on the account.
+    _defaultHeaders["x-ms-cosmos-priority-level"] = PriorityLevel.Default;
+  }
+
  const options: Cosmos.CosmosClientOptions = {
    endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
    key: userContext.masterKey,
@@ -109,7 +122,7 @@ export function client(): Cosmos.CosmosClient {
    (options as any).plugins = [{ on: "request", plugin: requestPlugin }];
  }

-  if (userContext.databaseAccount?.properties?.enablePriorityBasedExecution && userContext.apiType === "SQL") {
+  if (PriorityBasedExecutionUtils.isFeatureEnabled()) {
    const plugins = (options as any).plugins || [];
    plugins.push({ on: "request", plugin: PriorityBasedExecutionUtils.requestPlugin });
    (options as any).plugins = plugins;
--- a/src/Common/ErrorHandlingUtils.ts
+++ b/src/Common/ErrorHandlingUtils.ts
@@ -51,6 +51,11 @@ const replaceKnownError = (errorMessage: string): string => {
    return "Database throughput is not supported for internal subscriptions.";
  } else if (errorMessage?.indexOf("Partition key paths must contain only valid") >= 0) {
    return "Partition key paths must contain only valid characters and not contain a trailing slash or wildcard character.";
+  } else if (
+    errorMessage?.indexOf("The user aborted a request") >= 0 ||
+    errorMessage?.indexOf("The operation was aborted") >= 0
+  ) {
+    return "User aborted query.";
  }

  return errorMessage;
--- a/src/Common/QueriesClient.ts
+++ b/src/Common/QueriesClient.ts
@@ -13,6 +13,7 @@ import { createDocument } from "./dataAccess/createDocument";
 import { deleteDocument } from "./dataAccess/deleteDocument";
 import { queryDocuments } from "./dataAccess/queryDocuments";
 import { handleError } from "./ErrorHandlingUtils";
+import { isServerlessAccount } from "Utils/CapabilityUtils";

 export class QueriesClient {
  private static readonly PartitionKey: DataModels.PartitionKey = {
@@ -32,25 +33,36 @@ export class QueriesClient {
    }

    const clearMessage = NotificationConsoleUtils.logConsoleProgress("Setting up account for saving queries");
-    return createCollection({
-      collectionId: SavedQueries.CollectionName,
-      createNewDatabase: true,
-      databaseId: SavedQueries.DatabaseName,
-      partitionKey: QueriesClient.PartitionKey,
-      offerThroughput: SavedQueries.OfferThroughput,
-      databaseLevelThroughput: false,
-    })
-      .then(
-        (collection: DataModels.Collection) => {
-          NotificationConsoleUtils.logConsoleInfo("Successfully set up account for saving queries");
-          return Promise.resolve(collection);
-        },
-        (error: any) => {
-          handleError(error, "setupQueriesCollection", "Failed to set up account for saving queries");
-          return Promise.reject(error);
-        },
-      )
-      .finally(() => clearMessage());
+
+    if (isServerlessAccount()) {
+      return createCollection({
+        collectionId: SavedQueries.CollectionName,
+        createNewDatabase: true,
+        databaseId: SavedQueries.DatabaseName,
+        partitionKey: QueriesClient.PartitionKey,
+        databaseLevelThroughput: false,
+      });
+    } else {
+      return createCollection({
+        collectionId: SavedQueries.CollectionName,
+        createNewDatabase: true,
+        databaseId: SavedQueries.DatabaseName,
+        partitionKey: QueriesClient.PartitionKey,
+        offerThroughput: SavedQueries.OfferThroughput,
+        databaseLevelThroughput: false,
+      })
+        .then(
+          (collection: DataModels.Collection) => {
+            NotificationConsoleUtils.logConsoleInfo("Successfully set up account for saving queries");
+            return Promise.resolve(collection);
+          },
+          (error: any) => {
+            handleError(error, "setupQueriesCollection", "Failed to set up account for saving queries");
+            return Promise.reject(error);
+          },
+        )
+        .finally(() => clearMessage());
+    }
  }

  public async saveQuery(query: DataModels.Query): Promise<void> {
--- a/src/Contracts/DataModels.ts
+++ b/src/Contracts/DataModels.ts
@@ -318,7 +318,7 @@ export interface CreateCollectionParams {
  collectionId: string;
  databaseId: string;
  databaseLevelThroughput: boolean;
-  offerThroughput: number;
+  offerThroughput?: number;
  analyticalStorageTtl?: number;
  autoPilotMaxThroughput?: number;
  indexingPolicy?: IndexingPolicy;
--- a/src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
+++ b/src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
@@ -113,6 +113,7 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
        },
        startKey,
      );
+      closeSidePanel();
    } catch (error) {
      const errorMessage = getErrorMessage(error);
      traceFailure(
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -9,6 +9,7 @@ import { logConsoleInfo } from "Utils/NotificationConsoleUtils";
 import { useSidePanel } from "hooks/useSidePanel";
 import React, { FunctionComponent, MouseEvent, useState } from "react";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
+import * as PriorityBasedExecutionUtils from "Utils/PriorityBasedExecutionUtils";

 export const SettingsPane: FunctionComponent = () => {
  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
@@ -51,8 +52,7 @@ export const SettingsPane: FunctionComponent = () => {
  const shouldShowGraphAutoVizOption = userContext.apiType === "Gremlin";
  const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin";
  const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
-  const shouldShowPriorityLevelOption =
-    userContext.databaseAccount?.properties?.enablePriorityBasedExecution && userContext.apiType === "SQL";
+  const shouldShowPriorityLevelOption = PriorityBasedExecutionUtils.isFeatureEnabled();
  const handlerOnSubmit = (e: MouseEvent<HTMLButtonElement>) => {
    setIsExecuting(true);

--- a/src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx
+++ b/src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx
@@ -52,7 +52,7 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
          </Stack>
          <Stack horizontalAlign="center">
            <Stack.Item align="center" style={{ textAlign: "center" }}>
-              <Text className="title bold">Welcome to Query Copilot for Azure Cosmos DB (Private Preview)</Text>
+              <Text className="title bold">Welcome to Copilot in Azure Cosmos DB (Private Preview)</Text>
            </Stack.Item>
            <Stack.Item align="center" className="text">
              <Stack horizontal>
@@ -61,7 +61,7 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
                </StackItem>
                <StackItem align="start">
                  <Text className="bold">
-                    Let Query Copilot do the work for you
+                    Let Copilot do the work for you
                    <br />
                  </Text>
                </StackItem>
--- a/src/Explorer/QueryCopilot/Modal/snapshots/WelcomeModal.test.tsx.snap
+++ b/src/Explorer/QueryCopilot/Modal/snapshots/WelcomeModal.test.tsx.snap
@@ -76,7 +76,7 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
          <Text
            className="title bold"
          >
-            Welcome to Query Copilot for Azure Cosmos DB (Private Preview)
+            Welcome to Copilot in Azure Cosmos DB (Private Preview)
          </Text>
        </StackItem>
        <StackItem
@@ -100,7 +100,7 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
              <Text
                className="bold"
              >
-                Let Query Copilot do the work for you
+                Let Copilot do the work for you
                <br />
              </Text>
            </StackItem>
--- a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
@@ -0,0 +1,564 @@
+/* eslint-disable no-console */
+import {
+  Callout,
+  CommandBarButton,
+  DefaultButton,
+  DirectionalHint,
+  IButtonStyles,
+  IconButton,
+  Image,
+  Link,
+  MessageBar,
+  MessageBarType,
+  Separator,
+  Spinner,
+  Stack,
+  TeachingBubble,
+  Text,
+  TextField,
+} from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
+import {
+  ContainerStatusType,
+  PoolIdType,
+  QueryCopilotSampleContainerSchema,
+  ShortenedQueryCopilotSampleContainerSchema,
+} from "Common/Constants";
+import { handleError } from "Common/ErrorHandlingUtils";
+import { createUri } from "Common/UrlUtility";
+import { WelcomeModal } from "Explorer/QueryCopilot/Modal/WelcomeModal";
+import { CopyPopup } from "Explorer/QueryCopilot/Popup/CopyPopup";
+import { DeletePopup } from "Explorer/QueryCopilot/Popup/DeletePopup";
+import { SubmitFeedback } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
+import { GenerateSQLQueryResponse, QueryCopilotProps } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces";
+import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/Shared/SamplePrompts/SamplePrompts";
+import { userContext } from "UserContext";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
+import React, { useRef, useState } from "react";
+import HintIcon from "../../../images/Hint.svg";
+import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
+import RecentIcon from "../../../images/Recent.svg";
+import errorIcon from "../../../images/close-black.svg";
+import { useTabs } from "../../hooks/useTabs";
+
+type QueryCopilotPromptProps = QueryCopilotProps & {
+  toggleCopilot: (toggle: boolean) => void;
+};
+
+interface SuggestedPrompt {
+  id: number;
+  text: string;
+}
+
+const promptStyles: IButtonStyles = {
+  root: { border: 0, selectors: { ":hover": { outline: "1px dashed #605e5c" } } },
+  label: { fontWeight: 400, textAlign: "left", paddingLeft: 8 },
+};
+
+export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
+  explorer,
+  toggleCopilot,
+}: QueryCopilotPromptProps): JSX.Element => {
+  const [copilotTeachingBubbleVisible, { toggle: toggleCopilotTeachingBubbleVisible }] = useBoolean(false);
+  const inputEdited = useRef(false);
+  const {
+    hideFeedbackModalForLikedQueries,
+    userPrompt,
+    setUserPrompt,
+    generatedQuery,
+    setGeneratedQuery,
+    query,
+    setQuery,
+    isGeneratingQuery,
+    setIsGeneratingQuery,
+    likeQuery,
+    setLikeQuery,
+    dislikeQuery,
+    setDislikeQuery,
+    showCallout,
+    setShowCallout,
+    isSamplePromptsOpen,
+    setIsSamplePromptsOpen,
+    showSamplePrompts,
+    setShowSamplePrompts,
+    showDeletePopup,
+    setShowDeletePopup,
+    showFeedbackBar,
+    setShowFeedbackBar,
+    showCopyPopup,
+    setshowCopyPopup,
+    showErrorMessageBar,
+    showInvalidQueryMessageBar,
+    setShowInvalidQueryMessageBar,
+    setShowErrorMessageBar,
+    setGeneratedQueryComments,
+    setQueryResults,
+    setErrorMessage,
+  } = useQueryCopilot();
+
+  const sampleProps: SamplePromptsProps = {
+    isSamplePromptsOpen: isSamplePromptsOpen,
+    setIsSamplePromptsOpen: setIsSamplePromptsOpen,
+    setTextBox: setUserPrompt,
+  };
+
+  const copyGeneratedCode = () => {
+    if (!query) {
+      return;
+    }
+    const queryElement = document.createElement("textarea");
+    queryElement.value = query;
+    document.body.appendChild(queryElement);
+    queryElement.select();
+    document.execCommand("copy");
+    document.body.removeChild(queryElement);
+
+    setshowCopyPopup(true);
+    setTimeout(() => {
+      setshowCopyPopup(false);
+    }, 6000);
+  };
+
+  const cachedHistoriesString = localStorage.getItem(`${userContext.databaseAccount?.id}-queryCopilotHistories`);
+  const cachedHistories = cachedHistoriesString?.split("|");
+  const [histories, setHistories] = useState<string[]>(cachedHistories || []);
+  const suggestedPrompts: SuggestedPrompt[] = [
+    { id: 1, text: 'Show all products that have the word "ultra" in the name or description' },
+    { id: 2, text: "What are all of the possible categories for the products, and their counts?" },
+    { id: 3, text: 'Show me all products that have been reviewed by someone with a username that contains "bob"' },
+  ];
+  const [filteredHistories, setFilteredHistories] = useState<string[]>(histories);
+  const [filteredSuggestedPrompts, setFilteredSuggestedPrompts] = useState<SuggestedPrompt[]>(suggestedPrompts);
+
+  const handleUserPromptChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    inputEdited.current = true;
+    const { value } = event.target;
+    setUserPrompt(value);
+
+    // Filter history prompts
+    const filteredHistory = histories.filter((history) => history.toLowerCase().includes(value.toLowerCase()));
+    setFilteredHistories(filteredHistory);
+
+    // Filter suggested prompts
+    const filteredSuggested = suggestedPrompts.filter((prompt) =>
+      prompt.text.toLowerCase().includes(value.toLowerCase())
+    );
+    setFilteredSuggestedPrompts(filteredSuggested);
+  };
+
+  const updateHistories = (): void => {
+    const formattedUserPrompt = userPrompt.replace(/\s+/g, " ").trim();
+    const existingHistories = histories.map((history) => history.replace(/\s+/g, " ").trim());
+
+    const updatedHistories = existingHistories.filter(
+      (history) => history.toLowerCase() !== formattedUserPrompt.toLowerCase()
+    );
+    const newHistories = [formattedUserPrompt, ...updatedHistories.slice(0, 2)];
+
+    setHistories(newHistories);
+    localStorage.setItem(`${userContext.databaseAccount.id}-queryCopilotHistories`, newHistories.join("|"));
+  };
+
+  const resetMessageStates = (): void => {
+    setShowErrorMessageBar(false);
+    setShowInvalidQueryMessageBar(false);
+    setShowFeedbackBar(false);
+  };
+
+  const resetQueryResults = (): void => {
+    setQueryResults(null);
+    setErrorMessage("");
+  };
+
+  const generateSQLQuery = async (): Promise<void> => {
+    try {
+      resetMessageStates();
+      setIsGeneratingQuery(true);
+      setShowDeletePopup(false);
+      useTabs.getState().setIsTabExecuting(true);
+      useTabs.getState().setIsQueryErrorThrown(false);
+      if (
+        useQueryCopilot.getState().containerStatus.status !== ContainerStatusType.Active &&
+        !userContext.features.disableCopilotPhoenixGateaway
+      ) {
+        await explorer.allocateContainer(PoolIdType.QueryCopilot);
+      }
+      const payload = {
+        containerSchema: userContext.features.enableCopilotFullSchema
+          ? QueryCopilotSampleContainerSchema
+          : ShortenedQueryCopilotSampleContainerSchema,
+        userPrompt: userPrompt,
+      };
+      useQueryCopilot.getState().refreshCorrelationId();
+      const serverInfo = useQueryCopilot.getState().notebookServerInfo;
+      const queryUri = userContext.features.disableCopilotPhoenixGateaway
+        ? createUri("https://copilotorchestrater.azurewebsites.net/", "generateSQLQuery")
+        : createUri(serverInfo.notebookServerEndpoint, "generateSQLQuery");
+      const response = await fetch(queryUri, {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+          "x-ms-correlationid": useQueryCopilot.getState().correlationId,
+        },
+        body: JSON.stringify(payload),
+      });
+
+      const generateSQLQueryResponse: GenerateSQLQueryResponse = await response?.json();
+      if (response.ok) {
+        if (generateSQLQueryResponse?.sql !== "N/A") {
+          let query = `-- **Prompt:** ${userPrompt}\r\n`;
+          if (generateSQLQueryResponse.explanation) {
+            query += `-- **Explanation of query:** ${generateSQLQueryResponse.explanation}\r\n`;
+          }
+          query += generateSQLQueryResponse.sql;
+          setQuery(query);
+          setGeneratedQuery(generateSQLQueryResponse.sql);
+          setGeneratedQueryComments(generateSQLQueryResponse.explanation);
+          setShowFeedbackBar(true);
+          resetQueryResults();
+        } else {
+          setShowInvalidQueryMessageBar(true);
+        }
+      } else {
+        handleError(JSON.stringify(generateSQLQueryResponse), "copilotInternalServerError");
+        useTabs.getState().setIsQueryErrorThrown(true);
+        setShowErrorMessageBar(true);
+      }
+    } catch (error) {
+      handleError(error, "executeNaturalLanguageQuery");
+      useTabs.getState().setIsQueryErrorThrown(true);
+      setShowErrorMessageBar(true);
+      throw error;
+    } finally {
+      setIsGeneratingQuery(false);
+      useTabs.getState().setIsTabExecuting(false);
+    }
+  };
+
+  const showTeachingBubble = (): void => {
+    if (!inputEdited.current) {
+      setTimeout(() => {
+        if (!inputEdited.current) {
+          toggleCopilotTeachingBubbleVisible();
+          inputEdited.current = true;
+        }
+      }, 30000);
+    }
+  };
+
+  const clearFeedback = () => {
+    resetButtonState();
+    resetQueryResults();
+  };
+
+  const resetButtonState = () => {
+    setDislikeQuery(false);
+    setLikeQuery(false);
+    setShowCallout(false);
+  };
+
+  const startGenerateQueryProcess = () => {
+    updateHistories();
+    generateSQLQuery();
+    resetButtonState();
+  };
+
+  React.useEffect(() => {
+    showTeachingBubble();
+    useTabs.getState().setIsQueryErrorThrown(false);
+  }, []);
+
+  return (
+    <Stack className="copilot-prompt-pane" styles={{ root: { backgroundColor: "#FAFAFA", padding: "16px 24px 0px" } }}>
+      <Stack horizontal>
+        <Image src={CopilotIcon} style={{ width: 24, height: 24 }} />
+        <Text style={{ marginLeft: 8, fontWeight: 600, fontSize: 16 }}>Copilot</Text>
+        <IconButton
+          iconProps={{ imageProps: { src: errorIcon } }}
+          onClick={() => {
+            toggleCopilot(false);
+            clearFeedback();
+            resetMessageStates();
+          }}
+          styles={{
+            root: {
+              marginLeft: "auto !important",
+            },
+          }}
+          ariaLabel="Close"
+        />
+      </Stack>
+      <Stack horizontal verticalAlign="center">
+        <TextField
+          id="naturalLanguageInput"
+          value={userPrompt}
+          onChange={handleUserPromptChange}
+          onClick={() => {
+            inputEdited.current = true;
+            setShowSamplePrompts(true);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              inputEdited.current = true;
+              startGenerateQueryProcess();
+            }
+          }}
+          style={{ lineHeight: 30 }}
+          styles={{ root: { width: "95%" }, fieldGroup: { borderRadius: 6 } }}
+          disabled={isGeneratingQuery}
+          autoComplete="off"
+        />
+        {copilotTeachingBubbleVisible && (
+          <TeachingBubble
+            calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
+            target="#naturalLanguageInput"
+            hasCloseButton={true}
+            closeButtonAriaLabel="Close"
+            onDismiss={toggleCopilotTeachingBubbleVisible}
+            hasSmallHeadline={true}
+            headline="Write a prompt"
+          >
+            Write a prompt here and Copilot will generate the query for you. You can also choose from our{" "}
+            <Link
+              onClick={() => {
+                setShowSamplePrompts(true);
+                toggleCopilotTeachingBubbleVisible();
+              }}
+              style={{ color: "white", fontWeight: 600 }}
+            >
+              sample prompts
+            </Link>{" "}
+            or write your own query
+          </TeachingBubble>
+        )}
+        <IconButton
+          iconProps={{ iconName: "Send" }}
+          disabled={isGeneratingQuery || !userPrompt.trim()}
+          style={{ marginLeft: 8 }}
+          onClick={() => startGenerateQueryProcess()}
+        />
+        {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
+        {showSamplePrompts && (
+          <Callout
+            styles={{ root: { minWidth: 400 } }}
+            target="#naturalLanguageInput"
+            isBeakVisible={false}
+            onDismiss={() => setShowSamplePrompts(false)}
+            directionalHintFixed={true}
+            directionalHint={DirectionalHint.bottomLeftEdge}
+            alignTargetEdge={true}
+            gapSpace={4}
+          >
+            <Stack>
+              {filteredHistories?.length > 0 && (
+                <Stack>
+                  <Text
+                    style={{
+                      width: "100%",
+                      fontSize: 14,
+                      fontWeight: 600,
+                      color: "#0078D4",
+                      marginLeft: 16,
+                      padding: "4px 0",
+                    }}
+                  >
+                    Recent
+                  </Text>
+                  {filteredHistories.map((history, i) => (
+                    <DefaultButton
+                      key={i}
+                      onClick={() => {
+                        setUserPrompt(history);
+                        setShowSamplePrompts(false);
+                        inputEdited.current = true;
+                      }}
+                      onRenderIcon={() => <Image src={RecentIcon} />}
+                      styles={promptStyles}
+                    >
+                      {history}
+                    </DefaultButton>
+                  ))}
+                </Stack>
+              )}
+              {filteredSuggestedPrompts?.length > 0 && (
+                <Stack>
+                  <Text
+                    style={{
+                      width: "100%",
+                      fontSize: 14,
+                      fontWeight: 600,
+                      color: "#0078D4",
+                      marginLeft: 16,
+                      padding: "4px 0",
+                    }}
+                  >
+                    Suggested Prompts
+                  </Text>
+                  {filteredSuggestedPrompts.map((prompt) => (
+                    <DefaultButton
+                      key={prompt.id}
+                      onClick={() => {
+                        setUserPrompt(prompt.text);
+                        setShowSamplePrompts(false);
+                        inputEdited.current = true;
+                      }}
+                      onRenderIcon={() => <Image src={HintIcon} />}
+                      styles={promptStyles}
+                    >
+                      {prompt.text}
+                    </DefaultButton>
+                  ))}
+                </Stack>
+              )}
+              {(filteredHistories?.length > 0 || filteredSuggestedPrompts?.length > 0) && (
+                <Stack>
+                  <Separator
+                    styles={{
+                      root: {
+                        selectors: { "::before": { background: "#E1DFDD" } },
+                        padding: 0,
+                      },
+                    }}
+                  />
+                  <Text
+                    style={{
+                      width: "100%",
+                      fontSize: 14,
+                      marginLeft: 16,
+                      padding: "4px 0",
+                    }}
+                  >
+                    Learn about{" "}
+                    <Link target="_blank" href="https://aka.ms/cdb-copilot-writing">
+                      writing effective prompts
+                    </Link>
+                  </Text>
+                </Stack>
+              )}
+            </Stack>
+          </Callout>
+        )}
+      </Stack>
+
+      <Stack style={{ margin: "8px 0" }}>
+        <Text style={{ fontSize: 12 }}>
+          AI-generated content can have mistakes. Make sure it&apos;s accurate and appropriate before using it.{" "}
+          <Link href="https://aka.ms/cdb-copilot-preview-terms" target="_blank">
+            Read preview terms
+          </Link>
+          {showErrorMessageBar && (
+            <MessageBar messageBarType={MessageBarType.error}>
+              We ran into an error and were not able to execute query.
+            </MessageBar>
+          )}
+          {showInvalidQueryMessageBar && (
+            <MessageBar
+              messageBarType={MessageBarType.info}
+              styles={{ root: { backgroundColor: "#F0F6FF" }, icon: { color: "#015CDA" } }}
+            >
+              We were unable to generate a query based upon the prompt provided. Please modify the prompt and try again.
+              For examples of how to write a good prompt, please read
+              <Link href="https://aka.ms/cdb-copilot-writing" target="_blank">
+                this article.
+              </Link>{" "}
+              Our content guidelines can be found
+              <Link href="https://aka.ms/cdb-query-copilot" target="_blank">
+                here.
+              </Link>
+            </MessageBar>
+          )}
+        </Text>
+      </Stack>
+
+      {showFeedbackBar && (
+        <Stack style={{ backgroundColor: "#FFF8F0", padding: "2px 8px" }} horizontal verticalAlign="center">
+          <Text style={{ fontWeight: 600, fontSize: 12 }}>Provide feedback on the query generated</Text>
+          {showCallout && !hideFeedbackModalForLikedQueries && (
+            <Callout
+              style={{ padding: 8 }}
+              target="#likeBtn"
+              onDismiss={() => {
+                setShowCallout(false);
+                SubmitFeedback({
+                  params: {
+                    generatedQuery: generatedQuery,
+                    likeQuery: likeQuery,
+                    description: "",
+                    userPrompt: userPrompt,
+                  },
+                  explorer: explorer,
+                });
+              }}
+              directionalHint={DirectionalHint.topCenter}
+            >
+              <Text>
+                Thank you. Need to give{" "}
+                <Link
+                  onClick={() => {
+                    setShowCallout(false);
+                    useQueryCopilot.getState().openFeedbackModal(generatedQuery, true, userPrompt);
+                  }}
+                >
+                  more feedback?
+                </Link>
+              </Text>
+            </Callout>
+          )}
+          <IconButton
+            id="likeBtn"
+            style={{ marginLeft: 20 }}
+            iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
+            onClick={() => {
+              setShowCallout(!likeQuery);
+              setLikeQuery(!likeQuery);
+              if (dislikeQuery) {
+                setDislikeQuery(!dislikeQuery);
+              }
+            }}
+          />
+          <IconButton
+            style={{ margin: "0 10px" }}
+            iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
+            onClick={() => {
+              if (!dislikeQuery) {
+                useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userPrompt);
+                setLikeQuery(false);
+              }
+              setDislikeQuery(!dislikeQuery);
+              setShowCallout(false);
+            }}
+          />
+          <Separator vertical style={{ color: "#EDEBE9" }} />
+          <CommandBarButton
+            onClick={copyGeneratedCode}
+            iconProps={{ iconName: "Copy" }}
+            style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
+          >
+            Copy code
+          </CommandBarButton>
+          <CommandBarButton
+            onClick={() => {
+              setShowDeletePopup(true);
+            }}
+            iconProps={{ iconName: "Delete" }}
+            style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
+          >
+            Delete code
+          </CommandBarButton>
+        </Stack>
+      )}
+      <WelcomeModal visible={localStorage.getItem("hideWelcomeModal") !== "true"} />
+      {isSamplePromptsOpen && <SamplePrompts sampleProps={sampleProps} />}
+      {query !== "" && query.trim().length !== 0 && (
+        <DeletePopup
+          showDeletePopup={showDeletePopup}
+          setShowDeletePopup={setShowDeletePopup}
+          setQuery={setQuery}
+          clearFeedback={clearFeedback}
+          showFeedbackBar={setShowFeedbackBar}
+        />
+      )}
+      <CopyPopup showCopyPopup={showCopyPopup} setShowCopyPopup={setshowCopyPopup} />
+    </Stack>
+  );
+};
--- a/src/Explorer/QueryCopilot/QueryCopilotTab.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotTab.tsx
@@ -1,223 +1,28 @@
 /* eslint-disable no-console */
-import {
-  Callout,
-  CommandBarButton,
-  DefaultButton,
-  DirectionalHint,
-  IButtonStyles,
-  IconButton,
-  Image,
-  Link,
-  Separator,
-  Spinner,
-  Stack,
-  TeachingBubble,
-  Text,
-  TextField,
-} from "@fluentui/react";
-import { useBoolean } from "@fluentui/react-hooks";
-import {
-  ContainerStatusType,
-  PoolIdType,
-  QueryCopilotSampleContainerSchema,
-  ShortenedQueryCopilotSampleContainerSchema,
-} from "Common/Constants";
-import { handleError } from "Common/ErrorHandlingUtils";
-import { createUri } from "Common/UrlUtility";
+import { Stack } from "@fluentui/react";
 import { CommandButtonComponentProps } from "Explorer/Controls/CommandButton/CommandButtonComponent";
 import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import { SaveQueryPane } from "Explorer/Panes/SaveQueryPane/SaveQueryPane";
-import { WelcomeModal } from "Explorer/QueryCopilot/Modal/WelcomeModal";
-import { CopyPopup } from "Explorer/QueryCopilot/Popup/CopyPopup";
-import { DeletePopup } from "Explorer/QueryCopilot/Popup/DeletePopup";
-import { OnExecuteQueryClick, SubmitFeedback } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
-import { GenerateSQLQueryResponse, QueryCopilotProps } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces";
+import { QueryCopilotPromptbar } from "Explorer/QueryCopilot/QueryCopilotPromptbar";
+import { OnExecuteQueryClick } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
+import { QueryCopilotProps } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces";
 import { QueryCopilotResults } from "Explorer/QueryCopilot/Shared/QueryCopilotResults";
-import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/Shared/SamplePrompts/SamplePrompts";
 import { userContext } from "UserContext";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { useSidePanel } from "hooks/useSidePanel";
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import SplitterLayout from "react-splitter-layout";
+import QueryCommandIcon from "../../../images/CopilotCommand.svg";
 import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
-import HintIcon from "../../../images/Hint.svg";
-import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
-import RecentIcon from "../../../images/Recent.svg";
-import XErrorMessage from "../../../images/X-errorMessage.svg";
 import SaveQueryIcon from "../../../images/save-cosmos.svg";
-import { useTabs } from "../../hooks/useTabs";
-
-interface SuggestedPrompt {
-  id: number;
-  text: string;
-}
-
-const promptStyles: IButtonStyles = {
-  root: { border: 0, selectors: { ":hover": { outline: "1px dashed #605e5c" } } },
-  label: { fontWeight: 400, textAlign: "left", paddingLeft: 8 },
-};
+import * as StringUtility from "../../Shared/StringUtility";

 export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: QueryCopilotProps): JSX.Element => {
-  const [copilotTeachingBubbleVisible, { toggle: toggleCopilotTeachingBubbleVisible }] = useBoolean(false);
-  const inputEdited = useRef(false);
-  const {
-    hideFeedbackModalForLikedQueries,
-    userPrompt,
-    setUserPrompt,
-    generatedQuery,
-    setGeneratedQuery,
-    query,
-    setQuery,
-    selectedQuery,
-    setSelectedQuery,
-    isGeneratingQuery,
-    setIsGeneratingQuery,
-    likeQuery,
-    setLikeQuery,
-    dislikeQuery,
-    setDislikeQuery,
-    showCallout,
-    setShowCallout,
-    showSamplePrompts,
-    setShowSamplePrompts,
-    isSamplePromptsOpen,
-    setIsSamplePromptsOpen,
-    showDeletePopup,
-    setShowDeletePopup,
-    showFeedbackBar,
-    setShowFeedbackBar,
-    showCopyPopup,
-    setshowCopyPopup,
-    showErrorMessageBar,
-    setShowErrorMessageBar,
-    setGeneratedQueryComments,
-  } = useQueryCopilot();
+  const { query, setQuery, selectedQuery, setSelectedQuery, isGeneratingQuery } = useQueryCopilot();

-  const sampleProps: SamplePromptsProps = {
-    isSamplePromptsOpen: isSamplePromptsOpen,
-    setIsSamplePromptsOpen: setIsSamplePromptsOpen,
-    setTextBox: setUserPrompt,
-  };
-
-  const copyGeneratedCode = () => {
-    if (!query) {
-      return;
-    }
-    const queryElement = document.createElement("textarea");
-    queryElement.value = query;
-    document.body.appendChild(queryElement);
-    queryElement.select();
-    document.execCommand("copy");
-    document.body.removeChild(queryElement);
-
-    setshowCopyPopup(true);
-    setTimeout(() => {
-      setshowCopyPopup(false);
-    }, 6000);
-  };
-
-  const cachedHistoriesString = localStorage.getItem(`${userContext.databaseAccount?.id}-queryCopilotHistories`);
-  const cachedHistories = cachedHistoriesString?.split("|");
-  const [histories, setHistories] = useState<string[]>(cachedHistories || []);
-  const suggestedPrompts: SuggestedPrompt[] = [
-    { id: 1, text: 'Show all products that have the word "ultra" in the name or description' },
-    { id: 2, text: "What are all of the possible categories for the products, and their counts?" },
-    { id: 3, text: 'Show me all products that have been reviewed by someone with a username that contains "bob"' },
-  ];
-  const [filteredHistories, setFilteredHistories] = useState<string[]>(histories);
-  const [filteredSuggestedPrompts, setFilteredSuggestedPrompts] = useState<SuggestedPrompt[]>(suggestedPrompts);
-
-  const handleUserPromptChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    inputEdited.current = true;
-    const { value } = event.target;
-    setUserPrompt(value);
-
-    // Filter history prompts
-    const filteredHistory = histories.filter((history) => history.toLowerCase().includes(value.toLowerCase()));
-    setFilteredHistories(filteredHistory);
-
-    // Filter suggested prompts
-    const filteredSuggested = suggestedPrompts.filter((prompt) =>
-      prompt.text.toLowerCase().includes(value.toLowerCase()),
-    );
-    setFilteredSuggestedPrompts(filteredSuggested);
-  };
-
-  const updateHistories = (): void => {
-    const formattedUserPrompt = userPrompt.replace(/\s+/g, " ").trim();
-    const existingHistories = histories.map((history) => history.replace(/\s+/g, " ").trim());
-
-    const updatedHistories = existingHistories.filter(
-      (history) => history.toLowerCase() !== formattedUserPrompt.toLowerCase(),
-    );
-    const newHistories = [formattedUserPrompt, ...updatedHistories.slice(0, 2)];
-
-    setHistories(newHistories);
-    localStorage.setItem(`${userContext.databaseAccount.id}-queryCopilotHistories`, newHistories.join("|"));
-  };
-
-  const generateSQLQuery = async (): Promise<void> => {
-    try {
-      setIsGeneratingQuery(true);
-      setShowDeletePopup(false);
-      useTabs.getState().setIsTabExecuting(true);
-      useTabs.getState().setIsQueryErrorThrown(false);
-      if (
-        useQueryCopilot.getState().containerStatus.status !== ContainerStatusType.Active &&
-        !userContext.features.disableCopilotPhoenixGateaway
-      ) {
-        await explorer.allocateContainer(PoolIdType.QueryCopilot);
-      }
-      const payload = {
-        containerSchema: userContext.features.enableCopilotFullSchema
-          ? QueryCopilotSampleContainerSchema
-          : ShortenedQueryCopilotSampleContainerSchema,
-        userPrompt: userPrompt,
-      };
-      useQueryCopilot.getState().refreshCorrelationId();
-      const serverInfo = useQueryCopilot.getState().notebookServerInfo;
-      const queryUri = userContext.features.disableCopilotPhoenixGateaway
-        ? createUri("https://copilotorchestrater.azurewebsites.net/", "generateSQLQuery")
-        : createUri(serverInfo.notebookServerEndpoint, "generateSQLQuery");
-      const response = await fetch(queryUri, {
-        method: "POST",
-        headers: {
-          "content-type": "application/json",
-          "x-ms-correlationid": useQueryCopilot.getState().correlationId,
-        },
-        body: JSON.stringify(payload),
-      });
-
-      const generateSQLQueryResponse: GenerateSQLQueryResponse = await response?.json();
-      if (response.ok) {
-        if (generateSQLQueryResponse?.sql) {
-          let query = `-- **Prompt:** ${userPrompt}\r\n`;
-          if (generateSQLQueryResponse.explanation) {
-            query += `-- **Explanation of query:** ${generateSQLQueryResponse.explanation}\r\n`;
-          }
-          query += generateSQLQueryResponse.sql;
-          setQuery(query);
-          setGeneratedQuery(generateSQLQueryResponse.sql);
-          setGeneratedQueryComments(generateSQLQueryResponse.explanation);
-          setShowErrorMessageBar(false);
-        }
-      } else {
-        handleError(JSON.stringify(generateSQLQueryResponse), "copilotInternalServerError");
-        useTabs.getState().setIsQueryErrorThrown(true);
-        setShowErrorMessageBar(true);
-      }
-    } catch (error) {
-      handleError(error, "executeNaturalLanguageQuery");
-      useTabs.getState().setIsQueryErrorThrown(true);
-      setShowErrorMessageBar(true);
-      throw error;
-    } finally {
-      setIsGeneratingQuery(false);
-      useTabs.getState().setIsTabExecuting(false);
-      setShowFeedbackBar(true);
-    }
-  };
+  const cachedCopilotToggleStatus = localStorage.getItem(`${userContext.databaseAccount?.id}-queryCopilotToggleStatus`);
+  const [copilotActive, setCopilotActive] = useState<boolean>(StringUtility.toBoolean(cachedCopilotToggleStatus));

  const getCommandbarButtons = (): CommandButtonComponentProps[] => {
    const executeQueryBtnLabel = selectedQuery ? "Execute Selection" : "Execute Query";
@@ -242,304 +47,45 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
      disabled: true,
    };

-    // Sample Prompts temporary disabled due current design
-    // const samplePromptsBtn = {
-    //   iconSrc: SamplePromptsIcon,
-    //   iconAlt: "Sample Prompts",
-    //   onCommandClick: () => setIsSamplePromptsOpen(true),
-    //   commandButtonLabel: "Sample Prompts",
-    //   ariaLabel: "Sample Prompts",
-    //   hasPopup: false,
-    // };
+    const toggleCopilotButton = {
+      iconSrc: QueryCommandIcon,
+      iconAlt: "Copilot",
+      onCommandClick: () => {
+        toggleCopilot(true);
+      },
+      commandButtonLabel: "Copilot",
+      ariaLabel: "Copilot",
+      hasPopup: false,
+      disabled: copilotActive,
+    };

-    return [executeQueryBtn, saveQueryBtn];
-  };
-  const showTeachingBubble = (): void => {
-    if (!inputEdited.current) {
-      setTimeout(() => {
-        if (!inputEdited.current) {
-          toggleCopilotTeachingBubbleVisible();
-          inputEdited.current = true;
-        }
-      }, 30000);
-    }
-  };
-
-  const resetButtonState = () => {
-    setDislikeQuery(false);
-    setLikeQuery(false);
-    setShowCallout(false);
-  };
-
-  const startGenerateQueryProcess = () => {
-    updateHistories();
-    generateSQLQuery();
-    resetButtonState();
+    return [executeQueryBtn, saveQueryBtn, toggleCopilotButton];
  };

  React.useEffect(() => {
    useCommandBar.getState().setContextButtons(getCommandbarButtons());
-  }, [query, selectedQuery]);
+  }, [query, selectedQuery, copilotActive]);

  React.useEffect(() => {
-    showTeachingBubble();
-    useTabs.getState().setIsQueryErrorThrown(false);
+    return () => {
+      const commandbarButtons = getCommandbarButtons();
+      commandbarButtons.pop();
+      commandbarButtons.map((props: CommandButtonComponentProps) => (props.disabled = true));
+      useCommandBar.getState().setContextButtons(commandbarButtons);
+    };
  }, []);

+  const toggleCopilot = (toggle: boolean) => {
+    setCopilotActive(toggle);
+    localStorage.setItem(`${userContext.databaseAccount?.id}-queryCopilotToggleStatus`, toggle.toString());
+  };
+
  return (
-    <Stack className="tab-pane" style={{ padding: 24, width: "100%" }}>
+    <Stack className="tab-pane" style={{ width: "100%" }}>
      <div style={isGeneratingQuery ? { height: "100%" } : { overflowY: "auto", height: "100%" }}>
-        <Stack horizontal verticalAlign="center">
-          <Image src={CopilotIcon} />
-          <Text style={{ marginLeft: 8, fontWeight: 600, fontSize: 16 }}>Copilot</Text>
-        </Stack>
-        <Stack horizontal verticalAlign="center" style={{ marginTop: 16, width: "100%", position: "relative" }}>
-          <TextField
-            id="naturalLanguageInput"
-            value={userPrompt}
-            onChange={handleUserPromptChange}
-            onClick={() => {
-              inputEdited.current = true;
-              setShowSamplePrompts(true);
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                inputEdited.current = true;
-                startGenerateQueryProcess();
-              }
-            }}
-            style={{ lineHeight: 30 }}
-            styles={{ root: { width: "95%" } }}
-            disabled={isGeneratingQuery}
-            autoComplete="off"
-          />
-          {copilotTeachingBubbleVisible && (
-            <TeachingBubble
-              calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
-              target="#naturalLanguageInput"
-              hasCloseButton={true}
-              closeButtonAriaLabel="Close"
-              onDismiss={toggleCopilotTeachingBubbleVisible}
-              hasSmallHeadline={true}
-              headline="Write a prompt"
-            >
-              Write a prompt here and Copilot will generate the query for you. You can also choose from our{" "}
-              <Link
-                onClick={() => {
-                  setShowSamplePrompts(true);
-                  toggleCopilotTeachingBubbleVisible();
-                }}
-                style={{ color: "white", fontWeight: 600 }}
-              >
-                sample prompts
-              </Link>{" "}
-              or write your own query
-            </TeachingBubble>
-          )}
-          <IconButton
-            iconProps={{ iconName: "Send" }}
-            disabled={isGeneratingQuery || !userPrompt.trim()}
-            style={{ marginLeft: 8 }}
-            onClick={() => startGenerateQueryProcess()}
-          />
-          {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
-          {showSamplePrompts && (
-            <Callout
-              styles={{ root: { minWidth: 400 } }}
-              target="#naturalLanguageInput"
-              isBeakVisible={false}
-              onDismiss={() => setShowSamplePrompts(false)}
-              directionalHintFixed={true}
-              directionalHint={DirectionalHint.bottomLeftEdge}
-              alignTargetEdge={true}
-              gapSpace={4}
-            >
-              <Stack>
-                {filteredHistories?.length > 0 && (
-                  <Stack>
-                    <Text
-                      style={{
-                        width: "100%",
-                        fontSize: 14,
-                        fontWeight: 600,
-                        color: "#0078D4",
-                        marginLeft: 16,
-                        padding: "4px 0",
-                      }}
-                    >
-                      Recent
-                    </Text>
-                    {filteredHistories.map((history, i) => (
-                      <DefaultButton
-                        key={i}
-                        onClick={() => {
-                          setUserPrompt(history);
-                          setShowSamplePrompts(false);
-                          inputEdited.current = true;
-                        }}
-                        onRenderIcon={() => <Image src={RecentIcon} />}
-                        styles={promptStyles}
-                      >
-                        {history}
-                      </DefaultButton>
-                    ))}
-                  </Stack>
-                )}
-                {filteredSuggestedPrompts?.length > 0 && (
-                  <Stack>
-                    <Text
-                      style={{
-                        width: "100%",
-                        fontSize: 14,
-                        fontWeight: 600,
-                        color: "#0078D4",
-                        marginLeft: 16,
-                        padding: "4px 0",
-                      }}
-                    >
-                      Suggested Prompts
-                    </Text>
-                    {filteredSuggestedPrompts.map((prompt) => (
-                      <DefaultButton
-                        key={prompt.id}
-                        onClick={() => {
-                          setUserPrompt(prompt.text);
-                          setShowSamplePrompts(false);
-                          inputEdited.current = true;
-                        }}
-                        onRenderIcon={() => <Image src={HintIcon} />}
-                        styles={promptStyles}
-                      >
-                        {prompt.text}
-                      </DefaultButton>
-                    ))}
-                  </Stack>
-                )}
-                {(filteredHistories?.length > 0 || filteredSuggestedPrompts?.length > 0) && (
-                  <Stack>
-                    <Separator
-                      styles={{
-                        root: {
-                          selectors: { "::before": { background: "#E1DFDD" } },
-                          padding: 0,
-                        },
-                      }}
-                    />
-                    <Text
-                      style={{
-                        width: "100%",
-                        fontSize: 14,
-                        marginLeft: 16,
-                        padding: "4px 0",
-                      }}
-                    >
-                      Learn about{" "}
-                      <Link target="_blank" href="https://aka.ms/cdb-copilot-writing">
-                        writing effective prompts
-                      </Link>
-                    </Text>
-                  </Stack>
-                )}
-              </Stack>
-            </Callout>
-          )}
-        </Stack>
-
-        <Stack style={{ marginTop: 8, marginBottom: 24 }}>
-          <Text style={{ fontSize: 12 }}>
-            AI-generated content can have mistakes. Make sure it&apos;s accurate and appropriate before using it.{" "}
-            <Link href="https://aka.ms/cdb-copilot-preview-terms" target="_blank">
-              Read preview terms
-            </Link>
-            {showErrorMessageBar && (
-              <Stack style={{ backgroundColor: "#FEF0F1", padding: "4px 8px" }} horizontal verticalAlign="center">
-                <Image src={XErrorMessage} style={{ marginRight: "8px" }} />
-                <Text style={{ fontSize: 12 }}>
-                  We ran into an error and were not able to execute query. Please try again after sometime
-                </Text>
-              </Stack>
-            )}
-          </Text>
-        </Stack>
-
-        {showFeedbackBar && (
-          <Stack style={{ backgroundColor: "#FFF8F0", padding: "2px 8px" }} horizontal verticalAlign="center">
-            <Text style={{ fontWeight: 600, fontSize: 12 }}>Provide feedback on the query generated</Text>
-            {showCallout && !hideFeedbackModalForLikedQueries && (
-              <Callout
-                style={{ padding: 8 }}
-                target="#likeBtn"
-                onDismiss={() => {
-                  setShowCallout(false);
-                  SubmitFeedback({
-                    params: {
-                      generatedQuery: generatedQuery,
-                      likeQuery: likeQuery,
-                      description: "",
-                      userPrompt: userPrompt,
-                    },
-                    explorer: explorer,
-                  });
-                }}
-                directionalHint={DirectionalHint.topCenter}
-              >
-                <Text>
-                  Thank you. Need to give{" "}
-                  <Link
-                    onClick={() => {
-                      setShowCallout(false);
-                      useQueryCopilot.getState().openFeedbackModal(generatedQuery, true, userPrompt);
-                    }}
-                  >
-                    more feedback?
-                  </Link>
-                </Text>
-              </Callout>
-            )}
-            <IconButton
-              id="likeBtn"
-              style={{ marginLeft: 20 }}
-              iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
-              onClick={() => {
-                setShowCallout(!likeQuery);
-                setLikeQuery(!likeQuery);
-                if (dislikeQuery) {
-                  setDislikeQuery(!dislikeQuery);
-                }
-              }}
-            />
-            <IconButton
-              style={{ margin: "0 10px" }}
-              iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
-              onClick={() => {
-                if (!dislikeQuery) {
-                  useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userPrompt);
-                  setLikeQuery(false);
-                }
-                setDislikeQuery(!dislikeQuery);
-                setShowCallout(false);
-              }}
-            />
-            <Separator vertical style={{ color: "#EDEBE9" }} />
-            <CommandBarButton
-              onClick={copyGeneratedCode}
-              iconProps={{ iconName: "Copy" }}
-              style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
-            >
-              Copy code
-            </CommandBarButton>
-            <CommandBarButton
-              onClick={() => {
-                setShowDeletePopup(true);
-              }}
-              iconProps={{ iconName: "Delete" }}
-              style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
-            >
-              Delete code
-            </CommandBarButton>
-          </Stack>
+        {copilotActive && (
+          <QueryCopilotPromptbar explorer={explorer} toggleCopilot={toggleCopilot}></QueryCopilotPromptbar>
        )}
-
        <Stack className="tabPaneContentContainer">
          <SplitterLayout vertical={true} primaryIndex={0} primaryMinSize={100} secondaryMinSize={200}>
            <EditorReact
@@ -555,18 +101,6 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
            <QueryCopilotResults />
          </SplitterLayout>
        </Stack>
-        <WelcomeModal visible={localStorage.getItem("hideWelcomeModal") !== "true"} />
-        {isSamplePromptsOpen && <SamplePrompts sampleProps={sampleProps} />}
-        {query !== "" && query.trim().length !== 0 && (
-          <DeletePopup
-            showDeletePopup={showDeletePopup}
-            setShowDeletePopup={setShowDeletePopup}
-            setQuery={setQuery}
-            clearFeedback={resetButtonState}
-            showFeedbackBar={setShowFeedbackBar}
-          />
-        )}
-        <CopyPopup showCopyPopup={showCopyPopup} setShowCopyPopup={setshowCopyPopup} />
      </div>
    </Stack>
  );
--- a/src/Explorer/QueryCopilot/Shared/QueryCopilotClient.ts
+++ b/src/Explorer/QueryCopilot/Shared/QueryCopilotClient.ts
@@ -21,6 +21,7 @@ import { userContext } from "UserContext";
 import { queryPagesUntilContentPresent } from "Utils/QueryUtils";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { useTabs } from "hooks/useTabs";
+import * as StringUtility from "../../../Shared/StringUtility";

 export const SendQueryRequest = async ({
  userPrompt,
@@ -165,7 +166,7 @@ export const OnExecuteQueryClick = async (): Promise<void> => {

 export const QueryDocumentsPerPage = async (
  firstItemIndex: number,
-  queryIterator: MinimalQueryIterator,
+  queryIterator: MinimalQueryIterator
 ): Promise<void> => {
  try {
    useQueryCopilot.getState().setIsExecuting(true);
@@ -173,8 +174,7 @@ export const QueryDocumentsPerPage = async (
    useTabs.getState().setIsQueryErrorThrown(false);
    const queryResults: QueryResults = await queryPagesUntilContentPresent(
      firstItemIndex,
-      async (firstItemIndex: number) =>
-        queryDocumentsPage(QueryCopilotSampleContainerId, queryIterator, firstItemIndex),
+      async (firstItemIndex: number) => queryDocumentsPage(QueryCopilotSampleContainerId, queryIterator, firstItemIndex)
    );

    useQueryCopilot.getState().setQueryResults(queryResults);
@@ -184,15 +184,20 @@ export const QueryDocumentsPerPage = async (
      correlationId: useQueryCopilot.getState().correlationId,
    });
  } catch (error) {
+    const isCopilotActive = StringUtility.toBoolean(
+      localStorage.getItem(`${userContext.databaseAccount?.id}-queryCopilotToggleStatus`)
+    );
    const errorMessage = getErrorMessage(error);
    traceFailure(Action.ExecuteQueryGeneratedFromQueryCopilot, {
      correlationId: useQueryCopilot.getState().correlationId,
      errorMessage: errorMessage,
    });
-    useQueryCopilot.getState().setErrorMessage(errorMessage);
    handleError(errorMessage, "executeQueryCopilotTab");
    useTabs.getState().setIsQueryErrorThrown(true);
-    useQueryCopilot.getState().setShowErrorMessageBar(true);
+    if (isCopilotActive) {
+      useQueryCopilot.getState().setErrorMessage(errorMessage);
+      useQueryCopilot.getState().setShowErrorMessageBar(true);
+    }
  } finally {
    useQueryCopilot.getState().setIsExecuting(false);
    useTabs.getState().setIsTabExecuting(false);
--- a/src/Explorer/QueryCopilot/snapshots/QueryCopilotTab.test.tsx.snap
+++ b/src/Explorer/QueryCopilot/snapshots/QueryCopilotTab.test.tsx.snap
@@ -5,7 +5,6 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
  className="tab-pane"
  style={
    Object {
-      "padding": 24,
      "width": "100%",
    }
  }
@@ -18,97 +17,6 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
      }
    }
  >
-    <Stack
-      horizontal={true}
-      verticalAlign="center"
-    >
-      <Image
-        src={Object {}}
-      />
-      <Text
-        style={
-          Object {
-            "fontSize": 16,
-            "fontWeight": 600,
-            "marginLeft": 8,
-          }
-        }
-      >
-        Copilot
-      </Text>
-    </Stack>
-    <Stack
-      horizontal={true}
-      style={
-        Object {
-          "marginTop": 16,
-          "position": "relative",
-          "width": "100%",
-        }
-      }
-      verticalAlign="center"
-    >
-      <StyledTextFieldBase
-        autoComplete="off"
-        disabled={false}
-        id="naturalLanguageInput"
-        onChange={[Function]}
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        style={
-          Object {
-            "lineHeight": 30,
-          }
-        }
-        styles={
-          Object {
-            "root": Object {
-              "width": "95%",
-            },
-          }
-        }
-        value=""
-      />
-      <CustomizedIconButton
-        disabled={true}
-        iconProps={
-          Object {
-            "iconName": "Send",
-          }
-        }
-        onClick={[Function]}
-        style={
-          Object {
-            "marginLeft": 8,
-          }
-        }
-      />
-    </Stack>
-    <Stack
-      style={
-        Object {
-          "marginBottom": 24,
-          "marginTop": 8,
-        }
-      }
-    >
-      <Text
-        style={
-          Object {
-            "fontSize": 12,
-          }
-        }
-      >
-        AI-generated content can have mistakes. Make sure it's accurate and appropriate before using it.
-         
-        <StyledLinkBase
-          href="https://aka.ms/cdb-copilot-preview-terms"
-          target="_blank"
-        >
-          Read preview terms
-        </StyledLinkBase>
-      </Text>
-    </Stack>
    <Stack
      className="tabPaneContentContainer"
    >
@@ -136,20 +44,6 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
        <QueryCopilotResults />
      </t>
    </Stack>
-    <WelcomeModal
-      visible={true}
-    />
-    <DeletePopup
-      clearFeedback={[Function]}
-      setQuery={[Function]}
-      setShowDeletePopup={[Function]}
-      showDeletePopup={false}
-      showFeedbackBar={[Function]}
-    />
-    <CopyPopup
-      setShowCopyPopup={[Function]}
-      showCopyPopup={false}
-    />
  </div>
 </Stack>
 `;
--- a/src/Explorer/Tabs/DocumentsTab.html
+++ b/src/Explorer/Tabs/DocumentsTab.html
@@ -106,6 +106,18 @@
              Apply Filter
            </button>
          </span>
+          <span class="filterbuttonpad">
+            <button
+              class="filterbtnstyle queryButton"
+              data-bind="
+                                visible: !isPreferredApiMongoDB && isExecuting,
+                                click: onAbortQueryClick"
+              aria-label="Cancel Query"
+              tabindex="0"
+            >
+              Cancel Query
+            </button>
+          </span>
          <span
            class="filterclose"
            role="button"
--- a/src/Explorer/Tabs/DocumentsTab.ts
+++ b/src/Explorer/Tabs/DocumentsTab.ts
@@ -78,6 +78,7 @@ export default class DocumentsTab extends TabsBase {
  private _documentsIterator: QueryIterator<ItemDefinition & Resource>;
  private _resourceTokenPartitionKey: string;
  private _isQueryCopilotSampleContainer: boolean;
+  private queryAbortController: AbortController;

  constructor(options: ViewModels.DocumentsTabOptions) {
    super(options);
@@ -401,6 +402,10 @@ export default class DocumentsTab extends TabsBase {
    return true;
  };

+  public onAbortQueryClick(): void {
+    this.queryAbortController.abort();
+  }
+
  public onDocumentIdClick(clickedDocumentId: DocumentId): Q.Promise<any> {
    if (this.editorState() !== ViewModels.DocumentExplorerState.noDocumentSelected) {
      return Q();
@@ -688,6 +693,7 @@ export default class DocumentsTab extends TabsBase {
  }

  public createIterator(): QueryIterator<ItemDefinition & Resource> {
+    this.queryAbortController = new AbortController();
    const filter: string = this.filterContent().trim();
    const query: string = this.buildQuery(filter);
    let options: any = {};
@@ -696,7 +702,7 @@ export default class DocumentsTab extends TabsBase {
    if (this._resourceTokenPartitionKey) {
      options.partitionKey = this._resourceTokenPartitionKey;
    }
-
+    options.abortSignal = this.queryAbortController.signal;
    return this._isQueryCopilotSampleContainer
      ? querySampleDocuments(query, options)
      : queryDocuments(this.collection.databaseId, this.collection.id(), query, options);
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -8,6 +8,7 @@ import React, { Fragment } from "react";
 import SplitterLayout from "react-splitter-layout";
 import "react-splitter-layout/lib/index.css";
 import LaunchCopilot from "../../../../images/CopilotTabIcon.svg";
+import CancelQueryIcon from "../../../../images/Entity_cancel.svg";
 import ExecuteQueryIcon from "../../../../images/ExecuteQuery.svg";
 import SaveQueryIcon from "../../../../images/save-cosmos.svg";
 import { NormalizedEventKey, QueryCopilotSampleDatabaseId } from "../../../Common/Constants";
@@ -91,6 +92,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
  public isCloseClicked: boolean;
  public isCopilotTabActive: boolean;
  private _iterator: MinimalQueryIterator;
+  private queryAbortController: AbortController;

  constructor(props: IQueryTabComponentProps) {
    super(props);
@@ -214,6 +216,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
  }

  private async _executeQueryDocumentsPage(firstItemIndex: number): Promise<void> {
+    this.queryAbortController = new AbortController();
    if (this._iterator === undefined) {
      this._iterator = this.props.isPreferredApiMongoDB
        ? queryIterator(
@@ -225,7 +228,10 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
            this.props.collection.databaseId,
            this.props.collection.id(),
            this.state.selectedContent || this.state.sqlQueryEditorContent,
-            { enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey() } as FeedOptions,
+            {
+              enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey(),
+              abortSignal: this.queryAbortController.signal,
+            } as FeedOptions,
          );
    }

@@ -244,6 +250,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
    this.setState({
      isExecuting: true,
    });
+    useCommandBar.getState().setContextButtons(this.getTabsButtons());

    try {
      const queryResults: ViewModels.QueryResults = await QueryUtils.queryPagesUntilContentPresent(
@@ -268,6 +275,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
        isExecuting: false,
      });
      this.togglesOnFocus();
+      useCommandBar.getState().setContextButtons(this.getTabsButtons());
    }
  }

@@ -332,6 +340,18 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
      buttons.push(launchCopilotButton);
    }

+    if (!this.props.isPreferredApiMongoDB && this.state.isExecuting) {
+      const label = "Cancel query";
+      buttons.push({
+        iconSrc: CancelQueryIcon,
+        iconAlt: label,
+        onCommandClick: () => this.queryAbortController.abort(),
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+      });
+    }
+
    return buttons;
  }

--- a/src/Platform/Hosted/extractFeatures.ts
+++ b/src/Platform/Hosted/extractFeatures.ts
@@ -40,6 +40,7 @@ export type Features = {
  readonly disableCopilotPhoenixGateaway: boolean;
  readonly enableCopilotFullSchema: boolean;
  readonly copilotChatFixedMonacoEditorHeight: boolean;
+  readonly enablePriorityBasedExecution: boolean;

  // can be set via both flight and feature flag
  autoscaleDefault: boolean;
@@ -112,6 +113,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
    disableCopilotPhoenixGateaway: "true" === get("disablecopilotphoenixgateaway"),
    enableCopilotFullSchema: "true" === get("enablecopilotfullschema", "true"),
    copilotChatFixedMonacoEditorHeight: "true" === get("copilotchatfixedmonacoeditorheight"),
+    enablePriorityBasedExecution: "true" === get("enableprioritybasedexecution"),
  };
 }

--- a/src/Utils/PriorityBasedExecutionUtils.ts
+++ b/src/Utils/PriorityBasedExecutionUtils.ts
@@ -1,6 +1,15 @@
 import * as Cosmos from "@azure/cosmos";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { PriorityLevel } from "../Common/Constants";
+import { userContext } from "../UserContext";
+
+export function isFeatureEnabled(): boolean {
+  return (
+    userContext.apiType === "SQL" &&
+    (userContext.databaseAccount?.properties?.enablePriorityBasedExecution ||
+      userContext.features.enablePriorityBasedExecution)
+  );
+}

 export function isRelevantRequest(requestContext: Cosmos.RequestContext): boolean {
  return (
--- a/src/hooks/useDatabaseAccounts.tsx
+++ b/src/hooks/useDatabaseAccounts.tsx
@@ -1,7 +1,6 @@
 import useSWR from "swr";
 import { configContext } from "../ConfigContext";
 import { DatabaseAccount } from "../Contracts/DataModels";
-import { userContext } from "../UserContext";

 interface AccountListResult {
  nextLink: string;
@@ -15,7 +14,7 @@ export async function fetchDatabaseAccounts(subscriptionId: string, accessToken:
  headers.append("Authorization", bearer);

  let accounts: Array<DatabaseAccount> = [];
-  const apiVersion = userContext.features.enableThroughputCap ? "2021-10-15-preview" : "2021-06-15";
+  const apiVersion = "2023-09-15-preview";
  let nextLink = `${configContext.ARM_ENDPOINT}/subscriptions/${subscriptionId}/providers/Microsoft.DocumentDB/databaseAccounts?api-version=${apiVersion}`;

  while (nextLink) {
--- a/src/hooks/useQueryCopilot.ts
+++ b/src/hooks/useQueryCopilot.ts
@@ -30,6 +30,7 @@ export interface QueryCopilotState {
  showFeedbackBar: boolean;
  showCopyPopup: boolean;
  showErrorMessageBar: boolean;
+  showInvalidQueryMessageBar: boolean;
  generatedQueryComments: string;
  wasCopilotUsed: boolean;
  showWelcomeSidebar: boolean;
@@ -64,6 +65,7 @@ export interface QueryCopilotState {
  setShowFeedbackBar: (showFeedbackBar: boolean) => void;
  setshowCopyPopup: (showCopyPopup: boolean) => void;
  setShowErrorMessageBar: (showErrorMessageBar: boolean) => void;
+  setShowInvalidQueryMessageBar: (showInvalidQueryMessageBar: boolean) => void;
  setGeneratedQueryComments: (generatedQueryComments: string) => void;
  setWasCopilotUsed: (wasCopilotUsed: boolean) => void;
  setShowWelcomeSidebar: (showWelcomeSidebar: boolean) => void;
@@ -104,6 +106,7 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({
  showFeedbackBar: false,
  showCopyPopup: false,
  showErrorMessageBar: false,
+  showInvalidQueryMessageBar: false,
  generatedQueryComments: "",
  wasCopilotUsed: false,
  showWelcomeSidebar: true,
@@ -148,6 +151,7 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({
  setShowFeedbackBar: (showFeedbackBar: boolean) => set({ showFeedbackBar }),
  setshowCopyPopup: (showCopyPopup: boolean) => set({ showCopyPopup }),
  setShowErrorMessageBar: (showErrorMessageBar: boolean) => set({ showErrorMessageBar }),
+  setShowInvalidQueryMessageBar: (showInvalidQueryMessageBar: boolean) => set({ showInvalidQueryMessageBar }),
  setGeneratedQueryComments: (generatedQueryComments: string) => set({ generatedQueryComments }),
  setWasCopilotUsed: (wasCopilotUsed: boolean) => set({ wasCopilotUsed }),
  setShowWelcomeSidebar: (showWelcomeSidebar: boolean) => set({ showWelcomeSidebar }),
@@ -196,6 +200,7 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({
      showFeedbackBar: false,
      showCopyPopup: false,
      showErrorMessageBar: false,
+      showInvalidQueryMessageBar: false,
      generatedQueryComments: "",
      wasCopilotUsed: false,
      showCopilotSidebar: false,
Author	SHA1	Message	Date
sunghyunkang1111	06973bd3d5	Update snapshots	2023-10-06 12:43:57 -05:00
sunghyunkang1111	44667beba9	take out toggle button when closing tab	2023-10-06 12:28:01 -05:00
sunghyunkang1111	0566f19e87	Add copilot toggle button	2023-10-06 11:36:15 -05:00
Asier Isayas	3754d2c32c	Cancel Query Option (#1646 ) * cancel query option --------- Co-authored-by: Asier Isayas <aisayas@microsoft.com>	2023-10-05 10:37:59 -04:00
FAIZ CHACHIYA	ca861a0d77	For connection-string based authentication, the request would be made… (#1644 ) * For connection-string based authentication, the request would be made with low priority request header and for AAD based authentication, users can select the priority-request option from the settings panel * removed unused imports * prettier checks --------- Co-authored-by: Faiz Chachiya <faizchachiya@microsoft.com>	2023-10-04 14:18:54 -07:00
JustinKol	07d242f972	Fixed setup save queries within serverless accounts (#1626 ) * Fixed setup save queries within serverless accounts * Fixed format * ran prettier	2023-10-04 14:23:22 -04:00
sunghyunkang1111	68b45e77a8	clear query results and handle error with no query generated (#1640 ) * clear query results and handle error with no query generated * clear query results and handle error with no query generated * Update the query guidelines link * Update the query guidelines link	2023-10-04 12:20:56 -05:00